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

.orderH3box{
	background: linear-gradient(to right, #fff 0%,#78c1d1 20%,#78c1d1 50%,#78c1d1 80%,#fff 100%);
	margin-bottom: 30px;
	padding: 3px 0;
}
.orderH3box h3{
	background: linear-gradient(to right, #fff 0%,#d4ebf0 20%,#d4ebf0 50%,#d4ebf0 80%,#fff 100%);
	padding: 15px 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

/*--------納品までの流れ--------*/
.flowCont{
	margin-bottom: 50px;
}

.flowCont .stepBox dl{
	background-position: right top;
	background-repeat: no-repeat;
	min-height: 350px;
	margin: 30px 0 60px;
	padding-right: 360px;
	box-sizing: border-box;
}
.flowCont .stepBox dl dt{
	margin-bottom: 20px;
	padding: 14px 0 14px 60px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 3px solid #cce7ee;
	position: relative;
}
.flowCont .stepBox dl dt:before{
	content: "";
	display: block;
	background-color: #78c1d1;
	background-repeat: no-repeat;
	background-position: 50%;
	width: 45px;
	height: 45px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.flowCont .stepBox dl dd ul{
	margin: 10px;
}
.flowCont .stepBox dl dd ul li{
	font-size: 15px;
	margin-bottom: 5px;
}
.flowCont .stepBox dl dd ul li:before{
	content: "■";
	display: inline-block;
	color: #78c1d1;
	margin-right: 5px;
}
.flowCont .stepBox dl dd ul li a{
	display: block;
	width: 70%;
	margin: 5px 10px 10px;
	padding: 12px 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
}
.flowCont .stepBox dl dd ul li a:hover{
	opacity: 0.5;
}
.flowCont .stepBox dl dd ul li.web a{
	background: #9ad1dd;
	color: #333;
}
.flowCont .stepBox dl dd ul li.fax a{
	background: #2dbe4c;
	color: #fff;
}

/**/
.flowCont .stepBox .step1{
	background-image: url(../../../_images/order/flow/step1_img.webp);
}
.flowCont .stepBox .step1 dt:before{
	background-image: url(../../../_images/order/flow/step1_icon.gif);
}
.flowCont .stepBox .step2{
	background-image: url(../../../_images/order/flow/step2_img.webp);
}
.flowCont .stepBox .step2 dt:before{
	background-image: url(../../../_images/order/flow/step2_icon.gif);
}
.flowCont .stepBox .step3{
	background-image: url(../../../_images/order/flow/step3_img.webp);
}
.flowCont .stepBox .step3 dt:before{
	background-image: url(../../../_images/order/flow/step3_icon.gif);
}
.flowCont .stepBox .step4{
	background-image: url(../../../_images/order/flow/step4_img.webp);
}
.flowCont .stepBox .step4 dt:before{
	background-image: url(../../../_images/order/flow/step4_icon.gif);
}
.flowCont .stepBox .step5{
	background-image: url(../../../_images/order/flow/step5_img.webp);
}
.flowCont .stepBox .step5 dt:before{
	background-image: url(../../../_images/order/flow/step5_icon.gif);
}

/**/
.flowCont .aboutDay{
	background: #e6f7ff;
	margin: 30px;
	padding-bottom: 20px;
}
.flowCont .aboutDay h3{
	background: #62afd3;
	color: #fff;
	margin-bottom: 15px;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: bold;
}
.flowCont .aboutDay h3:before{
	content: "■";
	display: inline-block;
	color: #fff;
	margin-right: 10px;
}
.flowCont .aboutDay p{
	margin: 10px 20px;
}
.flowCont .aboutDay .dayBox{
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 30px auto 10px;
}
.flowCont .aboutDay .dayBox dl{
	width: 180px;
	background: #fff;
}
.flowCont .aboutDay .dayBox dl dt{
	color: #fff;
	padding: 10px;
	font-size: 15px;
	font-weight: bold;
	position: relative;
}
.flowCont .aboutDay .dayBox dl dt:after{
	content: "";
	display: block;
	background-repeat: no-repeat;
	width: 64px;
	height: 65px;
	position: absolute;
	right: 5px;
	bottom: 0;
}
.flowCont .aboutDay .dayBox dl dd{
	padding: 10px;
	text-align: center;
}
.flowCont .aboutDay .dayBox dl dd a{
	display: block;
	color: #FFF;
	margin: 10px 0 0;
	padding: 7px 5px 24px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	line-height: 1.2em;
	position: relative;
}
.flowCont .aboutDay .dayBox dl dd a:hover{
	opacity: 0.5;
}
.flowCont .aboutDay .dayBox dl dd a:after{
	content: "";
	display: block;
	background-image: url(../../../_images/common/arrow_maru_white.webp);
	background-size: 100%;
	width: 14px;
	height: 14px;
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	margin: auto;
}
/**/
.flowCont .aboutDay .moreCaption{
	background: #c1d3ff;
	margin: 20px 40px;
	padding: 10px;
	text-align: center;
}
.flowCont .aboutDay .moreCaption p{
	font-size: 18px;
	font-weight: bold;
}

/**/
.flowCont .aboutDay .dayBox dl.ganryo dt{
	background: #78a16d;
}
.flowCont .aboutDay .dayBox dl.ganryo dt:after{
	background-image: url(../../../_images/order/flow/ganryo_icon.webp);
}
.flowCont .aboutDay .dayBox dl.ganryo dd a{
	background: #39cf29;
}
/**/
.flowCont .aboutDay .dayBox dl.hannou dt{
	background: #148990;
}
.flowCont .aboutDay .dayBox dl.hannou dt:after{
	background-image: url(../../../_images/order/flow/hannou_icon.webp);
}
.flowCont .aboutDay .dayBox dl.hannou dd a{
	background: #15c2cd;
}
/**/
.flowCont .aboutDay .dayBox dl.chusen dt{
	background: #8d5b25;
}
.flowCont .aboutDay .dayBox dl.chusen dt:after{
	background-image: url(../../../_images/order/flow/chusen_icon.webp);
}
.flowCont .aboutDay .dayBox dl.chusen dd a{
	background: #cf7f29;
}
/**/
.flowCont .aboutDay .dayBox dl.color dt{
	background: #d14848;
}
.flowCont .aboutDay .dayBox dl.color dt:after{
	background-image: url(../../../_images/order/flow/color_icon.webp);
}
.flowCont .aboutDay .dayBox dl.color dd a{
	background: #d14848;
}

@media screen and (max-width: 768px) {
	.flowCont .stepBox dl{
		width: 95%;
		background-size: 250px auto;
		min-height: 250px;
		margin: 30px auto 60px;
		padding-right: 260px;
	}
	.flowCont .stepBox dl dd ul li a{
		width: 90%;
	}
	/**/
	.flowCont .aboutDay{
		margin: 30px 10px;
	}
	.flowCont .aboutDay .dayBox{
		width: 95%;
		gap: 15px;
		margin: 30px auto 0;
	}
	.flowCont .aboutDay .dayBox dl{
		width: calc((100% - 45px) / 4);
	}
	.flowCont .aboutDay .dayBox dl dd img{
		width: 100%;
		max-width: 150px;
	}
	/**/
	.flowCont .aboutDay .moreCaption{
		margin: 20px 10px;
		padding: 5px;
	}
}
@media screen and (max-width: 600px) {
	.flowCont .stepBox dl{
		background-size: 220px auto;
		min-height: 220px;
		padding-right: 230px;
	}
	.flowCont .aboutDay .dayBox{
		flex-wrap: wrap;
		gap: 20px 15px;
	}
	.flowCont .aboutDay .dayBox dl{
		width: calc((100% - 15px) / 2);
	}
}
@media screen and (max-width: 480px) {
	.flowCont .stepBox dl{
		background-position: center bottom;
		background-size: 250px auto;
		min-height: auto;
		margin: 30px auto 40px;
		padding-right: 0;
		padding-bottom: 270px;
	}
	.flowCont .aboutDay .dayBox{
		gap: 20px 10px;
	}
	.flowCont .aboutDay .dayBox dl{
		width: calc((100% - 10px) / 2);
	}
}