@charset "UTF-8";
/* CSS Document */



/*
カラム
========================*/
.col {
	display:flex;
	flex-wrap: wrap;
}
.col.justifyCenter {
	justify-content: center;
}

.col2 > * {
	width:50%;
}
.col3 > * {
	width:33.3%;
}
.col4 > * {
	width:25%;
}

@media(min-width:813px) {
	.pc_col2 > * {
	width:50%;
	}
	.pc_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.pc_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.pc_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.pc_col3 > * {
	width:33.3%;
	}
	.pc_col3.separate > * {
		width:30%;
		margin:3.5% 5%;
	}
	/*
	.pc_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	*/
	.pc_col3.separate > *:nth-of-type(n+4) {
		/* margin-top:45px; */
	}
	.pc_col4 > * {
		width:25%;
	}
	.pc_col4.separate > * {
		width:23%;
		margin-right:2.6%;
	}
	.pc_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.pc_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.pc_col5 > * {
		width:20%;
	}
	.pc_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.pc_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.pc_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}
@media(min-width:415px) and (max-width:812px) {
	.tb_col1 > * {
	width:100%;
	}
	.tb_col1.separate > *:nth-of-type(n+2) {margin-top:20px;}
	.tb_col2 > * {
	width:50%;
	}
	.tb_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.tb_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.tb_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.tb_col3 > * {
	width:33.3%;
	}
	.tb_col3.separate > * {
		width:31%;
		margin-right:3.5%;
	}
	.tb_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	.tb_col3.separate > *:nth-of-type(n+4) {margin-top:20px;}
	.tb_col4 > * {
		width:25%;
	}
	.tb_col4.separate > * {
		width:24%;
		margin-right:1.3%;
	}
	.tb_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.tb_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.tb_col5 > * {
		width:20%;
	}
	.tb_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.tb_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.tb_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}
@media(max-width:414px) {
	.sp_col1 > * {
	width:100%;
	}
	.sp_col1.separate > *:nth-of-type(n+2) {margin-top:20px;}
	.sp_col2 > * {
	width:50%;
	}
	.sp_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.sp_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.sp_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.sp_col3 > * {
	width:33.3%;
	}
	.sp_col3.separate > * {
		width:31%;
		margin-right:3.5%;
	}
	.sp_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	.sp_col3.separate > *:nth-of-type(n+4) {margin-top:20px;}
	.sp_col4 > * {
		width:25%;
	}
	.sp_col4.separate > * {
		width:24%;
		margin-right:1.3%;
	}
	.sp_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.sp_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.sp_col5 > * {
		width:20%;
	}
	.sp_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.sp_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.sp_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}

/*========================
アニメーション

・css easing
easeOutQuart
cubic-bezier(0.165, 0.84, 0.44, 1);

easeInOutQuart
cubic-bezier(0.77, 0, 0.175, 1);
========================*/

/*スライドイン 左から右*/
.slideRight {
	-webkit-transform:translateX(-30px);
	transform:translateX(-30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideRight.on {
	-webkit-transform:translateX(0px);
	transform:translateX(0px);
	opacity:1;
	}

/*スライドイン 右から左*/
.slideLeft {
	-webkit-transform:translateX(30px);
	transform:translateX(30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideLeft.on {
	-webkit-transform:translateX(0px);
	transform:translateX(0px);
	opacity:1;
	}
	
/*スライドイン 上から下*/
.slideDown {
	-webkit-transform:translateY(-30px);
	transform:translateY(-30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideDown.on {
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
	opacity:1;
	}
	
/*スライドイン 下から上*/
.slideUp {
	-webkit-transform:translateY(30px);
	transform:translateY(30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideUp.on {
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
	opacity:1;
	}

/*フェードイン*/
.fadeIn {opacity:0;-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.fadeIn.on {opacity:1;}

/*フェードアウト*/
.fadeOut {opacity:1;-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.fadeOut.on {opacity:0;}

/*スライド 幅*/
.slideWidth {
	width:0;
	overflow: hidden;
	-webkit-transition:width 1s cubic-bezier(0.77, 0, 0.175, 1);
	transition:width 1s cubic-bezier(0.77, 0, 0.175, 1);
	}
.slideWidth.on {
	width:100%;
	}