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



/*-
	PC版（769px以上）ここから
------------------------------------------------- */
@media screen and (min-width:769px), print{
	
	#title{
		background-image: url("../../images/mainte_bg2.jpg");  /* タイトル背景写真 */
	}
	
	#mainteDetail{}
	#mainteDetail dl{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 1100px;
		margin: 50px auto 70px;
	}
	#mainteDetail dl dt{
		width: 530px;
		height: 380px;
		background-image: url("../images/top04.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: right center;
		box-shadow: 15px 15px 0 0 #2E457C;
	}
	#mainteDetail dl dd{
		width: 510px;
		padding-top: 30px;
	}
	#mainteDetail .gyoumu{
		color: #2E457C;
		font-size: 16px;
		font-weight: 800;
		margin-bottom: 20px;
	}
	#mainteDetail .gyoumu::before{
		content: "";
		position: relative;
		top: -3px;
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 10px;
		background-image: url("../../../images/logo_icon.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	#mainteDetail h3{
		display: block;
		padding-left: 15px;
		color: #089BCC;
		font-size: 32px;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom: 30px;
	}
	#mainteDetail .text{
		padding-left: 15px;
	}
	
	
	#mainteDetail .detail{
		display: block;
		width: 1000px;
		margin: 0 auto 60px;
	}
	#mainteDetail .detail ul{
		display: flex;
		justify-content: space-between;
	}
	#mainteDetail .detail ul li{
		width: 300px;
		position: relative;
	}
	#mainteDetail .detail ul li::after{
		content: "";
		display: block;
		position: absolute;
		top: calc(50% + 0.7em);
		right: -37px;
		width: 22px;
		height: 22px;
		transform: translateY(-50%);
		background-image: url("../images/ba_arrow.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	#mainteDetail .detail ul li:last-of-type::after{
		display: none;
	}
	#mainteDetail .detail ul li > p{
		display: block;
		margin-bottom: 2px;
		font-weight: 600;
	}
	#mainteDetail .detail ul li > p::before{
		content: "";
		display: inline-block;
		position: relative;
		top: 1px;
		width: 13px;
		height: 13px;
		background-color: #089BCC;
		margin-right: 0.2em;
	}
	#mainteDetail .detail ul li img{
		display: block;
		width: 100%;
	}
	
	
	
	
	
	
}
/*-
	SP版（768px以下）ここから
------------------------------------------------- */
@media screen and (max-width: 768px) {
	
	#title{
		background-image: url("../../images/mainte_bg2.jpg");  /* タイトル背景写真 */
	}
	
	#mainteDetail{
		margin-bottom: 60px;
	}
	#mainteDetail dl{
		display: block;
		width: 100%;
		margin: 30px auto 40px;
	}
	#mainteDetail dl dt{
		display: block;
		width: 100%;
		padding-top: 71.7%;
		margin-bottom: 30px;
		background-image: url("../images/top04.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: right center;
		border-bottom: 7px solid #2E457C;
	}
	#mainteDetail dl dd{
		display: block;
		width: 100%;
		padding: 0 15px;
	}
	#mainteDetail .gyoumu{
		color: #2E457C;
		font-size: 16px;
		font-weight: 800;
		margin-bottom: 15px;
	}
	#mainteDetail .gyoumu::before{
		content: "";
		position: relative;
		top: -3px;
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 10px;
		background-image: url("../../../images/logo_icon.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	#mainteDetail h3{
		display: block;
		color: #089BCC;
		font-size: 32px;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom: 25px;
	}
	#mainteDetail .text{}
	
	
	#mainteDetail .detail{
		display: block;
		padding: 0 15px;
		margin: 0 auto 60px;
	}
	#mainteDetail .detail ul{
		display: block;
	}
	#mainteDetail .detail ul li{
		width: 80%;
		max-width: 400px;
		position: relative;
		margin: 0 auto 30px;
	}
	#mainteDetail .detail ul li::after{
		content: "";
		display: block;
		position: absolute;
		bottom: -40px;
		left: 50%;
		transform: translateX(-50%);
		width: 25px;
		height: 25px;
		background-image: url("../images/ba_arrow_sp.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	#mainteDetail .detail ul li:last-of-type::after{
		display: none;
	}
	#mainteDetail .detail ul li > p{
		display: block;
		margin-bottom: 2px;
		font-weight: 600;
	}
	#mainteDetail .detail ul li > p::before{
		content: "";
		display: inline-block;
		position: relative;
		top: 1px;
		width: 13px;
		height: 13px;
		background-color: #089BCC;
		margin-right: 0.2em;
	}
	#mainteDetail .detail ul li img{
		display: block;
		width: 100%;
	}
	

	
	
}