@charset "UTF-8";

/* ================================
	大まかなレイアウト
================================ */
/* ----------------------
	横幅指定とセンタリング
---------------------- */
.container{
	width:100%;
	position: relative;
}
.container > .inner {
	width:990px;
	margin: 0 auto;
	padding:0;
	position: relative;
}
.container.is-full > .inner {
    width: 100%;
}
.page{
	overflow: hidden;
	min-width: 990px;
}

/* ----------------------
	配色とマージン
---------------------- */
body{
    background: url(../images/back.png) no-repeat center top;
}

.page{
    padding-top: 6px;
    background: url(../images/backPtn.png) repeat-x 0 0;
}

.globalHeader{
}
.globalHeader .inner{
}

.globalFooter{
}
.globalFooter .inner{
}

.contents{
}
.contents .inner{
    padding-bottom: 60px;
}

.contents{
}

.contents .inner{
    padding-bottom: 15px;
}


/* ================================
	グリッド
================================ */
/* clearfix */
.row:after,
.col:after {
    content: "";
    display: block;
    clear: both;
}

/* row */
.row {
    padding-bottom: 0;
    position: relative;
}
.row.gutters{
    margin-left: -1%;
    margin-right: -1%;
}

/* col */
.col {
    display: block;
    width: 100%;
    float: left;
    
    /* debug */
    height: 200px;
    background: #ccc;
}
.gutters .col {
    margin: 0 1% 1%;
}

/* option */
.flR {    float: right;}


/*　SP カラム　*/
.sp-gr1 { width: 8.33333333333%; }
.sp-gr2 { width: 16.6666666667%; }
.sp-gr3 { width: 25%; }
.sp-gr4 { width: 33.3333333333%; }
.sp-gr5 { width: 41.6666666667%; }
.sp-gr6 { width: 50%; }
.sp-gr7 { width: 58.3333333333%; }
.sp-gr8 { width: 66.6666666667%; }
.sp-gr9 { width: 75%; }
.sp-gr10 { width: 83.3333333333%; }
.sp-gr11 { width: 91.6666666667%; }
.sp-gr12 { width: 100%; } 
.gutters .sp-gr1 { width: 6.33333333333%;}
.gutters .sp-gr2 { width: 14.6666666667%;}
.gutters .sp-gr3 { width: 23%;}
.gutters .sp-gr4 { width: 31.3333333333%;}
.gutters .sp-gr5 { width: 39.6666666667%;}
.gutters .sp-gr6 { width: 48%;}
.gutters .sp-gr7 { width: 56.3333333333%;}
.gutters .sp-gr8 { width: 64.6666666667%;}
.gutters .sp-gr9 { width: 73%;}
.gutters .sp-gr10 { width: 81.3333333333%;}
.gutters .sp-gr11 { width: 89.6666666667%;}
.gutters .sp-gr12 { width: 98%;}


/*　タブレット カラム　*/
@media ( min-width : 481px ) {
    .md-gr1 { width: 8.33333333333%; }
    .md-gr2 { width: 16.6666666667%; }
    .md-gr3 { width: 25%; }
    .md-gr4 { width: 33.3333333333%; }
    .md-gr5 { width: 41.6666666667%; }
    .md-gr6 { width: 50%; }
    .md-gr7 { width: 58.3333333333%; }
    .md-gr8 { width: 66.6666666667%; }
    .md-gr9 { width: 75%; }
    .md-gr10 { width: 83.3333333333%; }
    .md-gr11 { width: 91.6666666667%; }
    .md-gr12 { width: 100%; }     
    .gutters .md-gr1 { width: 6.33333333333%;}
    .gutters .md-gr2 { width: 14.6666666667%;}
    .gutters .md-gr3 { width: 23%;}
    .gutters .md-gr4 { width: 31.3333333333%;}
    .gutters .md-gr5 { width: 39.6666666667%;}
    .gutters .md-gr6 { width: 48%;}
    .gutters .md-gr7 { width: 56.3333333333%;}
    .gutters .md-gr8 { width: 64.6666666667%;}
    .gutters .md-gr9 { width: 73%;}
    .gutters .md-gr10 { width: 81.3333333333%;}
    .gutters .md-gr11 { width: 89.6666666667%;}
    .gutters .md-gr12 { width: 98%;}
}
 
 
/*　PC カラム　*/
@media ( min-width : 768px ) {
    .lg-gr1 { width: 8.33333333333%; }
    .lg-gr2 { width: 16.6666666667%; }
    .lg-gr3 { width: 25%; }
    .lg-gr4 { width: 33.3333333333%; }
    .lg-gr5 { width: 41.6666666667%; }
    .lg-gr6 { width: 50%; }
    .lg-gr7 { width: 58.3333333333%; }
    .lg-gr8 { width: 66.6666666667%; }
    .lg-gr9 { width: 75%; }
    .lg-gr10 { width: 83.3333333333%; }
    .lg-gr11 { width: 91.6666666667%; }
    .lg-gr12 { width: 100%; }
    .gutters .lg-gr1 { width: 6.33333333333%;}
    .gutters .lg-gr2 { width: 14.6666666667%;}
    .gutters .lg-gr3 { width: 23%;}
    .gutters .lg-gr4 { width: 31.3333333333%;}
    .gutters .lg-gr5 { width: 39.6666666667%;}
    .gutters .lg-gr6 { width: 48%;}
    .gutters .lg-gr7 { width: 56.3333333333%;}
    .gutters .lg-gr8 { width: 64.6666666667%;}
    .gutters .lg-gr9 { width: 73%;}
    .gutters .lg-gr10 { width: 81.3333333333%;}
    .gutters .lg-gr11 { width: 89.6666666667%;}
    .gutters .lg-gr12 { width: 98%;}
}