@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　security_camera
 *
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav
-----------------------------------------------------------------*/
.page-nav{
	padding: 140px 0 0;
	background: var(--purple);
}
.page-nav-list{
	justify-content: space-between;
}
.page-nav-list li{
	width: calc((100% - 60px)/4);
}



/* security_camera
-----------------------------------------------------------------*/
.security_camera{
	padding: 65px 0 130px;
	background: var(--purple);
}
.security_camera h2{
	margin-bottom: 20px;
	text-align: center;
}
.security_camera h2 small{
	display: block;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 1.6rem;
}
.security_camera .txt-lead{
	margin-bottom: 10px;
	color: var(--red);
	text-align: center;
	font-size: 3.2rem;
	line-height: 1.4;
	font-weight: 600;
}
.security_camera .txt-lead + .txt{
	margin-bottom: 15px;
	text-align: center;
}
.security_camera .check-list{
	width: fit-content;
	margin: 0 auto 10px;
}
.value{
	max-width: 720px;
	margin: 0 auto 50px;
}
.value h3{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 20px;
	line-height: 1;
	font-size: 2rem;
	font-weight: 500;
}
.value h3 .ico-left,
.value h3 .ico-right{
	margin-bottom: 5px;
}
.value h3 .ico-left{
	margin-right: 15px;
}
.value h3 .price{
	margin: 0 5px;
	color: var(--red);
	font-size: 8rem;
	letter-spacing: -.04em;
	font-weight: 500;
}
.value h3 .otoku{
	margin-left: 5px;
	font-size: 4rem;
}
.value .value-box{
	margin-bottom: 40px;
	padding: 30px 20px;
	background: var(--lred);
}
.value .value-box .txt{
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: var(--red);
}
.value .pic-style{
	max-width: 800px;
	margin: 0 auto 70px;
}
.security_camera .pic-list{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.security_camera .pic-list li{
	max-width: 380px;
	width: calc((100% - 20px)/3);
}
.line-box{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 930px;
	margin: 0 auto 15px;
	padding: 25px 15px;
	background: var(--light);
}
.line-box .txt{
	margin-bottom: 10px;
}
.line-box .btn-base._blank a span::after{
	width: 10px;
	height: 13px;
	background-image: url(../img/common/ico_file_w.svg);
	background-size: 100% auto;
}
.line-box .btn-base._blank a:hover span::after{
	 background-image: url(../img/common/ico_file_red.svg);
}
.line-box .qr-code{
	width: 95px;
	margin-left: 2%;
}
.line-box + .notes{
	max-width: 930px;
	margin-inline: auto;
}


/* fee
-----------------------------------------------------------------*/
.fee{
	padding: 140px 0 160px;
}
.fee h2{
	margin-bottom: 60px;
}
.fee-box{
	padding: 70px 6.66%;
	background: var(--purple);
}
.fee-box h3{
	margin-bottom: 15px;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
}
table{
	border-collapse: collapse;
	border-top: 1px solid #999;
	background: var(--light);
	line-height: 1.4;
}
table tr{
	border-bottom: 1px solid #999;
}
table tr > *{
	border-right: 1px solid #999;
}
table tr > *:last-child{
	border-right: none;
}
.fee-box table{
	margin-bottom: 15px;
}
th{
	background: var(--lred);
	font-weight: 500;
}
.fee-box table th{
	padding: 25px;
	vertical-align: middle;	
}
.fee-box table td{
	padding: 25px 30px;
	vertical-align: middle;
}
.fee-box table td strong{
	font-size: 2.4rem;
	color: var(--red);
	font-weight: 600;
}
.fee-box table td em{
	display: inline-block;
	margin-left: 20px;
	font-style: normal;
	color: var(--red);
	font-weight: 500;
}


/* flow
-----------------------------------------------------------------*/
.flow{
	padding: 140px 0 160px;
	background: var(--purple);
}
.flow h2{
	margin-bottom: 65px;
}
.flow .card-list{
	display: block;
}
.flow .card-list li{
	width: 100%;
	padding: 80px 6.6% 80px 11.25%;
}
.flow .card-list .txt-area{
	max-width: 620px;
}
.flow .card-list .pic{
	flex-shrink: 0;
	margin-left: 25px;
}
.flow .card-list h3{
	margin-bottom: 15px;
	font-size: 3.2rem;
	line-height: 1.5;
}
.flow .card-list .btn{
	margin: 20px 0 15px;
}
.flow .card-list.step01 .contact-info{
	margin-top: 20px;
	line-height: 1.4;
}
.flow .card-list.step01 .contact-info > div{
	display: flex;
	align-items: center;
	
}
.flow .card-list.step01 .contact-info .tel{
	font-weight: 600;
	font-size: 4rem;
}
.flow .card-list.step01 .contact-info .businesshour{
	margin-left: 10px;
	font-size: 1.2rem;
}
.flow .card-list.step01 .contact-info .mobile{
	display: flex;
	align-items: center;
}
.flow .card-list.step01 .contact-info .mobile a{
	transform: translateY(-3px);
	margin-left: 5px;
	font-size: 2.4rem;
	font-weight: 600;
}
.flow .card-list + .arw {
	margin: 40px 0 25px;
	text-align: center;
}
.flow .notes-box{
	margin-top: 80px;
	padding: 70px 6.66% 75px;
	background:  var(--light);
}
.flow .notes-box h3{
	margin-bottom: 15px;
	font-size: 2.4rem;
	line-height: 1.5;	
}


/* faq
-----------------------------------------------------------------*/
.faq{
	padding: 140px 0 160px;
}
.faq h2{
	margin-bottom: 35px;
}

/* sd
-----------------------------------------------------------------*/
.sd{
	padding: 0px 0 0px;
}
.sd h2{
	margin-bottom: 60px;
}
.sd-box{
	padding: 10px 1%;
	background: var(--purple);
}
.sd-box h3{
	margin-bottom: 15px;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
}
table{
  width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #999;
	background: var(--light);
	line-height: 1.4;
}
table tr{
	border-bottom: 1px solid #999;
}
table tr > *{
	border-right: 1px solid #999;
}
table tr > *:last-child{
	border-right: none;
}
.sd-box table{
	margin-bottom: 0px;
}
th{
	background: var(--lred);
	font-weight: 500;
}
.sd-box table th{
	padding: 25px;
	vertical-align: middle;	
}
.sd-box table td{
	padding: 25px 30px;
	vertical-align: middle;
}
.sd-box table td strong{
	font-size: 2.4rem;
	color: var(--red);
	font-weight: 600;
}
.sd-box table td em{
	display: inline-block;
	margin-left: 20px;
	font-style: normal;
	color: var(--red);
	font-weight: 500;
}



























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/* page-nav
-----------------------------------------------------------------*/
	.page-nav{
		padding: 55px 0 0;
	}
	.page-nav-list{
		justify-content: space-between;
	}
	.page-nav-list li{
		width: calc(50% - 5px);
	}
	.page-nav-list li:nth-child(1) a{
		padding-bottom: 15px;
		line-height: 1.2;
	}
	.page-nav-list li:nth-child(1) a span{
		padding-bottom: 7px;
	}
	.page-nav-list li:nth-child(2){
		margin-inline: 0;
	}
	.page-nav-list li:nth-child(n+3){
		margin-top: 15px;
	}


/* security_camera
-----------------------------------------------------------------*/
	.security_camera{
		padding: 50px 0 60px;
		font-size: 1.4rem;
	}
	.security_camera h2 small{
		margin-bottom: 5px;
		font-size: 1.2rem;
	}
	.security_camera h2 img{
		max-width: none;
		margin: 0 auto 40px;
	}
	.security_camera .txt-lead{
		margin-bottom: 10px;
		font-size: 2.4rem;
	}
	.security_camera .txt-lead + .txt{
		text-align: justify;
	}
	.value{
		margin: 0 auto;
	}
	.value h3{
		margin-bottom: 10px;
		font-size: 1.2rem;
	}
	.value h3 .ico-left,
	.value h3 .ico-right{
		width: 26px;
		margin-bottom: 5px;
	}
	.value h3 .ico-left{
		margin-right: 15px;
	}
	.value h3 .price{
		margin: 0 5px;
		font-size: 4rem;
	}
	.value h3 .otoku{
		margin-left: 5px;
		font-size: 2rem;
	}
	.value .value-box{
		margin-bottom: 20px;
		padding: 15px;
	}
	.value .value-box .txt{
		font-size: 2.2rem;
	}
	.value .pic-style{
		max-width: none;
		margin: 0 auto 40px;
	}
	.security_camera .pic-list{
		display: block;
		margin-bottom: 30px;
	}
	.security_camera .pic-list li{
		max-width: none;
		width: 100%;
	}
	.security_camera .pic-list li:nth-child(n+2){
		margin-top: 25px;
	}
	.line-box{
		display: block;
		max-width: none;
		padding: 35px 20px;
	}
	.line-box .txt{
		margin-bottom: 10px;
	}
	.line-box .btn-base._blank a span{
		display: flex;
		align-items: center;
		text-align: center;
		padding-left: 30px;
		line-height: 1.2;
	}
	.line-box .btn-base._blank a span::after{
		margin-left: 20px;
	}
	.line-box .btn-base._blank a:hover span::after{
		 background-image: url(../img/common/ico_file_w.svg);
	}
	.line-box .qr-code{
		width: 95px;
		margin: 0 auto 20px;
	}
	.line-box + .notes{
		max-width: 930px;
		margin-inline: auto;
	}


/* fee
-----------------------------------------------------------------*/
	.fee{
		padding: 50px 0 60px;
		font-size: 1.4rem;
	}
	.fee h2{
		margin-bottom: 30px;
	}
	.fee-box{
		padding: 35px 20px;
	}
	.fee-box h3{
		margin-bottom: 20px;
	}
	.feebox table tr{
		display: block;
		width: 100%;
	}
	table tr > *{
		border-right: none;
	}
	.fee-box table{
		margin: 0 auto 15px;
	}
	.fee-box table th{
		display: block;
		width: 100%;
		padding: 15px 20px;
		border-bottom: 1px solid #999;
	}
	.fee-box table td{
		display: block;
		width: 100%;
		padding: 15px 20px;
	}
	.fee-box table td strong{
		font-size: 4rem;
	}
	.fee-box table td em{
		display: block;
		margin-left: 0;
	}


/* flow
-----------------------------------------------------------------*/
	.flow{
		padding: 50px 0 60px;
		font-size: 1.4rem;
	}
	.flow h2{
		margin-bottom: 35px;
	}
	.flow .card-list li{
		padding: 35px 20px 30px;
	}
	.flow .card-list .txt-area{
		max-width: none;
	}
	.flow .card-list .pic{
		margin: 20px 0 0;
	}
	.flow .card-list h3{
		margin-bottom: 10px;
		font-size: 2.4rem;
		text-align: center;
	}
	.flow .card-list .txt{
		line-height: 1.6;
	}
	.flow .card-list .btn{
		margin: 15px 0 20px;
	}
	.flow .card-list.step01 .contact-info > div{
		display: block;
	}
	.flow .card-list.step01 .contact-info .tel{
		font-size: 2.4rem;
	}
	.flow .card-list.step01 .contact-info .businesshour{
		margin: 10px 0;
		font-size: 1.4rem;
	}
	.flow .card-list.step01 .contact-info .mobile{
		font-size: 1.4rem;
	}
	.flow .card-list.step01 .contact-info .mobile a{
    transform: translateY(-1px);
    margin-left: 2px;
		font-size: 1.7rem;
	}
  .flow .card-list + .arw{
    width: 60px;
    margin: 25px auto 20px;
  }
	.flow .notes-box{
		margin-top: 50px;
		padding: 40px 20px;
	}
	.flow .notes-box h3{
		margin-bottom: 10px;
		font-size: 1.6rem;
	}


/* faq
-----------------------------------------------------------------*/
	.faq{
		padding: 50px 0 60px;
	}
	.faq h2{
		margin-bottom: 35px;
	}

}