.container-basic {
  // 共通のコンテナ設定
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;

  // コンテナ幅の設定
  &.custom-block-container {
    &.container-full-width {
      max-width: 100%;
    }

    &.container-wide {
      max-width: 1280px;
    }

    &.container-normal {
      max-width: 1080px;
    }

    &.container-slim {
      max-width: 800px;
    }
  }

  // マージン設定
  &.apply-margin {
    margin-top: var(--spacing-margin-top-pc, 0) !important;
    margin-right: var(--spacing-margin-right-pc, 0) !important;
    margin-bottom: var(--spacing-margin-bottom-pc, 0) !important;
    margin-left: var(--spacing-margin-left-pc, 0) !important;

    @media screen and (max-width: 767px) {
      margin-top: var(--spacing-margin-top-sp, 0) !important;
      margin-right: var(--spacing-margin-right-sp, 0) !important;
      margin-bottom: var(--spacing-margin-bottom-sp, 0) !important;
      margin-left: var(--spacing-margin-left-sp, 0) !important;
    }
  }

  // パディング設定
  &.apply-padding {
    padding-top: var(--spacing-padding-top-pc, 0) !important;
    padding-right: var(--spacing-padding-right-pc, 0) !important;
    padding-bottom: var(--spacing-padding-bottom-pc, 0) !important;
    padding-left: var(--spacing-padding-left-pc, 0) !important;

    @media screen and (max-width: 767px) {
      padding-top: var(--spacing-padding-top-sp, 0) !important;
      padding-right: var(--spacing-padding-right-sp, 0) !important;
      padding-bottom: var(--spacing-padding-bottom-sp, 0) !important;
      padding-left: var(--spacing-padding-left-sp, 0) !important;
    }
  }
}