<template>
  <div :class="[$style.wrapper, {[$style['margin0']]: margin === 'margin0'},{[$style['overflowY-scroll']]: overflow ==='overflowY-scroll'},{[$style['spNone']]:spNone}]">
    <slot></slot>
  </div>
</template>
<script>
// .m-detail02
export default {
  props: {
    margin: {
      type: String,
      default: 'default',
      required: false
    },
    overflow: {
      type: String,
      default: 'default',
      required: false
    },
    spNone: {
      type: Boolean,
      default: false,
      required: false
    }
  }
}
</script>

<style module lang="scss">
.wrapper{
  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; */
    padding: 3rem;
    margin: 2rem 0 3rem 0;
  }
  @include mq-sp {
    padding: 2.8rem 2rem 2.8rem 2rem;
    /* margin: 0 -2rem; */
    margin-bottom: 3rem;
  }
  &.overflowY-scroll {
    overflow-y: scroll;
    max-height: 39.5rem;
  }

  &:first-child{
    margin-top:0;
  }
  &:last-child{
    margin-bottom:0;
  }
}
.wrapper.spNone {
  @include mq-sp {
    display: none;
  }
}
.wrapper.margin0 {
    @include mq-pc {
    margin: 0;
  }
}

@include mq-sp {
  .wrapper {
    padding: 3rem 2rem 2.4rem 2rem;
  }
}
</style>
