@charset "UTF-8";
/*タイトル ========================================================================*/
#main .ttl_main.after_service h1{
	background:linear-gradient(-90deg, rgba(0,0,0,.1) 50%,rgba(0,0,0,.9)) 50%,url(../img/ttl_after_service.jpg) no-repeat center center / cover;
	}
	
#main .txt{
	margin-bottom:50px;
	}	
#main .box{
	width:100%;
	height:1000px;
	background-image:url(../img/after_service/procedure/flow.jpg);
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	}
#main .box picture{
	display:none;
	}
#main .step_top{
	position:absolute;
	top:0;
	}		
#main .step_bottom{
	position:absolute;
	bottom:60px;
	}		
#main .step{
	width:21.7%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:4% 1% 1%;
	margin:0 0.5%;
	float:left;
	position:relative;
	text-align:justify;
	text-justify: inter-ideograph;
	}
#main .step_bottom .step{
	width:30%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:4% 1% 1%;
	margin:0 0.5%;
	float:right;
	position:relative;
	}	
#main .step span{
	background-color:#96202f;
	color:#fff;
	padding:5px 5%;
	position:absolute;
	top:0;
	left:0;
	}
#main .step h3{
	font-size:16px;
	}		
#main .button a{
	width:400px;
	border:none;
	outline:none;
	padding:20px 0;
	margin:0 auto;
	text-decoration:none;
	font-size:16px;
	color:#fff;
	text-align:center;
	background-color:#96202f;
	border-radius:10px;
	display:block;
	}
#main .button a::after{
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-family:"FontAwesome";
	content:"\f0a9";
	margin-left:5px;
	}	


@media screen and (min-width:700px) and ( max-width:1050px){
#main .txt{
	margin-bottom:30px;
	}
#main .box{
	width:100%;
	height:auto;
	background:no-repeat;
	position:static;
	}
#main .box picture{
	display:block;
	width:100%;
	margin-bottom:20px;
	}
#main .box picture img{
	width:100%;
	}
#main .step_top{
	position:static;
	}		
#main .step_bottom{
	position:static;
	}	
#main .step{
	width:20.7%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:4% 1% 1%;
	margin:0 1%;
	float:left;
	position:relative;
	text-align:justify;
	text-justify: inter-ideograph;
	}
#main .step_bottom .step{
	width:29%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:4% 1% 1%;
	margin:0 1%;
	float:left;
	position:relative;
	}	
#main .step span{
	background-color:#96202f;
	color:#fff;
	padding:5px 5%;
	position:absolute;
	top:0;
	left:0;
	}
#main .step h3{
	font-size:16px;
	}
#main .step_top{
	position:static;
	}		
#main .step_bottom{
	position:static;
	}		
#main .step{
	width:90%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#fff;
	padding:50px 5% 5px;
	margin:0 auto 30px;
	float:none;
	position:relative;
	text-align:justify;
	text-justify: inter-ideograph;
	}
#main .step_bottom .step{
	width:90%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#fff;
	padding:50px 5% 5px;
	margin:0 auto 30px;
	float:none;
	position:relative;
	}	
#main .step span{
	background-color:#96202f;
	color:#fff;
	padding:5px 5%;
	position:absolute;
	top:0;
	left:0;
	}
#main .step h3{
	font-size:16px;
	margin:0;
	}
#main .step:after {
	border-top: 27px solid #aaa;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	content: "";
	position: absolute;
	bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
	left: 50%;/* 中央寄せに使用 */
	margin-left: -70px; /* 中央寄せに使用 */
	}
#main .step_bottom .step:last-child:after {
	border: none;
	}
#main .button a{
	width:400px;
	border:none;
	outline:none;
	padding:20px 0;
	margin:50px auto;
	text-decoration:none;
	font-size:16px;
	color:#fff;
	text-align:center;
	background-color:#96202f;
	border-radius:10px;
	display:block;
	}
#main .button a::after{
	-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
	font-family:"FontAwesome";
	content:"\f0a9";
	margin-left:5px;
	}	
}


@media screen and (max-width:700px){
#main .txt{
	margin-bottom:20px;
	}		
#main .box{
	width:100%;
	height:auto;
	background:no-repeat;
	position:static;
	}
#main .box picture{
	display:block;
	width:100%;
	margin-bottom:20px;
	}
#main .box picture img{
	width:100%;
	}
#main .step_top{
	position:static;
	}		
#main .step_bottom{
	position:static;
	}		
#main .step{
	width:90%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:50px 5% 5px;
	margin:0 auto 30px;
	float:none;
	position:relative;
	}
#main .step_bottom .step{
	width:90%;
	height:auto;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	padding:50px 5% 5px;
	margin:0 auto 30px;
	float:none;
	position:relative;
	}	
#main .step span{
	background-color:#96202f;
	color:#fff;
	padding:5px 5%;
	position:absolute;
	top:0;
	left:0;
	}
#main .step h3{
	font-size:16px;
	margin:0;
	}
#main .step:after {
	border-top: 27px solid #aaa;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	content: "";
	position: absolute;
	bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
	left: 50%;/* 中央寄せに使用 */
	margin-left: -70px; /* 中央寄せに使用 */
	}
#main .step_bottom .step:last-child:after {
	border: none;
	}
#main .button a{
	width:100%;
	border:none;
	outline:none;
	padding:20px 0;
	margin:20px auto;
	text-decoration:none;
	font-size:16px;
	color:#fff;
	text-align:center;
	background-color:#96202f;
	border-radius:10px;
	display:block;
	}
#main .button a::after{
	-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
	font-family:"FontAwesome";
	content:"\f0a9";
	margin-left:5px;
	}	
}