@charset "UTF-8";

/*--------------------------------------------------
**************************************************
  PC
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	#page_title {
		width:100%;
		height:200px;
		background:url(../imgs/service/page_bg.jpg) no-repeat left center;
		background-size: cover;
		border-top: 1px solid #FFF;
	}
	.service_accounting { background:url(../imgs/service/page_accounting_bg.jpg) !important;}
	.service_equipment { background:url(../imgs/service/page_equipment_bg.jpg) !important;}
	.service_cleaning { background:url(../imgs/service/page_cleaning_bg.jpg) !important;}
	.service_repair { background:url(../imgs/service/page_repair_bg.jpg) !important;}
	.service_monitoring { background:url(../imgs/service/page_monitoring_bg.jpg) right bottom !important;}
	
	#page_title h1 {
		font-size: 30px;
		letter-spacing: 0.15em;
		line-height:200px;
		padding-left:calc(50% - 500px);
	}
	
	.service_list .service_detail {
		background: #FFF;
		margin-bottom: 30px;
		position:relative;
		align-items:center;
	}
	.service_list .service_detail .thumb {
		width:30%;
		display:block;
	}
	.service_list .service_detail .text_box {
		width:65%;
	}
	.service_list .service_detail .s_title {
		font-size: 16px;
		font-weight:bold;
		margin-top: 20px;
		position:relative;
		padding-bottom: 10px;
	}
	.service_list .service_detail .s_title:after {
		position:absolute;
		content:"";
		width: 50px;
		height:2px;
		bottom:0;
		left:0;
		background: #000;
	}
	.service_list .service_detail .s_text {
		padding:20px 0;
	}
	.service_list .service_detail a {
		position: absolute;
		text-indent:-99999px;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	.service_list .service_detail:hover {
		background:#f9f9f9;
		transition: background 1s;
	}
	
	
	/* -- support -- */
	.service_box {
		align-items:center;
	}
	.service_box .service_text {
		width:65%;
	}
	.service_box .service_text .st_title {
		font-size: 24px;
		letter-spacing:0.1em;
		padding: 10px;
		border-bottom: 1px solid #e71e29;
	}
	.service_box .service_text .st_text {
		padding: 20px 10px;
	}
	.service_box .thumb {
		width:35%;
	}
	.service_box .thumb img {
		border-radius: 20px;
	}
	.back_btn {
		text-align:center;
	}
	.back_btn a {
		background:#f0f0f0;
		padding: 10px 50px;
		display:inline-block;
		color: #000;
	}
	.back_btn a:hover {
		background:#e71e29;
		color: #FFF;
		text-decoration:none;
	}
	
	

}


/*--------------------------------------------------
**************************************************
  SP
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	
	#page_title {
		width:100%;
		height:120px;
		background:url(../imgs/service/page_bg.jpg) no-repeat center center;
		background-size: cover;
		border-top: 1px solid #FFF;
	}
	.service_accounting { background:url(../imgs/service/page_accounting_bg.jpg) !important;}
	.service_equipment { background:url(../imgs/service/page_equipment_bg.jpg) !important;}
	.service_cleaning { background:url(../imgs/service/page_cleaning_bg.jpg) !important;}
	.service_repair { background:url(../imgs/service/page_repair_bg.jpg) !important;}
	.service_monitoring { background:url(../imgs/service/page_monitoring_bg.jpg) !important;}
	
	#page_title h1 {
		font-size: 5vw;
		letter-spacing: 0.15em;
		padding-top:calc(60px - 3.5vw);
		padding-left: 5vw;
	}
	
	.service_list {
		justify-content: center;
	}
	.service_list .service_detail {
		width: 100%;
		background: #FFF;
		margin-bottom: 20px;
		position:relative;
		box-sizing: border-box;
		padding: 10px;
		border: 1px solid #f0f0f0;
	}
	.service_list .service_detail .thumb {
		width:150px;
		height: 150px;
	}
	.service_list .service_detail img {
		display:block;
		width:150px;
		height: 150px;
		object-fit: cover;
	}
	.service_list .service_detail .text_box {
		width:calc(100% - 170px);
	}
	.service_list .service_detail .s_title {
		font-size: 3.5vw;
		font-weight:bold;
		position:relative;
		padding-bottom: 10px;
	}
	.service_list .service_detail .s_title:after {
		position:absolute;
		content:"";
		width: 50px;
		height:2px;
		bottom:0;
		left:0;
		background: #000;
	}
	.service_list .service_detail .s_text {
		padding:10px 0;
		font-size: 3vw;
	}
	.service_list .service_detail a {
		position: absolute;
		text-indent:-99999px;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	
	/* -- accounting -- */
	.service_box {
		flex-direction:column-reverse;
	}
	.service_box .service_text {
		width:80%;
		margin: 10px auto 0;
	}
	.service_box .service_text .st_title {
		font-size: 4vw;
		letter-spacing:0.1em;
		padding: 10px;
		border-bottom: 1px solid #e71e29;
	}
	.service_box .service_text .st_text {
		padding: 20px 10px;
	}
	.service_box .thumb {
		width:80%;
		margin: 0 auto;
	}
	.service_box .thumb img {
		border-radius: 20px;
	}
	.back_btn {
		text-align:center;
	}
	.back_btn a {
		background:#f0f0f0;
		padding: 10px 50px;
		display:inline-block;
		color: #000;
	}
	.back_btn a:hover {
		background:#e71e29;
		color: #FFF;
		text-decoration:none;
	}
	
	
	
}