<template>
  <div :class="$style.boxType01">
    <div>
      <slot></slot>
    </div>
    <div v-if="hasPlusIcon" :class="$style.plusIcon">
      &nbsp;
    </div>
  </div>
</template>
<script>
export default {
  props: {
    hasPlusIcon: {
      type: Boolean,
      required: false
    }
  }
}
</script>

<style module lang="scss">
.boxType01{
  position: relative;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem;
  @include mq-pc {
    padding: 6rem 10rem 7rem 10rem;
    margin-bottom: 5rem;
    &:last-child{
      margin-bottom: 0;
    }
  }
  @include mq-sp {
    padding: 1rem 2rem 4rem 2rem;
    /* margin: 0 -2rem; */
  }
}

.plusIcon {
  text-align: center;
  position:absolute;
  top: -3rem;
  left:50%;
  transform:translateX(-50%);
}
.plusIcon:before {
  width: 5.6rem;
  height: 5.6rem;
  content: "";
  background: url("~assets/images/shared/icon-plus-white.svg") center center
    no-repeat;
  background-size: 2rem;
  background-color: #cf7af1;
  border-radius: 50%;
  display: inline-block;
  margin: 0 auto;
}

</style>
