/*******************************************************/
/*                                                     */
/*　　　このレスポンシブサイトの画面設計サイズ         */
/*                                                     */
/*   1140px巾　12カラム　1カラム55px　両マージン20px   */
/*                                                     */
/*******************************************************/
/** 768px未満　スマホ　サイズ画面 **/
html { font-size:80%; }
img { width : auto; max-width: 100%; height:auto; } 

.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:80%; }

.clu01 { width: 4.8245%; margin:0 1.7543%; }
.clu02 { width:13.1578%; margin:0 1.7543%; }
.clu03 { width:21.4912%; margin:0 1.7543%; }
.clu04 { width:29.8245%; margin:0 1.7543%; }
.clu05 { width:38.1578%; margin:0 1.7543%; }
.clu06 { width:46.4912%; margin:0 1.7543%; }
.clu07 { width:54.8245%; margin:0 1.7543%; }
.clu08 { width:63.1578%; margin:0 1.7543%; }
.clu09 { width:71.4912%; margin:0 1.7543%; }
.clu10 { width:79.8245%; margin:0 1.7543%; }
.clu11 { width:88.1578%; margin:0 1.7543%; }
.clu12 { width:96.4912%; margin:0 1.7543%; }


.mal00 { margin-left: 0; }
.mal01 { margin-left:10.0877%;}
.mal02 { margin-left:18.4210%;}
.mal03 { margin-left:26.7543%;}
.mal04 { margin-left:35.0877%;}
.mal05 { margin-left:43.4210%;}
.mal06 { margin-left:51.7543%;}
.mal07 { margin-left:60.0877%;}
.mal08 { margin-left:68.4210%;}
.mal09 { margin-left:76.7543%;}
.mal10 { margin-left:85.0877%;}
.mal11 { margin-left:93.4210%;}

.mar00 { margin-right: 0; }
.mar01 { margin-right:10.0877%;}
.mar02 { margin-right:18.4210%;}
.mar03 { margin-right:26.7543%;}
.mar04 { margin-right:35.0877%;}
.mar05 { margin-right:43.4210%;}
.mar06 { margin-right:51.7543%;}
.mar07 { margin-right:60.0877%;}
.mar08 { margin-right:68.4210%;}
.mar09 { margin-right:76.7543%;}
.mar10 { margin-right:85.0877%;}
.mar11 { margin-right:93.4210%;}

}

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

.clu01 { width:  55px; margin:0 20px; }
.clu02 { width: 150px; margin:0 20px; }
.clu03 { width: 245px; margin:0 20px; }
.clu04 { width: 340px; margin:0 20px; }
.clu05 { width: 435px; margin:0 20px; }
.clu06 { width: 530px; margin:0 20px; }
.clu07 { width: 625px; margin:0 20px; }
.clu08 { width: 720px; margin:0 20px; }
.clu09 { width: 815px; margin:0 20px; }
.clu10 { width: 910px; margin:0 20px; }
.clu11 { width:1005px; margin:0 20px; }
.clu12 { width:1100px; margin:0 20px; }

.mal00 { margin-left:   0px;}
.mal01 { margin-left: 115px;}
.mal02 { margin-left: 210px;}
.mal03 { margin-left: 305px;}
.mal04 { margin-left: 400px;}
.mal05 { margin-left: 495px;}
.mal06 { margin-left: 590px;}
.mal07 { margin-left: 685px;}
.mal08 { margin-left: 780px;}
.mal09 { margin-left: 875px;}
.mal10 { margin-left: 970px;}
.mal11 { margin-left:1065px;}

.mar00 { margin-right:   0px;}
.mar01 { margin-right: 115px;}
.mar02 { margin-right: 210px;}
.mar03 { margin-right: 305px;}
.mar04 { margin-right: 400px;}
.mar05 { margin-right: 495px;}
.mar06 { margin-right: 590px;}
.mar07 { margin-right: 685px;}
.mar08 { margin-right: 780px;}
.mar09 { margin-right: 875px;}
.mar10 { margin-right: 970px;}
.mar11 { margin-right:1065px;}

}