@charset "utf-8";
/* Copyright 2022 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

PC、タブレット、スマートフォン共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

工事・保守

------------------------------------------------------------ */

.sec_service{margin-bottom: 120px;}

.sec_service:last-of-type{margin-bottom: 0;}

.service_inner{
	padding: 120px 0 120px 3.64vw;
	display: flex;
	align-items: center;
	border-top: 1px solid #CBD6DE;
	position: relative; 
	z-index: 0;
}

.sec_service:nth-of-type(odd) .service_inner{flex-direction: row-reverse;}

.sec_service:nth-of-type(1) .service_inner{
	background: url("../service/img/bg_service_network01.jpg") no-repeat right 0;
	background-size: contain;
}

.sec_service:nth-of-type(2) .service_inner{
	background: url("../service/img/bg_service_security01.jpg") no-repeat left 0;
	background-size: contain;
}

.sec_service:nth-of-type(3) .service_inner{
	background: url("../service/img/bg_service_camera01.jpg") no-repeat right 0;
	background-size: contain;
}

.service_inner .inner{
    padding: 0 7.1%;
    width: 37.83%;
    min-width: 555px;
}

.service_inner .inner p{margin-bottom: 20px;}

.service_inner .inner p:last-of-type{margin-bottom: 0;}

.service_inner .inner h3{margin-bottom: 30px;}

.service_inner .inner .txt{line-height: 2;}

.service_inner .inner .txt .size01{
	font-size: 2rem;
}

.service_inner .image{width: 62.17%;}

.service_inner .image img{
	width: 100%;
	min-height: 560px;
	height: auto;
	object-fit: cover;
}

.service_inner .movie{
	width: 62.17%;
	font-size: 0;
}

.service_inner .movie video{
	width: 100%;
	aspect-ratio: 16 / 9;
}

.wrapper_item{
	max-width: 1340px;
	margin: 0 auto;
	padding: 100px 3.64vw 0;
}

.wrap_item{
	display: flex;
	justify-content: center;
	margin: 0 -15px;
}

.wrap_item .item{
	width: 33.33%;
	padding: 0 15px;
}

.wrap_item .item .image{margin-bottom: 25px;}

.wrap_item .item .image img{
	width: 100%;
	height: auto;
}

.wrap_item .item h4{
	color: #0270BB;
	font-size: 2rem;
	margin-bottom: 12px;
}

.wrap_item .item .txt{line-height: 2;}


/* ------------------------------------------------------------

サポートサービス

------------------------------------------------------------ */

.support{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 0;
	padding: 0 3.64vw;
	margin-bottom: 120px;
	background-size: contain!important;
}

.support:nth-of-type(even){flex-direction: row-reverse;}

.support:last-of-type{margin-bottom: 160px;}

.support:nth-of-type(1){background: url("../service/img/bg_support01.jpg") no-repeat right 0;}

.support:nth-of-type(2){background: url("../service/img/bg_support02.jpg") no-repeat 0 0;}

.support:nth-of-type(3){background: url("../service/img/bg_support03.jpg") no-repeat right 0;}

.support_inner{width: 70%;}

.support_inner img{
	width: 100%;
	height: auto;
}

.support_inner img:nth-of-type(2){display: none;}

.support_inner .inner{padding: 3.54vw 4.494% 5.45vw;}

.support_inner .inner h2{
	color: #0270BB;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 30px;
}

.support .image{
	width: 28.31%;
	padding-top: 13.64vw;
}

