@charset "UTF-8";

/*
	flex.css
	Author: STUDIO P
*/

/* --- flex(float) --- */
.flex:before,
.flex:after,
.group:before,
.group:after {
	content: " ";
	display: table;
}

.flex:after,
.group:after { clear: both; }

.flex,
.group { *zoom: 1; }

.flex {
	margin-bottom: 50px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.flex .box { float: left; }

.flex.col2 .box {
	width: 48.25%;
	margin-right: 3.5%;
	margin-bottom: 25px;
}

.flex.col3 .box {
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 25px;
}
.flex.col3 .box.x2 { width: 65.5%; }
.flex.col3 .box.x3 { width: 100%; }

.flex.col4 .box {
	width: 23.5%;
	margin-right: 2%;
	margin-bottom: 15px;
}
.flex.col4 .box.x2 { width: 49%; }
.flex.col4 .box.x3 { width: 74.5%; }
.flex.col4 .box.x4 { width: 100%; }

.flex.col5 .box {
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 15px;
}

.flex .box.last,
.flex .box:last-child { margin-right: 0; }

.flex.col2 .group,
.flex.col3 .group { margin-bottom: 25px; }
.flex.col4 .group,
.flex.col5 .group { margin-bottom: 15px; }
.flex .group .box { margin-bottom: 0; }

.flex .inner { padding: 10px; }
.flex .innerM { padding: 15px; }
.flex .innerL { padding: 20px; }


/* tablet */
@media screen and (max-width: 979px) {}


/* smartphone */
@media screen and (max-width: 699px) {}


/* small smartphone */
@media screen and (max-width: 479px) {
	
	div.flex.col2 .box {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	div.flex.col3 .box { width: 100%; }
	div.flex.col3 .box.x2 {
		float: none;
		clear: both;
		width: 100%;
		margin-right: 0;
	}
	div.flex.col3 .box:nth-child(2n) { margin-right: 0; }
	
	div.flex.col4.sp-mode .box { width: 49%; }
	div.flex.col4.sp-mode .box:nth-child(2n) { margin-right: 0; }
	div.flex.col4.sp-mode .box.x3 { 
		width: 100%;
		margin-right: 0;
	}
	div.flex.col4.sp-mode .sp-cl { clear: both; }
	
	.flex.col2 .group .box,
	.flex.col3 .group .box { margin-bottom: 25px; }
	.flex.col4 .group .box,
	.flex.col5 .group .box { margin-bottom: 15px; }
	.group { margin-bottom: 0; }
	
}