/* ボックスレイアウト
=========================================== */
$box_min: 1;
$box_max: 12;
@for $i from $box_min through $box_max {
  .flex.col_#{$i}{
    >div{
      width:#{(100 / $i)}#{'%'};
      @media only screen and (max-width: 767px){
        width: 100%;
      }
    }
  }
  .flex.flex-between.col_#{$i}{
    >div{
      width:#{(100 / $i - 1.5)}#{'%'};
      @media only screen and (max-width: 767px){
        width: 100%;
      }
    }
  }
}

/* margin
=========================================== */
// 指定するmarginの範囲を定義
$margin-min: 1;
$margin-max: 100;
@for $i from $margin-min through $margin-max {
  .mt#{$i} {
    margin-top: #{$i}px;
  }
  .mr#{$i} {
    margin-right: #{$i}px;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px;
  }
  .ml#{$i} {
    margin-left: #{$i}px;
  }
}

/* padding
=========================================== */
// 指定するpaddingの範囲を定義
$padding-min: 1;
$padding-max: 100;
@for $i from $padding-min through $padding-max {
  .pt#{$i} {
    padding-top: #{$i}px;
  }
  .pr#{$i} {
    padding-right: #{$i}px;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px;
  }
  .pl#{$i} {
    padding-left: #{$i}px;
  }
}