@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++
service	websecurity
++++++++++++++++++++++++++++++++++++++++++++++ */

@font-face {
	font-family: 'D-DIN-PRO';
	src: url('/font/d-din-pro.woff') format('woff');
}

a.link_arrow {
	background: url(/img/icon_arrow.png) no-repeat left 0.3rem;
	padding: 0 0 0 0.7rem;
}

small {
	display: inline-block;
	line-height: 1.4;
}

.serviceDetailIntro {
	padding-top: 4rem;
	background: url(/service/shindan/img/bg_title.jpg?20250303) #0E193A no-repeat 100% 50%;
	background-size: cover;
	color: #fff;
	position: relative;
}

.serviceDetailIntro p {
	font-size: 1.125rem;
	margin-bottom: .5rem;
}

.serviceDetailIntro h1.top {
	color: #fff;
	font-weight: bold;
}

.serviceDetailIntro h1.top img {
	margin-bottom: 1rem;
}

.serviceDetailIntro .security_badge {
	width: 100px;
	position: absolute;
	top: 2rem;
	right: 2rem;
}

@media only screen and (max-width:525px) {
	.serviceDetailIntro .security_badge {
		top: .5rem;
		right: .5rem;
	}
}

@media only screen and (min-width:728px) and (max-width:950px) {
	.serviceDetailIntro .security_badge {
		top: 12rem;
		right: 3rem;
	}
}


.serviceDetailIntro.mini {
	padding-top: 1.5rem;
	background: url(/service/shindan/img/bg_title2.jpg) #464156 no-repeat 100% 50%;
}

@media only screen and (max-width:767px) {
	.serviceDetailIntro {
		margin-top: 40px;
		padding-top: 8rem;
		/*128px*/
		background: url(/service/shindan/img/bg_sp_title.png) #0E193A no-repeat 100% 0%;
		background-size: auto 200px;
	}

	.serviceDetailIntro .top {
		margin: 0 1rem;
		font-size: 0.875rem;
		/*14px*/
	}

	.serviceDetailIntro h1.top {
		font-size: 1.5rem;
		/*24px*/
	}
}

@media only screen and (min-width:768px) {
	.sp_br {
		display: none;
	}
}

.serviceDetailIntro.mini h1 .subheader {
	color: #fff;
	font-size: 18px !important;
}

.serviceDetailIntro.mini h1 img {
	zoom: 1;
}

.sectionEnd {
	display: block;
	clear: both;
	width: 0;
	height: 0;
	margin-bottom: 3rem;
	border: 0;
}

.fixed .serviceSubNav .serviceLogo {
	margin-top: 1rem;
}

.sp-ServiceNav button.menu-icon {
	margin-top: 0.75rem;
}

/* 見出し -------------*/
.ttl-h2 {
	padding: 0 0.75rem;
	font-weight: bold;
	margin-bottom: 2.2rem;
	/*35px*/
	font-size: 2.5rem;
	/*40px*/
}

.ttl-h3 {
	padding: 0 0.75rem;
	font-weight: bold;
	margin-top: 2rem;
	margin-bottom: 2rem;
	/*32px*/
	font-size: 1.75rem;
	/*28px*/
}

.ttl-h4 {
	padding: 0 0.75rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 1.9rem;
	/*30px*/
	font-size: 1.25rem;
	/*20px*/
}

@media only screen and (max-width:768px) {
	.ttl-h2 {
		margin-bottom: 1.25rem;
		/*20px*/
		font-size: 1.75rem;
		/*28px*/
	}

	.ttl-h3 {
		margin-bottom: 1.125rem;
		/*18px*/
		font-size: 1.5rem;
		/*24px*/
	}
}

/* TOP -------------*/

#feature {
	margin-top: 3rem;
}

#feature h2 {
	margin-bottom: 1rem;
	font-size: 1.125rem;
	/*18px*/
}

@media only screen and (min-width:768px) {
	#feature .row {
		display: flex;
		align-items: center;
		margin-bottom: 4rem;
	}

	#feature h2 {
		margin-bottom: 0;
		padding: .5rem;
		font-size: 1.75rem;
		/*28px*/
	}
}

@media only screen and (max-width:768px) {
	#feature {
		margin-bottom: 3rem;
	}
}

/* 診断結果 -------------*/
#result {
	padding-top: 4rem;
	padding-bottom: 4rem;
	/*background: rgba(67,88,104,0.05);*/
}

#result h3 {
	margin-top: 1.9rem;
}

#result tbody tr {
	line-height: 35px;
}

#result tbody tr td:first-child {
	font-weight: bold;
	font-size: 1.125rem;
}

#result .area_netde {
	margin-bottom: 2.5rem;
	/*40px*/
}

#result .area_netde>div {
	padding: 2rem;
	border-radius: 3px;
	border: 1px solid #EEEEEE;
	box-shadow: 0 0 10px 0 rgba(67, 88, 104, 0.1);
}

#result .area_netde h2 {
	margin-bottom: 1.5rem;
}

@media only screen and (max-width:768px) {
	#result .area_netde {
		margin: 0 1rem 2rem;
	}

	#result .area_netde>div {
		padding: 1rem 1.25rem;
	}

	#result .area_netde h2 {
		margin-bottom: 1rem;
	}
}

#result .area_netde p:last-child {
	margin-bottom: 0;
}

/* 料金 -------------*/
.price-fig table {
	width: 100%;
	min-width: 900px;
}

@media screen and (max-width: 1000px) {
	.price-fig {
		overflow-x: scroll;
	}
}

