/*すべてのboxサイズを BORDER-BOX に設定*/
* {
    -webkit-box-sizing: border-box;/*要素全体の横幅がwidthと等しく*/
    -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 */
}

/*メインCONTAINERの設定*/
.container {
    margin: 0 auto;
}

/*フロートクリア*/
.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: 0; }

/* 基本コラム設定 */
.col {
    display: block;
    float: left;
    width: 100%;
}

.col_ {
    display: block;
    float: center;
    width: 33%;
}

@media ( min-width : 769px ) {
    
    .row.gutters {
        margin-left: -1%;
        margin-right: -1%;
    }
    
    .gutters .col {
        padding-left: 1%;
        padding-right: 1%;
    }
    /*
    .gutters .col:first-child {
        margin-left: 0;
    }*/
}

/*    COLUMN WIDTH ON DISPLAYS +768px
    You might need to play with media queries here to suite your design. */
@media ( min-width : 769px ) {
    .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: 31.333333%; }
    .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%; }
    */
}


@media ( max-width : 768px ) {
    .span_12 { width: 100%; 
	    margin: 1%;
}
}




/* 基本コラム設定 レスポンシブ変更なし */
.col_ {
    display: block;
    float: left;
    width: 100%;
}


    
    .row_　.gutters_ {
        margin-left: -1%;
        margin-right: -1%;
    }
    
    .gutters_ .col_ {
        padding-left: 1%;
        padding-right: 1%;
    }

    .span_1_ { width: 4.16666666667%; }
    .span_2_ { width: 8.33333333333%; }
    .span_3_ { width:12.5%; }
    .span_4_ { width: 16.6666666667%; }
    .span_5_ { width: 20%; }
    .span_6_ { width: 25%; }
    .span_7_ { width: 29.1666666667%; }
    .span_8_ { width: 31.333333%;
	margin: 1%;
}
    .span_9_ { width: 37.5%; }
    .span_10_ { width: 41.6666666667%; }
    .span_11_ { width: 45.8333333333%; }
    .span_12_ { width: 49%;
     margin: 1% 0.5%}

    .span_13_ { width: 54.1666666667%; }
    .span_14_ { width: 58.3333333333%; }
    .span_15_ { width: 62.5%; }
    .span_16_ { width: 64.6666666667%; 
	margin: 0 1%;
}

    .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: 99%; 
     margin: 1% 0.5%}


    .span_50 { width: 22%; 
	margin: 1%;
}