/*******************************************************/
/*                                                     */
/*　　　このレスポンシブサイトの画面設計サイズ         */
/*                                                     */
/*    960px巾　12カラム　1カラム60px　両マージン10px   */
/*                                                     */
/*******************************************************/
/** 768px未満　スマホ　サイズ画面 **/
html { font-size:75%; }
body { margin-top:-7em; padding-top:7em; }
img { 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 print, screen and (min-width : 768px) {
html { font-size:80%; }
body { margin-top:0; padding-top:0; }


.clu01 { width: 6.2500%; margin:0 1.0416%; }
.clu02 { width:14.5833%; margin:0 1.0416%; }
.clu03 { width:22.9166%; margin:0 1.0416%; }
.clu04 { width:31.2500%; margin:0 1.0416%; }
.clu05 { width:39.5833%; margin:0 1.0416%; }
.clu06 { width:47.9166%; margin:0 1.0416%; }
.clu07 { width:56.2500%; margin:0 1.0416%; }
.clu08 { width:64.5833%; margin:0 1.0416%; }
.clu09 { width:72.9166%; margin:0 1.0416%; }
.clu10 { width:81.2500%; margin:0 1.0416%; }
.clu11 { width:89.5833%; margin:0 1.0416%; }
.clu12 { width:97.9166%; margin:0 1.0416%; }

.mal00 { margin-left: 0; }
.mal01 { margin-left: 9.3750%;}
.mal02 { margin-left:17.7083%;}
.mal03 { margin-left:26.0416%;}
.mal04 { margin-left:34.3750%;}
.mal05 { margin-left:42.7083%;}
.mal06 { margin-left:51.0416%;}
.mal07 { margin-left:59.3750%;}
.mal08 { margin-left:67.7083%;}
.mal09 { margin-left:76.0416%;}
.mal10 { margin-left:84.3750%;}
.mal11 { margin-left:92.7083%;}

.mar00 { margin-right: 0; }
.mar01 { margin-right: 9.3750%;}
.mar02 { margin-right:17.7083%;}
.mar03 { margin-right:26.0416%;}
.mar04 { margin-right:34.3750%;}
.mar05 { margin-right:42.7083%;}
.mar06 { margin-right:51.0416%;}
.mar07 { margin-right:59.3750%;}
.mar08 { margin-right:67.7083%;}
.mar09 { margin-right:76.0416%;}
.mar10 { margin-right:84.3750%;}
.mar11 { margin-right:92.7083%;}

}

/** 960px以上 PC　サイズ画面 **/
@media print, screen and (min-width : 960px) { 
html { font-size:90%; } 
img { width : auto; height:auto; }

.clu01 { width:  80px; margin:0 10px; }
.clu02 { width: 180px; margin:0 10px; }
.clu03 { width: 280px; margin:0 10px; }
.clu04 { width: 380px; margin:0 10px; }
.clu05 { width: 480px; margin:0 10px; }
.clu06 { width: 580px; margin:0 10px; }
.clu07 { width: 680px; margin:0 10px; }
.clu08 { width: 780px; margin:0 10px; }
.clu09 { width: 880px; margin:0 10px; }
.clu10 { width: 980px; margin:0 10px; }
.clu11 { width: 1080px; margin:0 10px; }
.clu12 { width: 1180px; margin:0 10px; }

.mal00 { margin-left:   0px;}
.mal01 { margin-left:  90px;}
.mal02 { margin-left: 170px;}
.mal03 { margin-left: 250px;}
.mal04 { margin-left: 330px;}
.mal05 { margin-left: 410px;}
.mal06 { margin-left: 490px;}
.mal07 { margin-left: 570px;}
.mal08 { margin-left: 650px;}
.mal09 { margin-left: 730px;}
.mal10 { margin-left: 810px;}
.mal11 { margin-left: 890px;}

.mar00 { margin-right:   0px;}
.mar01 { margin-right:  90px;}
.mar02 { margin-right: 170px;}
.mar03 { margin-right: 250px;}
.mar04 { margin-right: 330px;}
.mar05 { margin-right: 410px;}
.mar06 { margin-right: 490px;}
.mar07 { margin-right: 570px;}
.mar08 { margin-right: 650px;}
.mar09 { margin-right: 730px;}
.mar10 { margin-right: 810px;}
.mar11 { margin-right: 890px;}

}