@charset "UTF-8";

/* ================================
	レスポンシブ
================================ */
/* ----------------------
	横幅指定とセンタリング
---------------------- */
.container{
	width:100%;
	position: relative;
}
.container  > .inner {
	width: 100%;
	max-width:1100px;
	margin: 0 auto;
	padding: 4% 3%;
}
.page{
	overflow: hidden;
}
@media ( min-width : 768px ) {
    .container  > .inner{
        padding: 3% 3%;
    }
}
/* ----------------------
	配色とマージン
---------------------- */
body{
}

.page{
}

.globalHeader{
}
.globalHeader .inner{
    position: relative;
    padding: 0 3%;
    max-width: 100%;
}

.globalFooter{
}
.globalFooter .inner{
}

.content{
}
.content .inner{
}

/* ================================
	グリッド
================================ */
.row:after,
.col:after {
    content: "";
    display: table;
    clear: both;
}
.row,
.col{
    *zoom: 1;
}
.row { padding-bottom: 0;}

/* カラム */
.col {
    display: block;
    width: 100%;
    float: left;
}
.row.gutters .col:first-child,
.row.gutters .col.fC{
    margin-left: 0;
}

.flR{
    float: right;
    margin-left: 2%;
}

/*　SP用カラム幅の調整　*/
@media ( max-width : 767px ) {
    .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.5%; margin-left: 2%;}
    .gutters .sp_gr2 { width: 15.0%; margin-left: 2%;}
    .gutters .sp_gr3 { width: 23.5%; margin-left: 2%;}
    .gutters .sp_gr4 { width: 32.0%; margin-left: 2%;}
    .gutters .sp_gr5 { width: 40.5%; margin-left: 2%;}
    .gutters .sp_gr6 { width: 49.0%; margin-left: 2%;}
    .gutters .sp_gr7 { width: 57.5%; margin-left: 2%;}
    .gutters .sp_gr8 { width: 66.0%; margin-left: 2%;}
    .gutters .sp_gr9 { width: 74.5%; margin-left: 2%;}
    .gutters .sp_gr10 { width: 83.0%; margin-left: 2%;}
    .gutters .sp_gr11 { width: 91.5%; margin-left: 2%;}
    .gutters .sp_gr12 { width: 100%; }
}
 
/*　PC用カラム幅の調整　*/
@media ( min-width : 768px ) {
    .xl_gr1 { width: 8.33333333333%; }
    .xl_gr2 { width: 16.6666666667%; }
    .xl_gr3 { width: 25%; }
    .xl_gr4 { width: 33.3333333333%; }
    .xl_gr5 { width: 41.6666666667%; }
    .xl_gr6 { width: 50%; }
    .xl_gr7 { width: 58.3333333333%; }
    .xl_gr8 { width: 66.6666666667%; }
    .xl_gr9 { width: 75%; }
    .xl_gr10 { width: 83.3333333333%; }
    .xl_gr11 { width: 91.6666666667%; }
    .xl_gr12 { width: 100%; }
     
    .gutters .xl_gr1 { width: 6.5%; margin-left: 2%;}
    .gutters .xl_gr2 { width: 15.0%; margin-left: 2%;}
    .gutters .xl_gr3 { width: 23.5%; margin-left: 2%;}
    .gutters .xl_gr4 { width: 32.0%; margin-left: 2%;}
    .gutters .xl_gr5 { width: 40.5%; margin-left: 2%;}
    .gutters .xl_gr6 { width: 49.0%; margin-left: 2%;}
    .gutters .xl_gr7 { width: 57.5%; margin-left: 2%;}
    .gutters .xl_gr8 { width: 66.0%; margin-left: 2%;}
    .gutters .xl_gr9 { width: 74.5%; margin-left: 2%;}
    .gutters .xl_gr10 { width: 83.0%; margin-left: 2%;}
    .gutters .xl_gr11 { width: 91.5%; margin-left: 2%;}
    .gutters .xl_gr12 { width: 100%; }
}