@charset "utf-8";

/* ==========================================================================
responsive.gs.24col.css （最終更新：2016/9/31）
※右寄せを追加するため編集しています。
========================================================================== */

/*	24 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); 
/*	If you need support for IE7 and lower make 
sure the boxsizing.htc file is linked properly.
More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

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

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

/* 	DEFAULT ROW STYLES 
Set bottom padding according to preference */
.row { padding-bottom: 0; }


/* DEFAULT COLUMN STYLES */
.col { 
  display: block;
  float: left;
  width: 100%;
}

.col_r { 
  display: block;
  float: right;
  width: 100%;
}


@media ( min-width : 768px ) {

  .gutters .col {
    margin-left: 2%;
  }

  .gutters .col_r {
    margin-right: 2%;
  }

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

  .gutters .col_r:first-child { 
    margin-right: 0; 
  }

  .gutters .col .gutters_no .col {
    margin-left: 0;
  }

  .gutters .col_r .gutters_no .col {
    margin-left: 0;
  }

  .gutters .col .gutters_no .col_r {
    margin-right: 0;
  }

  .gutters .col_r .gutters_no .col_r {
    margin-right: 0;
  }

}


/*--------------------------------------------------------*/

/* @group 768px - wide tablet
ここに768px～1023pxまでのCSSを記述
--------------------------------------------------------*/

@media only screen and (min-width:768px){
  .span_1 { width: 4.16666666667%; }
  .span_2 { width: 8.33333333333%; }
  .span_3 { width:12.5%; }
  .span_4 { width: 16.6666666667%; }
  .span_5 { width: 20.8333333333%; }
  .span_6 { width: 25%; }
  .span_7 { width: 29.1666666667%; }
  .span_8 { width: 33.3333333333%; }
  .span_9 { width: 37.5%; }
  .span_10 { width: 41.6666666667%; }
  .span_11 { width: 45.8333333333%; }
  .span_12 { width: 50%; }
  .span_13 { width: 54.1666666667%; }
  .span_14 { width: 58.3333333333%; }
  .span_15 { width: 62.5%; }
  .span_16 { width: 66.6666666667%; }
  .span_17 { width: 70.8333333333%; }
  .span_18 { width: 75%; }
  .span_19 { width: 79.1666666667%; }
  .span_20 { width: 83.3333333333%; }
  .span_21 { width: 87.5%; }
  .span_22 { width: 91.6666666667%; }
  .span_23 { width: 95.8333333333%; }
  .span_24 { width: 100%; }

  .gutters .span_1 { width: 2.25%; }
  .gutters .span_2 { width: 6.5%; }
  .gutters .span_3 { width: 10.75%; }
  .gutters .span_4 { width: 15.0%; }
  .gutters .span_5 { width: 19.25%; }
  .gutters .span_6 { width: 23.5%; }
  .gutters .span_7 { width: 27.75%; }
  .gutters .span_8 { width: 32.0%; }
  .gutters .span_9 { width: 36.25%; }
  .gutters .span_10 { width: 40.5%; }
  .gutters .span_11 { width: 44.75%; }
  .gutters .span_12 { width: 49.0%; }
  .gutters .span_13 { width: 53.25%; }
  .gutters .span_14 { width: 57.5%; }
  .gutters .span_15 { width: 61.75%; }
  .gutters .span_16 { width: 66.0%; }
  .gutters .span_17 { width: 70.25%; }
  .gutters .span_18 { width: 74.5%; }
  .gutters .span_19 { width: 78.75%; }
  .gutters .span_20 { width: 83.0%; }
  .gutters .span_21 { width: 87.25%; }
  .gutters .span_22 { width: 91.5%; }
  .gutters .span_23 { width: 95.75%; }
  .gutters .span_24 { width: 100%; }

  .gutters .gutters_no .span_1 { width: 4.16666666667%; }
  .gutters .gutters_no .span_2 { width: 8.33333333333%; }
  .gutters .gutters_no .span_3 { width:12.5%; }
  .gutters .gutters_no .span_4 { width: 16.6666666667%; }
  .gutters .gutters_no .span_5 { width: 20.8333333333%; }
  .gutters .gutters_no .span_6 { width: 25%; }
  .gutters .gutters_no .span_7 { width: 29.1666666667%; }
  .gutters .gutters_no .span_8 { width: 33.3333333333%; }
  .gutters .gutters_no .span_9 { width: 37.5%; }
  .gutters .gutters_no .span_10 { width: 41.6666666667%; }
  .gutters .gutters_no .span_11 { width: 45.8333333333%; }
  .gutters .gutters_no .span_12 { width: 50%; }
  .gutters .gutters_no .span_13 { width: 54.1666666667%; }
  .gutters .gutters_no .span_14 { width: 58.3333333333%; }
  .gutters .gutters_no .span_15 { width: 62.5%; }
  .gutters .gutters_no .span_16 { width: 66.6666666667%; }
  .gutters .gutters_no .span_17 { width: 70.8333333333%; }
  .gutters .gutters_no .span_18 { width: 75%; }
  .gutters .gutters_no .span_19 { width: 79.1666666667%; }
  .gutters .gutters_no .span_20 { width: 83.3333333333%; }
  .gutters .gutters_no .span_21 { width: 87.5%; }
  .gutters .gutters_no .span_22 { width: 91.6666666667%; }
  .gutters .gutters_no .span_23 { width: 95.8333333333%; }
  .gutters .gutters_no .span_24 { width: 100%; }
  
  .container { 
    padding:0;
  }
}

/*--------------------------------------------------------*/

/* @group 1024px - wide desktop
ここに1024px以上のCSSを記述z
--------------------------------------------------------*/


@media only screen and (min-width:1024px){

}