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


#business #topimg {
	height:auto;}

#business #topimg h3.catch{
	position:absolute;
	display: inline-block;
	width:50%;
	top:20%;
	left:10%;}

#business #topimg .wrap{
	position:absolute;
    width: 42%;
    padding: 50px 0 25px;
	top:42%;
	left:15%;
	}
#business #topimg .textbox{
	width:100%;
	color:#FFF;}

#business #topimg h4{
	font-size:1.8vw;
	margin-bottom:20px;}

#business #topimg .textbox p + p{
	margin-top:2rem;}


#business #flow{
	text-align:center;
	background:#004e90;
	color:#FFF;}

#business #flow p{
	margin:0 auto 20px;
	max-width:780px;
	text-align:left;}


#business #item h3{
	font-size:1.8vw;
	margin-bottom:5px;}

#business #item .flexbox + .flexbox{
	margin-top:70px;}

#business #item .flexbox.right{flex-direction : row-reverse;}

#business #item .textbox,#item .imgbox{
	width:50%;}

#business #item .textbox{
	position:relative;
	text-align:left;
	background:#ededed;
	padding:2vw 3vw;}


@media screen and (max-width: 768px) {

#business p{
	font-size:1.2rem;}

#business #topimg h3.catch{
	width:60%;
	left: 20px;}

#business #topimg .wrap{
    width: 80%;
    padding: 50px 20px 25px;
	top:42%;
	left:0%;
	}

#business #topimg h4{
	text-align:center;
	font-size:2.1rem;
	margin-bottom:20px;}


#business #item h3{
	font-size:1.6rem;
	margin-bottom:10px;
	text-align:center;}


#business #item .textbox,#item .imgbox{
	width:100%;}

#business #item .textbox{
	padding:30px;}

}



@media screen and (max-width: 480px) {

#business p{
	text-align:left;}


#business #topimg h3.catch{
	width:90%;
	top:14%;
	right:0;
	left:0;
	margin:auto;}

#business #topimg .wrap{
	background:#1563a8;
	position: relative;
    width: 100%;
    padding: 25px 20px 25px;
	top:0;
	right:0;
	left:0;
	margin:auto;
	}

#business #item .textbox{
	font-size:1.0rem;}

#business #item h3{
	font-size:1.8rem;}

#business #item .flexbox + .flexbox{
	margin-top:50px;}

}