.support .image img{
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------

代理店業務

------------------------------------------------------------ */

.shop{
	padding-top: 160px;
	display: flex;
	align-items: center;
	margin-bottom: 120px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.shop:nth-of-type(odd){flex-direction: row-reverse;}

.shop::after{
	content: "";
	width: 50%;
	height: calc(100% - 160px);
	background-size: cover !important;
	position: absolute;
	top: 0;
	z-index: -2;
}

.shop:nth-of-type(1)::after{
	background: url("../service/img/bg_agency01.jpg") no-repeat 0 0;
	right: 0;
}

.shop:nth-of-type(2)::after{
	background: url("../service/img/bg_agency02.jpg") no-repeat 0 0;
	left: 0;
}

.shop .inner{
	padding: 0 6.8%;
	width: 36.45%;
}

.shop .inner h3{margin-bottom: 23px;}

.shop .inner .txt{margin-bottom: 45px;}

.shop .inner .txt p{margin-bottom: 20px;}

.shop .inner .txt p:last-of-type{margin-bottom: 0;}

.shop .inner .btn_type02 a{width: 100%;}

.shop .image{width: 63.55%;}
	
.shop:nth-of-type(odd) .image{padding-left: 3.64vw;}

.shop:nth-of-type(even) .image{padding-right: 3.64vw;}

.shop .image{
	position: relative;
	z-index: 0;
}

.shop .image img{
	width: 100%;
	min-height: 840px;
	height: auto;
	object-fit: cover;
}

.shop .image .txt_agency_animation{
	width: 80%;
	padding-top: 80%;
	animation: rotate 22s linear infinite;
	display: block;
	pointer-events: none;
	position: absolute;
	top: -160px;
	z-index: -1;
}

@keyframes rotate {
	0%  {transform: rotate(360deg);}
	100%  {transform: rotate(0);}
}

.shop:nth-of-type(odd) .image .txt_agency_animation{right: -100px;}

.shop:nth-of-type(even) .image .txt_agency_animation{left: -100px;}

.shop .image .txt_agency_animation svg{
	width: 100%;
	height: 100%;
	fill: #909FA2;
	opacity: 0.3;
	position: absolute;
	top: 0;
	left: 0;
}


@media only screen and (max-width:1430px){ /* 表示領域が1430px以下の場合に適用するスタイル */

	.shop:nth-of-type(1)::after,	
	.shop:nth-of-type(2)::after{width: 715px;}

	.shop .inner{width: 515px;}
	
	.shop .image{width: calc(100% - 515px);}
	
	.shop .image .txt_agency_animation{
		width: 600px;
		padding-top: 600px;
	}
	
	.shop:nth-of-type(odd) .image .txt_agency_animation{right: -70px;}

	.shop:nth-of-type(even) .image .txt_agency_animation{left: -70px;}
	
	
}/*--@media--*/

	
@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	工事・保守

	------------------------------------------------------------ */

	.sec_service{margin-bottom: 40px;}
	
	.sec_service:last-of-type{margin-bottom: 120px;}

	.service_inner{
		padding: 50px 15px;
		flex-direction: column-reverse;
	}
	
	.sec_service:nth-of-type(odd) .service_inner{flex-direction: column-reverse;}
	
	.sec_service:nth-of-type(1) .service_inner{
		background: url("../service/img/bg_service_network01_sp.jpg") no-repeat right 0;
		background-size: 80%;
	}

	.sec_service:nth-of-type(2) .service_inner{
		background: url("../service/img/bg_service_security01_sp.jpg") no-repeat left 0;
		background-size: 80%;
	}

	.sec_service:nth-of-type(3) .service_inner{
		background: url("../service/img/bg_service_camera01_sp.jpg") no-repeat right 0;
		background-size: 80%;
	}
	
	.sec_service:last-of-type .service_inner{padding-bottom: 0;}

	.service_inner .inner{
		padding: 0;
		width: 100%;
		min-width: unset;
	}
	
	.service_inner .inner h2{margin-bottom: 20px;}
	
	.service_inner .inner h3{margin-bottom: 15px;}
	
	.service_inner .image{
		width: 100%;
		margin-bottom: 30px;
	}

	.service_inner .image img{
		width: 100%;
		min-height: unset;
		height: auto;
	}

	.service_inner .movie{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.wrapper_item{padding-top: 0;}


	/* ------------------------------------------------------------

	代理店業務

	------------------------------------------------------------ */

	.shop{
		padding: 34.66vw 3.64vw 0;
		align-items: unset;
		flex-direction: column-reverse;
		margin-bottom: 80px;
	}
	
	.shop:nth-of-type(odd){flex-direction: column-reverse;}

	.shop:nth-of-type(1)::after,
	.shop:nth-of-type(2)::after{
		width: 86.9%;
		height: 70vw;
		left: unset;
		right: 0;
	}

	.shop .inner{
		padding: 0;
		width: 100%;
	}

	.shop .inner .txt{margin-bottom: 30px;}

	.shop .inner .txt p{margin-bottom: 15px;}
	
	.shop .inner .btn_type02 a{
		max-width: 500px;
		padding: 37px 130px 37px 10%;
	}

	.shop .image{
		width: 91.3%;
		margin-bottom: 40px;
	}

	.shop:nth-of-type(odd) .image{padding-left: 0;}

	.shop:nth-of-type(even) .image{padding-right: 0;}

	.shop .image img{min-height: unset;}

	.shop .image .txt_agency_animation{
		width: 88.88%;
		padding-top: 88.88%;
		top: -29.33vw;
	}

	.shop .image .txt_agency_animation svg{opacity: 0.4;}
	
	.shop:nth-of-type(odd) .image .txt_agency_animation,
	.shop:nth-of-type(even) .image .txt_agency_animation{
		right: -8vw;
		left: unset;
	}
	
	

	
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	工事・保守

	------------------------------------------------------------ */
	
	.service_inner .inner .txt .list_type01 li::before{top: 12px !important;}

	.service_inner .inner .txt .size01{
		font-size: 1.8rem;
	}
	
	.wrapper_item{padding: 0 15px;}

	.wrap_item{
		display: block;
		margin: 0;
	}

	.wrap_item .item{
		width: 100%;
		padding: 0;
		margin-bottom: 25px;
	}
	
	.wrap_item .item:last-of-type{margin-bottom: 0;}

	.wrap_item .item .image{margin-bottom: 18px;}

	.wrap_item .item h4{
		font-size: 1.7rem;
		margin-bottom: 8px;
	}

	/* ------------------------------------------------------------

	サポートサービス

	------------------------------------------------------------ */

	.support{
		background: none !important;
		display: block;
		padding: 0 15px;
		margin-bottom: 70px;
	}
	
	.support::before{
		content: "";
		background: url("../service/img/bg_support01_sp.jpg") no-repeat 0 0;
		display: block;
		width: 80%;
		padding-top: 100vw;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -2;
	}
	
	.support:last-of-type{margin-bottom: 120px;}

	.support_inner{width: 100%;}

	.support_inner img{width: 82.6%;}

	.support_inner img:nth-of-type(1){display: none;}

	.support_inner img:nth-of-type(2){display: block;}

	.support_inner .inner{padding: 30px 0 0;}

	.support_inner .inner h2{
		font-size: 2.4rem;
		margin-bottom: 20px;
	}
	
	.support_inner .inner .txt{line-height: 2;}
	
	.support .image{
		width: 40.5%;
		padding-top: 0;
		position: absolute;
		top: 60.8vw;
		right: 0;
	}


	/* ------------------------------------------------------------

	代理店業務

	------------------------------------------------------------ */

	.shop{padding: 34.66vw 15px 0;}
	
	.shop .inner .btn_type02 a{
		max-width: 345px;
		padding: 28px 90px 28px 15px;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:432px){ /* 表示領域が432px以下の場合に適用するスタイル */
	
	/* ------------------------------------------------------------

	サポートサービス

	------------------------------------------------------------ */
	
	.support::before{padding-top: 124%;}

	
}/*--@media--*/