@charset "utf-8";

/* ------------------------------
 ご依頼から納品まで
------------------------------ */
.flow-box div a{
	text-decoration: underline;
}
@media print, screen and (min-width: 768px) {
	.flow-box div{
		width:150px;
		height: 100px;
		border: solid 1px #0A1976;
		text-align: center;
		font-size: 1.3rem;
		float: left;
		position: relative;
		margin-right: 48px;
		line-height: 1.5;
		padding-top: 15px;
	}
	.flow-box div:nth-child(7){
		width:546px;
	}
	.flow-box div:nth-child(6){
		margin-right: 0;
		margin-bottom: 48px;
	}
	.flow-box div:nth-child(7),
	.flow-box div:nth-child(8),
	.flow-box div:nth-child(9),
	.flow-box div:nth-child(10){
		float: right;
		margin-right: 0;
		margin-left: 48px;
		height: 120px;
	}

	.flow-box div:nth-child(10){
		float: right;
		margin-right: 0;
		margin-left: 0;
	}

	.flow-box div::before,
	.flow-box div::after{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	.flow-box div::before{
		left: 160px;
		width: 26px;
		height: 1px;
		background: #0A1976;
	}
	.flow-box div::after{
		left: 179px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #0A1976;
		border-right: 1px solid #0A1976;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.flow-box div:nth-child(7)::after,
	.flow-box div:nth-child(8)::after,
	.flow-box div:nth-child(9)::after,
	.flow-box div:nth-child(10)::after{
		left: 160px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #0A1976;
		border-right: 1px solid #0A1976;
		-webkit-transform: rotate(-140deg);
		transform: rotate(-140deg);
	}

	.flow-box div:nth-child(6)::before{
		left: 75px;
		width: 1px;
		height: 26px;
		background: #0A1976;
		bottom: -150px;
	}
	.flow-box div:nth-child(6)::after{
		left: 72px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #0A1976;
		border-right: 1px solid #0A1976;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		bottom: -165px;
	}
	.flow-box div:nth-child(7)::before{
		left: 556px;
		width: 26px;
		height: 1px;
		background: #0A1976;
	}
	.flow-box div:nth-child(7)::after{
		left: 556px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #0A1976;
		border-right: 1px solid #0A1976;
		-webkit-transform: rotate(-140deg);
		transform: rotate(-140deg);
	}
	.flow-box div p{
		color: #EB2438;
		font-family: "Montserrat";
		font-size: 2rem;
		font-weight: bold;
		line-height: 1;
		margin-bottom: 10px;
	}
	.flow-box div:nth-child(8) p{
		margin-bottom: 0;
	}
	.flow-box div:nth-child(9) p,
	.flow-box div:nth-child(10) p{
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 767px) {
	.flow-box div{
		width:100%;
		border: solid 1px #0A1976;
		text-align: left;
		padding: 15px;
		margin-bottom: 30px;
		position: relative;
	}
	.flow-box div br{
		display: none;
	}
	.flow-box div p{
		color: #EB2438;
		font-family: "Montserrat";
		font-size: 2.2rem;
		font-weight: bold;
		line-height: 1;
		display: inline-block;
		vertical-align: middle;
		margin-right : 5px;
	}
	.flow-box div::before,
	.flow-box div::after{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	.flow-box div::before{
		width: 1px;
		height: 18px;
		background: #0A1976;
		bottom: -75px;
	}
	.flow-box div::after{
		left: 0;
		width: 6px;
		height: 6px;
		border-top: 1px solid #0A1976;
		border-right: 1px solid #0A1976;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		bottom: -86px;
	}
	.flow-box div:nth-child(7)::before,
	.flow-box div:nth-child(8)::before{
		bottom: -100px;
	}
	.flow-box div:nth-child(7)::after,
	.flow-box div:nth-child(8)::after{
		bottom: -110px;
	}
	.flow-box div:nth-child(7) br,
	.flow-box div:nth-child(8) br{
		display: block;
	}
	.flow-box div:nth-child(10)::before,
	.flow-box div:nth-child(10)::before{
		content: none;
	}
	.flow-box div:nth-child(10)::after,
	.flow-box div:nth-child(10)::after{
		bottom: -110px;
		content: none;
	}
}
@media screen and (max-width: 320px) {
	.flow-box div:nth-child(7)::before,
	.flow-box div:nth-child(8)::before{
		bottom: -100px;
	}
	.flow-box div:nth-child(7)::after,
	.flow-box div:nth-child(8)::after{
		bottom: -113px;
	}
}