@charset "shift_jis";
/* CSS Document */

.color_r
{	color:#ff4c00;
}
.color_b
{	color:#ff8c00;
}
.bgc_r
{	background: #ffeee8;
}
.bgc_b
{	background: #fff4e8;
}

.flow_list
{	width:1000px;
	margin:0px auto;
}

.flow_list h4
{	font-size: 26px;
	font-weight: bold;
	line-height: 30px;
	margin-top:30px;
	margin-bottom: 10px;
}
.flow_list h4.cr
{	color:#ff4c00;
	border-bottom: 3px solid #ff4c00;
}
.flow_list h4.cb
{	color:#ff8c00;
	border-bottom: 3px solid #ff8c00;
}
.flow_list h4 span
{	float: right;
	font-size:14px;
	font-weight: 400;

}

.flow_list ul
{	display: flex;
	margin:0px auto;
	flex-wrap: wrap;
	justify-content: space-between;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: space-between;
}
.flow_list ul::after
{	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.flow_list ul.matto
{	margin-bottom:0px;

}
.flow_list ul.matto::after
{	width:23.5%;
}
.flow_list ul.sukebe::after
{	width:0px;
}
/*
1つ終わり [3つ残り] (4+(3*94/4)
	width:74.5%;
2つ終わり [2つ残り] (2+(2*94/4)
	width:49%;
3つ終わり [1つ残り] (94/4)
	width:23.5%;
4つ終わり [ぴったり]
	width:0px;
*/

.flow_list ul li
{	min-height: 300px;
	border:1px solid #ccc;
	padding:5px;
	width: calc(94% / 4);
	margin:0px 2% 24px 0px;
}
.flow_list ul li:nth-child(4n)
{	margin:0px 0px 24px 0px;
}

.flow_list ul li h5
{	margin: 5px 0;
	line-height: 20px;
	text-align:center;
	display:block;
	font-size:16px;
	font-weight:600;

}
.flow_list ul li span
{	display: block;
	font-size:12px;
	font-weight:400;

}
.flow_list ul li .img_wrap
{	padding-top: 0px;
	border-top:0px;
}
.flow_list ul li .img_wrap img
{	width:100%;
	max-width:100%;
	margin:0px auto;
}
.flow_list ul li p
{	display:block;
	color: #282828;
	margin: 0px 3px;
	font-size:12px;
	line-height: 19px;
}



.flow_list .opener
{	display:none;
	position:absolute;
	right:4%;
	margin:6px 9px 9px auto;
	width:32px;
	height:32px;
	line-height:32px;
	text-align:right;
}
.flow_list .opener a
{
	display:block;
	width:100%;
	height:100%;
	text-decoration: none;
	background:#999999;
	text-align:center;
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	box-shadow:0px 5px 8px 0px #BBBBBB ;
}
.flow_list .opener a:hover
{
	background:#CCCCCC;
	color:#FFFFFF;
	margin-left:0px;
	margin-top:5px;
	box-shadow:none;
}


@media screen and (max-width: 999px)
{
	.flow_list
	{	width:97%;
	}

	.flow_list ul
	{	width:100%;
	}
	.flow_list ul.matto::after
	{
		width:66%;
	}
	.flow_list ul.sukebe::after
	{
		width:66%;
	}
/*
	1つ終わり [2つ残り] (2+(2*96/3)
		width:66%;
	2つ終わり [1つ残り] (2+(96/3)
		width:34%;
	3つ終わり [ぴったり]
		width:0px;
*/

	.flow_list ul li
	{	width: calc(96% / 3);
		margin:0px 2% 20px 0px;

	}
	.flow_list ul li:nth-child(4n)
	{	margin:0px 2% 20px 0px;
	}
	.flow_list ul li:nth-child(3n)
	{	margin:0px 0px 20px 0px;
	}
}




/**/
@media screen and (max-width: 768px)
{
	.flow_list
	{	width:98%;
	}

	.flow_list ul.matto::after
	{
		width:50%;
	}
	.flow_list ul.sukebe::after
	{
		width:0px;
	}
/*
	1つ終わり [1つ残り] (1+(98/2)
		width:50%;
	2つ終わり [ぴったり]
		width:0px;
*/

	.flow_list ul li
	{	width: calc(98% / 2);
		margin:0px 1% 16px 0px;

	}
	.flow_list ul li:nth-child(4n)
	{	margin:0px 0px 16px 0px;
	}
	.flow_list ul li:nth-child(3n)
	{	margin:0px 1% 16px 0px;
	}
	.flow_list ul li:nth-child(2n)
	{	margin:0px 0px 16px 0px;
	}

	.flow_list ul li .reference
	{	display:block;

	}

}


@media screen and (max-width: 600px){
// 1行1項目で表示
	.flow_list
	{	width:96%;

	}
	.flow_list h4 span
	{	float: right;
		font-size:10px;
		font-weight: 400;

	}

	.flow_list ul.matto::after
	{	width:0px;
	}
	.flow_list ul.sukebe::after
	{	width:0px;
	}
	.flow_list ul li{
		width: 98%;
		min-height:40px;
		margin:0px 0px 10px 0px;

	}
	.flow_list ul li:nth-child(2n){
		margin:0px 0px 10px 0px;
	}
	.flow_list ul li:nth-child(3n){
		margin:0px 0px 10px 0px;
	}
	.flow_list ul li:nth-child(4n){
		margin:0px 0px 10px 0px;
	}

	.flow_list .opener
	{	display:block;
	}

	.flow_list ul li .title h5{
		display:inline-block;
	}
	.flow_list ul li .title h5 span{
		display:inline-block;
	}

	.flow_list ul li .reference
	{	display:none;

	}

	.flow_list ul li .img_wrap
	{	padding-top :5px;
		border-top:1px dashed #999999;
	}

	.flow_list ul li .img_wrap img
	{	width:auto;
		max-width:300px;
	}

}

@media screen and (max-width: 360px)
{
	.flow_list ul li .img_wrap img
	{	width:100%;
	}
}