/**
 * スペーシング基本スタイル
 */
 
.spacing-basic {
  // マージンとパディングは適用フラグに応じて適用
  
  // apply-marginクラスがある場合のみマージンを適用
  &.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クラスがある場合のみパディングを適用
  &.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;
    }
  }
}