@charset "utf-8";
/*====================*/
/*=======レスポンシブコンテンツ用　共通=======*/
/*====================*/
/*　横並び  */
.flex-item_m {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@media screen and (max-width:760px){
#page-contents .flex-item_m ,
	#top-product .flex-item_m ,
#top-news .flex-item_m {
    flex-direction: column;
}
#page-contents .flex-cont_m ,
	#top-product .flex-item_m ,
	#top-news .flex-item_m {
	width: 100%;
	padding-bottom: 30px;
}
}

.flex-item {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@media screen and (max-width:480px){
#page-contents .flex-item ,
#top-works .flex-item {
    flex-direction: column;
}
#page-contents .flex-cont ,
	#top-works .flex-item {
	width: 100%;
	padding-bottom: 30px;
}
}





.container {
	margin-left:10px;
	margin-right:10px;
	clear:both;
	overflow:hidden;
}
.row {
	margin-left:-10px;
	margin-right:-10px;
	clear:both;
	overflow:hidden;
}
.col-l12 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:100%;
}
.col-l9 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:75%;
	box-sizing: border-box;
}
.col-l8 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:66.66666%;
	box-sizing: border-box;
}
.col-l7 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:58.33333%;
	box-sizing: border-box;
}
.col-l6 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:50%;
	box-sizing: border-box;
}
.col-l5 {
	float: left;	
	padding-left:10px;
	padding-right:10px;
	width:41.66666%;
	box-sizing: border-box;
}
.col-l4 {
	float: left;	
	padding-left:10px;
	padding-right:10px;
	width:33.33333%;
	box-sizing: border-box;
}
.col-l3 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:25%;
	box-sizing: border-box;
}
.col-l2 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:16.66666%;
	box-sizing: border-box;
}
.col-l1 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:8.33333%;
	box-sizing: border-box;
}

/***********画面の横幅が480pxまで***********/
@media screen and (max-width:480px){	
/*=======レスポンシブコンテンツ用=======*/
.col-s12 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:100%;
	box-sizing: border-box;
}
.col-s6 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:50%;
	box-sizing: border-box;
}
.col-s4 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:33.33333%;
	box-sizing: border-box;
}
}

/************480pxから1000pxまで(タブレット)************/
@media screen and (min-width:480px) and ( max-width:1000px) {
/*=======レスポンシブコンテンツ用=======*/
.col-m12 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:100%;
	box-sizing: border-box;
}
.col-m10 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:83.33333%;
	box-sizing: border-box;
}
.col-m8 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:66.66666%;
	box-sizing: border-box;
}
.col-m7 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:58.33333%;
	box-sizing: border-box;
}
.col-m6 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:50%;
	box-sizing: border-box;
}
.col-m5 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:41.66666%;
	box-sizing: border-box;
}
.col-m4 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:33.33333%;
	box-sizing: border-box;
}
.col-m2 {
	float:left;
	padding-left:10px;
	padding-right:10px;
	width:16.66666%;
	box-sizing: border-box;
}
}


/************1000(PC用画面幅)以下************/
@media screen and (max-width:1000px){
span.m-kai {
	display: block;
}
}
/************760(タブ用画面幅)以下************/
@media screen and (max-width:760px){
span.s-kai {
	display: block;
}
}