// フォントのサイズ設定
@for $i from 1 through 40 {
  .fs-#{$i}{
    font-size: $i*0.1rem;
  }
}

@include media-breakpoint-up(sm){
  @for $i from 1 through 40 {
    .fs-sm-#{$i}{
      font-size: $i*0.1rem;
    }
  }
}

@include media-breakpoint-up(md){
  @for $i from 1 through 40 {
    .fs-md-#{$i}{
      font-size: $i*0.1rem;
    }
  }
}

@include media-breakpoint-up(lg){
  @for $i from 1 through 40 {
    .fs-lg-#{$i}{
      font-size: $i*0.1rem;
    }
  }
}

// 行間設定
@for $i from 0 through 40 {
  .lht-#{$i}{
    line-height: $i*10%;
  }
}

// 幅設定
@for $i from 1 through 200 {
  .w-#{$i}{
    width: $i*1%;
  }
}

@include media-breakpoint-down(sm){
  @for $i from 1 through 100 {
    .w-sm-#{$i}{
      width: $i*1%;
    }
  }
}

@include media-breakpoint-up(md){
  @for $i from 10 through 100 {
    .w-md-#{$i}{
      width: $i*1%;
    }
  }
}

@include media-breakpoint-up(lg){
  @for $i from 1 through 100 {
    .w-lg-#{$i}{
      width: $i*1%;
    }
  }
}

// ボーダー設定
@include media-breakpoint-up(lg){
  .border-lg{
    border: 1px solid lighten(#000000,90);
  }

  .border-lg-top{
    border-top: 1px solid lighten(#000000,90);
  }

  .border-lg-bottom{
    border-bottom: 1px solid lighten(#000000,90);
  }

  .border-lg-left{
    border-left: 1px solid lighten(#000000,90);
  }

  .border-lg-right{
    border-right: 1px solid lighten(#000000,90);
  }

  .border-lg-none{
    border: none !important;
  }

  .border-lg-top-none{
    border-top: none !important;
  }

  .border-lg-bottom-none{
    border-bottom: none !important;
  }

  .border-lg-left-none{
    border-left: none !important;
  }

  .border-lg-right-none{
    border-right: none !important;
  }

}

@include media-breakpoint-up(md){
  .border-md{
    border: 1px solid lighten(#000000,90);
  }

  .border-md-top{
    border-top: 1px solid lighten(#000000,90);
  }

  .border-md-bottom{
    border-bottom: 1px solid lighten(#000000,90);
  }

  .border-md-left{
    border-left: 1px solid lighten(#000000,90);
  }

  .border-md-right{
    border-right: 1px solid lighten(#000000,90);
  }

  .border-md-none{
    border: none !important;
  }

  .border-md-top-none{
    border-top: none !important;
  }

  .border-md-bottom-none{
    border-bottom: none !important;
  }

  .border-md-left-none{
    border-left: none !important;
  }

  .border-md-right-none{
    border-right: none !important;
  }

}

@include media-breakpoint-up(sm){
  .border-sm{
    border: 1px solid lighten(#000000,90);
  }

  .border-sm-top{
    border-top: 1px solid lighten(#000000,90);
  }

  .border-sm-bottom{
    border-bottom: 1px solid lighten(#000000,90);
  }

  .border-sm-left{
    border-left: 1px solid lighten(#000000,90);
  }

  .border-sm-right{
    border-right: 1px solid lighten(#000000,90);
  }

  .border-sm-none{
    border: none !important;
  }

  .border-sm-top-none{
    border-top: none !important;
  }

  .border-sm-bottom-none{
    border-bottom: none !important;
  }

  .border-sm-left-none{
    border-left: none !important;
  }

  .border-sm-right-none{
    border-right: none !important;
  }

}

// border 拡張

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
    .border#{$infix}-right {    border-right: $border-width solid $border-color !important; }
    .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
    .border#{$infix}-left {     border-left: $border-width solid $border-color !important; }

    .border#{$infix}-top-0 {    border-top: 0 !important; }
    .border#{$infix}-right-0 {  border-right: 0 !important; }
    .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
    .border#{$infix}-left-0 {   border-left: 0 !important; }

    .border#{$infix}-x {
      border-left: $border-width solid $border-color !important;
      border-right: $border-width solid $border-color !important;
    }

    .border#{$infix}-y {
      border-top: $border-width solid $border-color !important;
      border-bottom: $border-width solid $border-color !important;
    }
  }
}

@for $i from 0 through 10 {
  .border-#{$i}{
    border-width: $i*1px !important;
  }
}

@each $key, $color in $globalColor {
  .border-#{"" + $key} {
    border-color: $color !important;
  }
}

button{
  outline:none !important;
}


.form-control{
  &::placeholder{
    color: #cccccc;
  }
}