/*******************************************************/
/*                                                     */
/*　　　このレスポンシブサイトの画面設計サイズ         */
/*                                                     */
/*   1200px巾　12カラム　1カラム100px　両マージン0px   */
/*                                                     */
/*******************************************************/
/** 768px未満　スマホ　サイズ画面 **/
html { font-size:87%; }

.clu01,
.clu02,
.clu03,
.clu04,
.clu05,
.clu06,
.clu07,
.clu08,
.clu09,
.clu10,
.clu11,
.clu12 { width:100%;}

.mal00,
.mal01,
.mal02,
.mal03,
.mal04,
.mal05,
.mal06,
.mal07,
.mal08,
.mal09,
.mal10,
.mal11 { margin-left:0;}

.mar00,
.mar01,
.mar02,
.mar03,
.mar04,
.mar05,
.mar06,
.mar07,
.mar08,
.mar09,
.mar10,
.mar11 { margin-right:0;}


/** 768px以上 ipad　サイズ画面 **/
@media (min-width : 768px) {
html { font-size:95%; }

.clu01 { width: 8.3333333%;/*100 1200*/ }
.clu02 { width:16.6666666%;/*200 1200*/ }
.clu03 { width:25%;/*300 1200*/ }
.clu04 { width:33.3333333%;/*400 1200*/ }
.clu05 { width:41.6666666%;/*500 1200*/ }
.clu06 { width:50%;/*600 1200*/ }
.clu07 { width:58.3333333%;/*700 1200*/ }
.clu08 { width:66.6666666%;/*800 1200*/ }
.clu09 { width:75%;/*900 1200*/ }
.clu10 { width:83.3333333%;/*1000 1200*/ }
.clu11 { width:91.6666666%;/*1100 1200*/ }
.clu12 { width:100%;/*1200 1200*/ }

.mal00 { margin-left: 0; }
.mal01 { margin-left:8.3333%;}
.mal02 { margin-left:16.6666%;}
.mal03 { margin-left:25%;}
.mal04 { margin-left:33.3333%;}
.mal05 { margin-left:41.6666%;}
.mal06 { margin-left:50%;}
.mal07 { margin-left:58.3333%;}
.mal08 { margin-left:66.6666%;}
.mal09 { margin-left:75%;}
.mal10 { margin-left:83.3333%;}
.mal11 { margin-left:91.6666%;}


.mar00 { margin-right: 0; }
.mar01 { margin-right:8.3333%;}
.mar02 { margin-right:16.6666%;}
.mar03 { margin-right:25%;}
.mar04 { margin-right:33.3333%;}
.mar05 { margin-right:41.6666%;}
.mar06 { margin-right:50%;}
.mar07 { margin-right:58.3333%;}
.mar08 { margin-right:66.6666%;}
.mar09 { margin-right:75%;}
.mar10 { margin-right:83.3333%;}
.mar11 { margin-right:91.6666%;}}

/** 1140px以上 PC　サイズ画面 **/
@media (min-width : 1200px) { 
html { font-size:100%; } 
img { width : auto; height:auto; }

.clu01 { width: 100px; }
.clu02 { width: 200px; }
.clu03 { width: 300px; }
.clu04 { width: 400px; }
.clu05 { width: 500px; }
.clu06 { width: 600px; }
.clu07 { width: 700px; }
.clu08 { width: 800px; }
.clu09 { width: 900px; }
.clu10 { width: 1000px; }
.clu11 { width:1100px; }
.clu12 { width:1200px; }

.mal00 { margin-left:   0px;}
.mal01 { margin-left: 100px;}
.mal02 { margin-left: 200px;}
.mal03 { margin-left: 300px;}
.mal04 { margin-left: 400px;}
.mal05 { margin-left: 500px;}
.mal06 { margin-left: 600px;}
.mal07 { margin-left: 700px;}
.mal08 { margin-left: 800px;}
.mal09 { margin-left: 900px;}
.mal10 { margin-left: 1000px;}
.mal11 { margin-left: 1200px;}

.mar00 { margin-right:   0px;}
.mar01 { margin-right: 100px;}
.mar02 { margin-right: 200px;}
.mar03 { margin-right: 300px;}
.mar04 { margin-right: 400px;}
.mar05 { margin-right: 500px;}
.mar06 { margin-right: 600px;}
.mar07 { margin-right: 700px;}
.mar08 { margin-right: 800px;}
.mar09 { margin-right: 900px;}
.mar10 { margin-right: 1000px;}
.mar11 { margin-right: 1200px;}

}