.price-fig table thead th {
	margin-bottom: 0;
	padding: .8rem 0;
	background: #435868;
	color: #fff;
	font-size: 0.875rem;
	text-align: center;
	border: 1px solid #EEEEEE;
}

.price-fig table thead th.name {
	width: 25%;
}

.price-fig table thead th.cont {
	width: 55%;
}

.price-fig table thead th.price,
.price-fig table thead th.term {
	width: 10%;
}

.price-fig table tbody tr:nth-child(even) {
	background: #fff;
}

.price-fig table tbody th,
.price-fig table tbody td {
	border: 1px solid #eee;
	font-size: 0.875rem;
}

.price-fig table tbody th {
	background: rgba(67, 88, 104, 0.1);
}

.price-fig table tbody td p {
	line-height: 1.3;
}

/*CV ------------*/
/*.area_cv{
	margin-bottom: 3rem;
}*/

.area_cv .button {
	padding: 1rem 6rem;
	font-size: 1.6rem;
	margin: 2rem 0 1rem;
}

@media only screen and (max-width:768px) {
	.area_cv {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	.area_cv .button {
		padding: 1rem 3rem;
		font-size: 1.125rem;
		/*18px*/
		margin: 0 1rem;
	}
}

/*ご利用までの流れ ------------*/
#flow {
	padding: 3rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
	background: rgba(0, 154, 243, 0.03);
}

@media only screen and (max-width:768px) {

	/*#flow{
		padding: 0px;
	}*/
	#flow ul {
		margin-bottom: 0;
	}
}

#flow ul {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}

#flow li {
	counter-increment: count;
	margin-bottom: 2rem;
}

#flow li .area_flow_cont {
	padding: 1rem;
	height: 100%;
	background: #fff;
	border: 1px solid #009AF3;
	border-radius: 4px;
}

#flow li .area_flow_cont.company {
	border: 1px solid #1264A0;
}

#flow span.label_item {
	padding: 0.25rem 1rem 0.25rem 2.5rem;
	font-size: 0.875rem;
	/*14px*/
	font-weight: bold;
	position: relative;
	border: 2px solid #009AF3;
	border-radius: 40px;
	color: #009AF3;
}

#flow span.label_item:before {
	content: counter(count);
	background: #009AF3;
	padding: 0 .5rem;
	line-height: 120%;
	min-height: 100%;
	/* height: 100%; */
	color: #fff;
	border-radius: 45% 0 0 45%;
	position: absolute;
	left: -2px;
	top: 0px;
	border: 2.7px solid #009AF3;
	display: flex;
	align-items: center;
}

#flow li .area_flow_cont.company span.label_item:before {
	background: #1264A0;
	border: 2.7px solid #1264A0;
}

#flow .company span.label_item {
	border-color: #1264A0;
}


/*#flow .customer span.label_item{
	color: #0E193A;
}*/
#flow .company span.label_item {
	color: #1264A0;
}


#flow li h2 {
	margin-bottom: .25rem;
	font-size: 1rem;
}

#flow li h2.yusyo {
	display: flex;
	align-items: center;
	gap: 4px;
}

@media only screen and (max-width:768px) {
	#flow li h2.yusyo {
		flex-direction: column;
	}
}

#flow li h2.yusyo .label-price {
	padding: 0 4px;
	background: #E30044;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
}

#flow li h2.yusyo .label-price .num {
	align-self: stretch;
	font-family: D-DIN-PRO;
}


#flow li p {
	margin-bottom: 0;
	line-height: 1.5;
	font-size: .875rem;
	/*14px*/
}

#flow a.link_arrow {
	background: url(/img/icon_arrow.png) no-repeat left 0.3rem;
	padding: 0 0 0 0.4rem;
}

#flow .flow-img img {
	margin: .5rem 0;
	width: 64px;
	height: 64px;
}

#flow li .area_flow_cont hr {
	margin: .5rem auto;
}

/* 設定代行 作業一例 -------------*/
#example {
	padding-top: 4rem;
	padding-bottom: 4rem;
	/*background: rgba(67,88,104,0.05);*/
}

#example .price-fig table thead th.name {
	width: 34%;
}

/* 設定代行サービス一覧 -------------*/
#service {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background: rgba(67, 88, 104, 0.05);
}

#cv_area {
	padding: 4rem 0;
	background: url(/service/shindan/img/bg_cv_area.jpg?20250304) #0E193A no-repeat 100% 50%;
	background-size: cover;
}

#cv_area h2 {
	color: #fff;
	margin-bottom: 1.5rem;
}

#cv_area h3 {
	color: #fff;
	margin-top: 1.5rem;
	margin-bottom: .75rem;
}

#cv_area .hukidashi_area {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

#cv_area .hukidashi {
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: .5rem 1rem;
	min-width: 120px;
	max-width: 100%;
	color: #0F1D40;
	font-size: 1rem;
	background: #fff;
}

#cv_area .hukidashi:first-child::before {
	content: "";
	position: absolute;
	top: 99%;
	left: 75%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fff;
}

#cv_area .hukidashi::before {
	content: "";
	position: absolute;
	top: 99%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fff;
}

#cv_area .hukidashi:last-child::before {
	content: "";
	position: absolute;
	top: 99%;
	left: 25%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fff;
}

@media only screen and (max-width:768px) {
	#cv_area .hukidashi_area {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	#cv_area .hukidashi {
		margin-right: 1rem;
		margin-left: 1rem;
	}

	#cv_area .hukidashi::before {
		content: "";
		display: none;
	}
}

#cv_area .hukidashi strong {
	color: #E30044;
}