@charset "UTF-8"; /*! */ /* ========================================================= * 12グリッドシステム * @ 12 GRID SYSTEM * ====================================================== */ /* グリッド外枠 */ .grid_contents { clear: both; padding: 0px; margin: 0px; } .groupSet:before, .groupSet:after { content:""; display:table; } .groupSet:after { clear:both;} .groupSet { zoom:1; /* For IE 6/7 */ } /* グリッドカラム共通 */ .grid_contents .grid_cols { padding: 0 .8%; } .grid_contents.groupSet .grid_cols { display: block; float:left; padding: 0 .8%; } .grid_contents.groupSetFix .grid_cols { display: block; float:left; padding: 0 .8%; } .grid_contents .grid_cols.nopadding { padding: 0; } .grid_contents .grid_cols-nomargin span { display: block; background-color: #fff; } /* グリッドの大きさ */ .grid_contents .grid_cols.grid-12 { float: none; width: 100%; } .grid_contents .grid_cols.grid-11 { width: 91.6667%; } .grid_contents .grid_cols.grid-10 { width: 83.3334%; } .grid_contents .grid_cols.grid-9 { width: 75%; } .grid_contents .grid_cols.grid-8 { width: 66.6667%; } .grid_contents .grid_cols.grid-7 { width: 58.3329%; } .grid_contents .grid_cols.grid-6 { width: 50%; } .grid_contents .grid_cols.grid-5 { width: 41.6671%; } .grid_contents .grid_cols.grid-4 { width: 33.3333%; } .grid_contents .grid_cols.grid-3 { width: 25%; } .grid_contents .grid_cols.grid-2 { width: 16.6666%; } .grid_contents .grid_cols.grid-1 { width: 8.3333%; } /* タブレット */ @media only screen and (max-width: 768px) { .grid_contents .grid_cols.grid-12-tablet { float: none; width: 100%; } .grid_contents .grid_cols.grid-11-tablet { width: 91.6667%; } .grid_contents .grid_cols.grid-10-tablet { width: 83.3334%; } .grid_contents .grid_cols.grid-9-tablet { width: 75%; } .grid_contents .grid_cols.grid-8-tablet { width: 66.6667%; } .grid_contents .grid_cols.grid-7-tablet { width: 58.3329%; } .grid_contents .grid_cols.grid-6-tablet { width: 50%; } .grid_contents .grid_cols.grid-5-tablet { width: 41.6671%; } .grid_contents .grid_cols.grid-4-tablet { width: 33.3333%; } .grid_contents .grid_cols.grid-3-tablet { width: 25%; } .grid_contents .grid_cols.grid-2-tablet { width: 16.6666%; } .grid_contents .grid_cols.grid-1-tablet { width: 8.3333%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 480px) { .grid_contents { margin: 0%; } .grid_contents .grid_cols.grid-12, .grid_contents .grid_cols.grid-11, .grid_contents .grid_cols.grid-10, .grid_contents .grid_cols.grid-9, .grid_contents .grid_cols.grid-8, .grid_contents .grid_cols.grid-7, .grid_contents .grid_cols.grid-6, .grid_contents .grid_cols.grid-5, .grid_contents .grid_cols.grid-4, .grid_contents .grid_cols.grid-3, .grid_contents .grid_cols.grid-2, .grid_contents .grid_cols.grid-1 { width: 100%; } } /* ---------------------------------------- グリッドのサンプル ---------------------------------------- */ /*