/*  12 COLUMN : RESPONSIVE GRID SYSTEM
  DEVELOPER : DENIS LEBLANC
  URL : http://responsive.gs
  VERSION : 3.0
  LICENSE : GPL & MIT */


/* SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
/*
* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}
*/  /* DEL */

/*
.row > * {
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
*/  /* UPD */
.row > .col {
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

/*  MAIN CONTAINER 
  Set the width to whatever you want the width of your site to be. */
.container { 
/*   max-width: 800px;
  margin: 0 auto; 
 */  /* DEL */
}

/*  SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
  content: ""; 
  display: table; 
  clear: both; 
}

/*   DEFAULT ROW STYLES 
  Set bottom padding according to preference */
.row { padding-bottom: 0em;
}
      
                
/* DEFAULT COLUMN STYLES */
.col { 
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 1em;  /* ADD */
}

/* ADD 右から並べる場合 .row-reverse を追加 */
.row-reverse .col {
  float: right;
}

@media print, screen and (min-width: 768px) {
  .gutters .col {
    margin-left: 2%;
  }
  
  .row-reverse.gutters .col {
    margin-left: 0;
    margin-right: 2%;
  }

  .gutters .col:first-child { 
    margin-left: 0; 
  }

  .row-reverse.gutters .col:first-child {
    margin-right: 0;
  }
}


/*  COLUMN WIDTH ON DISPLAYS +768px 
  You might need to play with media queries here to suite your design. */
@media print, screen and (min-width: 768px) {
  .span_1 { width: 8.33333333333%; }
  .span_2 { width: 16.6666666667%; }
  .span_3 { width: 25%; }
  .span_4 { width: 33.3333333333%; }
  .span_5 { width: 41.6666666667%; }
  .span_6 { width: 50%; }
  .span_7 { width: 58.3333333333%; }
  .span_8 { width: 66.6666666667%; }
  .span_9 { width: 75%; }
  .span_10 { width: 83.3333333333%; }
  .span_11 { width: 91.6666666667%; }
  .span_12 { width: 100%; }
  
  .gutters .span_1 { width: 6.5%; }
  .gutters .span_2 { width: 15.0%; }
  .gutters .span_3 { width: 23.5%; }
  .gutters .span_4 { width: 32.0%; }
  .gutters .span_5 { width: 40.5%; }
  .gutters .span_6 { width: 49.0%; }
  .gutters .span_7 { width: 57.5%; }
  .gutters .span_8 { width: 66.0%; }
  .gutters .span_9 { width: 74.5%; }
  .gutters .span_10 { width: 83.0%; }
  .gutters .span_11 { width: 91.5%; }
  .gutters .span_12 { width: 100%; }
}