@charset "UTF-8";
/* baner.cssのみPCメインでCSS書いてる */

.floating-banner {
  position: fixed;
  z-index: 800;
  bottom: 0;
  right: 0;
}
.banner {
  width: 370px;/* バナーの横幅 */
  padding: 30px 10px;
  /* background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%);バナーの背景色 */


  background-image: linear-gradient( 135deg, #FEB692 10%, #E8628A 100%);
  color: #fff;/* バナー内の文字色 */
  font-weight: bold;
  text-align: center;
}
.floating-banner a {
  text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
  font-size: 28px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.cta {
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  background-image: linear-gradient(135deg, #97d3c2 0%, #67a2c4 100%); /* ボタンの背景 */
  box-shadow: 5px 5px 30px #de547e; /* ボタンの影 */
  border-radius: 25px;
  margin: 0;
  transition: all 0.3s ease-out;
}
.cta:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 1200px) {
  .floating-banner {
      display: inline-block;
  }
  .banner {
      width: 100vw;
      padding: 8px;
  }
  .sp {
      display: none;
  }
  .copy {
      font-size: 18px;
      margin: 0 auto 6px;
  }
  .cta {
      height: 28px;
      line-height: 28px;
      font-size: 15px;
  }
}