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

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

.clu01 { width: 8.3333%;/*115 1380*/ }
.clu02 { width:16.6666%;/*230 1380*/ }
.clu03 { width:25%;/*345 1380*/ }
.clu04 { width:33.3333%;/*460 1380*/ }
.clu05 { width:41.6666%;/*575 1380*/ }
.clu06 { width:50%;/*690 1380*/ }
.clu07 { width:58.3333%;/*805 1380*/ }
.clu08 { width:66.6666%;/*920 1380*/ }
.clu09 { width:75%;/*1035 1380*/ }
.clu10 { width:83.3333%;/*1150 1380*/ }
.clu11 { width:91.6666%;/*1265 1380*/ }
.clu12 { width:100%;/*1380 1380*/ }

.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 : 1380px) { 
html { font-size:110%; } 
img { width : auto; height:auto; }

.clu01 { width: 115px; }
.clu02 { width: 230px; }
.clu03 { width: 345px; }
.clu04 { width: 460px; }
.clu05 { width: 575px; }
.clu06 { width: 690px; }
.clu07 { width: 805px; }
.clu08 { width: 920px; }
.clu09 { width: 1035px; }
.clu10 { width: 1150px; }
.clu11 { width:1265px; }
.clu12 { width:1380px; }

.mal00 { margin-left:   0px;}
.mal01 { margin-left: 115px;}
.mal02 { margin-left: 230px;}
.mal03 { margin-left: 345px;}
.mal04 { margin-left: 460px;}
.mal05 { margin-left: 575px;}
.mal06 { margin-left: 690px;}
.mal07 { margin-left: 805px;}
.mal08 { margin-left: 920px;}
.mal09 { margin-left: 1035px;}
.mal10 { margin-left: 1150px;}
.mal11 { margin-left: 1265px;}

.mar00 { margin-right:   0px;}
.mar01 { margin-right: 115px;}
.mar02 { margin-right: 230px;}
.mar03 { margin-right: 345px;}
.mar04 { margin-right: 460px;}
.mar05 { margin-right: 575px;}
.mar06 { margin-right: 690px;}
.mar07 { margin-right: 805px;}
.mar08 { margin-right: 920px;}
.mar09 { margin-right: 1035px;}
.mar10 { margin-right: 1150px;}
.mar11 { margin-right: 1265px;}

}