/*	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); 
	/*	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 { 
	max-width: 1240px;
	margin: 0 auto;
}

@media(max-width:1240px){
    .container{
        padding:0 2%;
    }
}

@media(max-width:768px){
    .container{
        padding:0 3%;
    }
}



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

/* 	DEFAULT ROW STYLES 
	Set bottom padding according to preference */
.row { padding-bottom: 0em;
}
             
                                   
/* ベースとしてカラムを100%に設定 */
.col {
    display: block;
    float: left;
    width: 100%;
}

.col2{
    display: block;
    float: right;
    width:100%;
}
 
@media ( min-width : 769px ) {
    /*PCにサイトの場合に2カラムの間に余白をつける*/
    .gutters .col {
        margin-left: 2%;
    }
    
    .gutters .col2{
        margin-left: 2%;
    }
    
    /*左側のカラムには余白はいらないので0にする*/
    .gutters .col:first-child {
        margin-left: 0;
    }
    
    .gutters .col2:last-child{
        margin-left:0;
    }
}
 
/*　PCサイトの場合のカラム幅の調整　*/
@media ( min-width : 769px ) {
    .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%; }
}

/*　画像について追加　*/

img{
max-width: 100vw;
height: auto;
width /***/:auto;　/*IE8のみ適用*/
}