@charset "UTF-8";

/* ==========================================================================
   cta_wrap.css
   ========================================================================== */

/*========================================================================= */
/*CTA module wrap */
/*========================================================================== */

.o-m__cta-wrap_inner {
  color: #FFF;
  width: 100%;
  overflow: hidden;
  position: relative;
  &:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -130px;
    left: -90px;
    width: 406px;
    height: 386px;
    background-image: url(/rakurakucloud/meisai/assets/image/figure/back_component_sub_bg.svg);
    background-size: cover;
    transform: rotate(-120deg);
    @media screen and (max-width: 1024px) {
      bottom: -190px;
      left: -140px;
      z-index: 0;
      transform: rotate(-120deg) scale(0.8);
    }
    @media screen and (max-width: 576px) {
      z-index: 0;
      bottom: -90px;
      left: -70px;
      width: 250px;
      height: 250px;
      transform: rotate(-120deg);
    }
  }
  &:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -90px;
    right: -120px;
    width: 406px;
    height: 386px;
    background-image: url(/rakurakucloud/meisai/assets/image/figure/back_component_sub_bg.svg);
    background-size: cover;
    transform: rotate(83deg);
    @media screen and (max-width: 1024px) {
      top: -210px;
      right: -140px;
      z-index: 0;
      transform: rotate(83deg) scale(0.8);
    }
    @media screen and (max-width: 576px) {
      z-index: 0;
      top: -85px;
      right: -90px;
      width: 250px;
      height: 250px;
      transform: rotate(83deg);
    }
  }
}