/* =====================
  utility class
===================== */

/*  u--transition
------------------------*/
.u--transition{
  -webkit-transition: all 0.3s ease !important;
  -moz-transition: all 0.3s ease !important;
  -o-transition: all 0.3s ease !important;
  transition: all  0.3s ease !important;
}

/*  u--glow
------------------------*/
.u--glow:hover{
   filter:alpha(opacity=70) !important;
   -moz-opacity:0.7 !important;
   opacity:0.7 !important;
}

/*  u--img-responsive
------------------------*/
.u--img-responsive{
  max-width: 100% !important;
  height: auto !important;
}


/*  u--row-padding-n / bootstrap resetting container paddings
------------------------*/
/*
.u--container-padding-0{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.u--container-padding-5{
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.u--container-padding-10{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.u--container-padding-20{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
*/

/*  u--row-padding-n / bootstrap resetting row margins
------------------------*/
/*
.u--row-margin-0{
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.u--row-margin-0 > div{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.u--row-margin-5{
  margin-left: -5px !important;
  margin-right: -5px !important;
}
.u--row-margin-5 > div{
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.u--row-margin-10{
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.u--row-margin-10 > div{
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.u--row-margin-20{
  margin-left: -20px !important;
  margin-right: -20px !important;
}
.u--row-margin-20 > div{
  margin-left: 20px !important;
  margin-right: 20px !important;
}
*/


/*  u--row-gutter-n / rowの左右余白調整用。カラム（col-*）のpaddingが15pxであること前提なので、カラムのpaddingを変更している場合は利用不可。
------------------------*/
@media screen and (max-width: 767px) {
  .u--row-sp-gutter-0{
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
  .u--row-sp-gutter-5{
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  .u--row-sp-gutter-10{
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .u--row-sp-gutter-15{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media screen and (min-width: 768px) {
  .u--row-gutter-0{
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
  .u--row-gutter-5{
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  .u--row-gutter-10{
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .u--row-gutter-15{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/*.u--row-gutter-0{
  margin-left: -15px !important;
  margin-right: -15px !important;
}
.u--row-gutter-5{
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.u--row-gutter-10{
  margin-left: -5px !important;
  margin-right: -5px !important;
}

.u--row-gutter-15{
  margin-left: 0 !important;
  margin-right: 0 !important;
}*/


/*  u--focus-color
------------------------*/
.u--focus-color{
  color: #ff4115;
}

/*  u--icon-cancel
------------------------*/
.u--icon-cancel{
    display: inline-block;
    position: relative;
    margin: 0 20px 0 7px;
    padding: 0;
    width: 4px;
    height: 20px;
    background: #000;
    transform: rotate(45deg);
}
.u--icon-cancel::before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: #000;
}


/*  u--text-color-red
------------------------*/
.u--text-color-red{
  color: red;
}


/*  u--pointer
------------------------*/
.u--pointer{
  cursor: pointer;
}