@charset "UTF-8";

@media screen and (min-width: 641px) {/* PC用 */

/*導入フローページ*/

	div#flowBox {
		width: 736px;
		margin: 0px auto 35px auto;
		overflow: hidden;
	}
	
	div#flowBox div {
		width: 736px;
		margin: 0px auto 35px auto;
	}
	
	div#flowBox div.beforeBox {
		width: 351px;
		margin: 0px auto;
		float: left;
		border-right: 1px dotted #303030;
		padding-right: 16px;
	}
	
	div#flowBox div.beforeBox ul {
		padding-bottom: 20px;
	}
	
	div#flowBox div.beforeBox ul li {
		background: url(../img/flow_before_q01.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 22px;
	}
	
	div#flowBox div.beforeBox ul li a {
		display: block;
		padding-left: 25px;
		color: #ff0000;
		padding-bottom: 10px;
	}
	
	div#flowBox div.beforeBox ul li a:hover {
		color: #1C4992;
	}
	
	div#flowBox div.beforeBox dl {
		margin-bottom: 10px;
	}
	
	div#flowBox div.beforeBox dl dt {
		background: url(../img/flow_before_q02.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 20px;
		background-color: #FFFCD2;
		padding: 6px 6px 6px 35px;
		color: #ff0000;
	}
	
	div#flowBox div.beforeBox dl dd {
		background: url(../img/flow_a.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 20px;
		background-color: #E8EDF4;
		padding: 6px 6px 6px 35px;
	}
	
	div#flowBox div.afterBox {
		width: 351px;
		margin: 0px auto;
		float: right;
	}
	
	div#flowBox div.afterBox ul {
		padding-bottom: 20px;
	}
	
	div#flowBox div.afterBox ul li {
		background: url(../img/flow_after_q01.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 22px;
	}
	
	div#flowBox div.afterBox ul li a {
		display: block;
		padding-left: 25px;
		color: #009145;
		padding-bottom: 10px;
	}
	
	div#flowBox div.afterBox ul li a:hover {
		color: #1C4992;
	}
	
	div#flowBox div.afterBox dl {
		margin-bottom: 10px;
	}
	
	div#flowBox div.afterBox dl dt {
		background: url(../img/flow_after_q02.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 20px;
		background-color: #FFFCD2;
		padding: 6px 6px 6px 35px;
		color: #009145;
	}
	
	div#flowBox div.afterBox dl dd {
		background: url(../img/flow_a.jpg) top left no-repeat;
		font-size: 13px;
		line-height: 20px;
		background-color: #E8EDF4;
		padding: 6px 6px 6px 35px;
	}

}

@media screen and (max-width:641px){/* スマートフォン用 */

	div#flowBox {
		width: 900px;
		margin: 0px auto 35px auto;
		overflow: hidden;
		text-align: center;
	}
	
	div#flowBox div {
		width: 736px;
		margin: 0px auto 35px auto;
	}
	
	div#flowBox div.beforeBox {
		width: 351px;
		margin: 0px auto 0px 80px;
		float: left;
		border-right: 1px dotted #303030;
		padding-right: 16px;
	}
	
	div#flowBox div.beforeBox ul {
		padding-bottom: 20px;
	}
	
	div#flowBox div.beforeBox ul li {
		font-size: 28px;
		line-height: 34px;
	}
	
	div#flowBox div.beforeBox ul li a {
		display: block;
		color: #ff0000;
		padding-bottom: 10px;
	}
	
	div#flowBox div.beforeBox ul li a:hover {
		color: #1C4992;
	}
	
	div#flowBox div.beforeBox dl {
		margin-bottom: 10px;
	}
	
	div#flowBox div.beforeBox dl dt {
		font-size: 28px;
		line-height: 34px;
		background-color: #FFFCD2;
		padding: 10px;
		color: #ff0000;
		text-align: justify;
	}
	
	div#flowBox div.beforeBox dl dd {
		font-size: 28px;
		line-height: 34px;
		background-color: #E8EDF4;
		padding: 10px;
		text-align: justify;
	}
	
	div#flowBox div.afterBox {
		width: 351px;
		margin: 0px 80px 0px auto;
		float: right;
	}
	
	div#flowBox div.afterBox ul {
		padding-bottom: 20px;
	}
	
	div#flowBox div.afterBox ul li {
		font-size: 28px;
		line-height: 34px;
	}
	
	div#flowBox div.afterBox ul li a {
		display: block;
		padding-left: 25px;
		color: #009145;
		padding-bottom: 10px;
	}
	
	div#flowBox div.afterBox ul li a:hover {
		color: #1C4992;
	}
	
	div#flowBox div.afterBox dl {
		margin-bottom: 10px;
	}
	
	div#flowBox div.afterBox dl dt {
		font-size: 28px;
		line-height: 34px;
		background-color: #FFFCD2;
		padding: 10px;
		color: #009145;
		text-align: justify;
	}
	
	div#flowBox div.afterBox dl dd {
		font-size: 28px;
		line-height: 34px;
		background-color: #E8EDF4;
		padding: 10px;
		text-align: justify;
	}


}