@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++
service	websecurity
++++++++++++++++++++++++++++++++++++++++++++++ */
.serviceDetailIntro {
	background:url(/service/websecurity/img/bg_title.jpg) #303c48 no-repeat 100% 50%;
	background-size: cover;
	color: #fff;
	}
@media only screen and (max-width:639px) {
.serviceDetailIntro {
	padding-top: 140px;
	background:url(/service/websecurity/img/bg_title.jpg) #303c48 no-repeat 100% -5%;
	background-size: auto 200px;
	}
}
	.serviceDetailIntro p{
		font-size: 1.125rem;
		margin-bottom: .5rem;
		}
	.serviceDetailIntro h1.top{
		color: #fff;
		font-weight: bold;
		}
		.serviceDetailIntro h1.top img{
			margin-bottom: 1rem;
			}
			/*トップの横並びのボタン*/
			.sl-top-flex-area{
				max-width:  560px;
				margin:0 auto ;
				display: flex;
				display: -webkit-flex;
				display: -moz-flex;
				justify-content: space-around;
				justify-content: -webkit-space-around;
				justify-content: -moz-space-around;
			}
			.sl-top-flex-area .flex-item{
				width:50%;
				max-width: 260px;
			}
			.sl-top-flex-area .flex-item .button.alert{
				width:100%;
				max-width: 260px;
			}
.serviceDetailIntro.mini{
	padding-top: 1.5rem;
	background:url(/service/websecurity/img/bg_title2.jpg) #303c48 no-repeat 100% 50%;
	}
@media only screen and (max-width:639px) {
.serviceDetailIntro.mini{
	min-height: 0;
	padding-top: 100px;
	background:url(/service/websecurity/img/bg_title2.jpg) #303c48 no-repeat 100% -5%;
	background-size: auto 100px;
	}
	.serviceDetailIntro.mini h1{
		margin-bottom: -.6rem;
		}
		/*トップの横並びのボタン*/
			.sl-top-flex-area{
				max-width:  560px;
				margin:0 auto ;
				display: block;
				margin-bottom: 20px;
			}
			.sl-top-flex-area .flex-item{
				width:70%;
				max-width: 260px;
				margin:0 auto ;
			}
			.sl-top-flex-area .flex-item .button.alert{
				width:100%;
				margin:.5rem 0;
			}

}
	.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; }

/* コンバージョンエリア -------------*/
.cv_area{
	margin:4rem auto 2rem;
	border:5px solid #333;
	background:#fff;
	}
.cv_area h3{
	color:#fff;
	padding:0.3rem 0;
	margin:0;
	background:#333;
	text-align:center;
	font-size:1.3rem;
	}
	.cv_area_top{background:#eee;padding-bottom:1rem;}
	.order_link{font-size:14px;}
	.cv_area_top .button{padding:1rem 6rem;font-size:1.6rem;margin:2rem 0 1rem;}
	.cv_links{
		width:100%;
		margin:0.7rem auto;}
	.cv_links li{
		border-right:1px solid #ccc;
		width:25%;
		float:left;
		padding:0.5rem 0rem;
		font-size:0.95rem;
		text-align:center;
		}
	.cv_links li:last-child{border:none;}

/* 見出し -------------*/
.h4-title-border{
	margin-bottom:1.5rem;
	padding:0.5rem 1rem;
	border:#999 1px solid;
	border-radius:3px;
	font-size:1.1rem;
	}
.h5-title-bg{
	margin-bottom:1rem;
	padding:0.5rem 1rem;
	border-radius:3px;
	font-size:1.0rem;
	background:#ece7e7;
	}

/* TOP -------------*/
.top-safety{
	margin-top: -1rem;
	padding: 3rem 0 1.5rem;
	}
	.top-safety h2{
		padding: .5rem;
		background: #b82126;
		color: #fff;
		}
	.top-safety .tit{
		margin-bottom: 1.5rem;
		padding-bottom: .2rem;
		font-size: 1rem;
		border-bottom: 1px solid #c4c4c4;
		}
	.top-safety .threat-ttl{
		margin-bottom: 1.5rem;
		padding-bottom: .2rem;
		font-size: 1rem;
		font-weight: 600;
	}
.top-example{
	}
	.top-example .button.hollow{
		border:none;
		}
	.top-example-section{
		min-height: 350px;
		margin-bottom: 20px;
	}
	.top-example-section .text{
		margin:0 20px;
	}
	.top-example .button.hollow:hover,
	.top-example .button.hollow:focus{
		background: #f6f6f6;
		}
	.top-example .button.hollow h3{
		margin: 0 0 1rem 0;
		}
		.top-example h3.top-example-ttl{
		margin: 0 0 1rem 0;
		text-align:center;
		}
	.top-example .text{
		color: #000;
		text-align: left;
		}
	.top-example .button.hollow .arrow{
		margin-bottom: 0;
		color: #b82126;
		font-weight: bold;
		}
	.top-example .button.hollow .arrow::before{
		margin-right: .2rem;
		content: url(../img/top/ico_arrow_red.png);
		}
		.top-example .button.to-diagnosis{
			padding: 1rem 6rem;
			font-size: 1.6rem;
			margin: 1rem 0;
		}
	.sitelock_movie{
		clear: both;
		padding: 3em 0 20px;
	}
	.sitelock_movie_ttl{
		margin-bottom:1em;
	}
	@media screen and (max-width: 460px) {

		.top-example .button.to-diagnosis{
			padding: 1rem 2rem;
			font-size: 1.2rem;
		}
		.sitelock_movie{
		width:95%;
		margin:0 auto;
		}
		.sitelock_movie iframe{
			width: 100%;
			height:  auto;
		}
	}

.top-function{
	padding: 4rem 0 2rem;
	background: url(../img/top/bg_function.jpg) #303c48 no-repeat 100% 0;
	color: #fff;
	}
	.top-function section{
		margin-bottom: 3rem;
		}
	.top-function h2,
	.top-function h5{
		color: #fff;
		}
	.top-function h2{
		padding-bottom: 2rem;
		}
	.top-function h5{
		margin: 1.2rem 0 -1rem 1rem;
		}
	@media screen and (max-width: 1000px) {
	.top-function h5{
		margin: 0 0 0 0;
		}
		}
	.top-function p{
		margin-top: 1rem;
		}
.top-info{

	}
	.top-info > dt{
		}
		.top-info > dt > span{
			margin-left: 1rem;
			padding: .4em .8em;
			border-radius: 1em;
			background: #666;
			color: #fff;
			font-weight: normal;
			}
		.top-info > dt > .news{
			background: #27b3b1;
			}
		.top-info > dt > .security{
			background: #ff9308;
			}
	.top-info > dd{
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom: 1px dotted #adadad;

		}

/* 料金 -------------*/
.price-fig table{
	width: 100%;
	min-width:900px;
	}
	@media screen and (max-width: 1000px) {
		.price-fig{
			overflow-x: scroll;
			}
	}
	.price-fig table thead th,
	.price-fig table thead td{
		border:1px solid #fff;
		}
	.price-fig table thead td{
		background: #fff;
		border-bottom:1px solid #ccc;
		}
	.price-fig table thead th{
		width:18%;
		margin-bottom: 0;
		padding: .8rem 0;
		background: #c1191f;
		color: #fff;
		font-size: 1.125rem;
		text-align: center;
		}
	.price-fig table tbody th,
	.price-fig table tbody td{
		border:1px solid #ccc;
		font-size: 0.875rem;
		}
	.price-fig table tbody td{
		text-align: center;
		}
.price-fig .num{
	font-size: 1.375rem;
	}
.price-fig .label{
	margin-right: 0.3rem;
	padding: 0.3rem;
	border-radius: 0.3rem;
	vertical-align: 2px;
	font-size:10px;
	}
.price-fig .none{
	display: block;
	width: 12px;
	height: 2px;
	margin: 15px auto;
	background: #333;
	}
.price-fig .circle{
	display: block;
	width: 24px;
	height: 24px;
	margin: 4px auto;
	border:3px solid #c1191f;
	border-radius: 50%;
	}
.has-tip{
	border-bottom:none;
	font-weight: normal;
	}
.has-tip img{
	margin-left: .2rem;
	vertical-align: top;
	}
.tooltip {
	max-width: 23rem !important;
	}
.label.alert{
	background: #2b2024;
	color: #fff;
	}

/* 機能詳細 -------------*/
.function-link{
	margin-top: 2rem;
}
.function-link > p{
	width: 13em;
	margin-bottom: 0;
	padding: .3em .5em;
	background: #303c48;
	color: #fff;
	font-size: 1.25rem;
	text-align: center;
	}
.function-link > ul{
	padding: 1rem 1.5rem;
	background: #f2f2f2;
	border-top:1px solid #303c48;
	}
	.function-link > ul > li{
		display: inline-block;
		margin: .5rem 0;
		padding: 0 .5rem;
		line-height: 1;
		white-space: nowrap;
		font-size: 1rem;
		border-left:1px solid #a5a4a4;
		}
	.function-link > ul > li:last-child{
		border-right:1px solid #a5a4a4;
		}
.function-detail{
	margin-top: -39px;
	padding-top: 39px;
	}
.function-detail .dot-line{
	margin-bottom: 2rem;
	border-bottom:1px dotted #adadad;
	}
	.function-detail h3{
		margin: 0 0 .2rem;
		}
	.function-detail h4{
		margin: 0;
		display: inline;
		font-size: 1.125rem;
		}
		.function-detail h4>span{
			font-size: .875rem;
		}
		.function-detail h4>span::before{
			content: '<';
			margin-left: .5em;
			}
		.function-detail h4>span::after{
			content: '>';
			}
	.function-detail .schedule dt,
	.function-detail .schedule dd{
		display: inline-block;		
		}
	.function-detail .schedule dt{
		font-weight: normal;
		font-size: .75rem;
		}
	.function-detail .schedule dd{
		margin-top: 1em;
		padding: .2em .8em;
		background: #ccc;
		color: #fff;
		font-size: .75rem;
		border-radius: 1em;
		}
.function-detail .pic{
	margin-bottom: 1rem;
	}
.function-detail .capture{
	box-shadow:4px 4px 0 0 #666;
	}
.modal-capture{
	margin-bottom: 2rem;
	padding: 2rem 2rem 1rem; 
	background: #f3f3f3;
	}
	.modal-capture .pic{
		border:1px solid #ccc;
	}
	.modal-capture ul{
		padding-left: 1rem;
		}
		.modal-capture ul li{
			margin-bottom: 1em;
			padding-left: 1em;
			text-indent: -1rem;
			}
/* 診断内容 ----------------*/
.em {
	color:#b82126;
	font-weight: bold;
}
.diagnosis-list li {
	display: inline-block ;
	background: #2f3a46;
	color:#fff;
	padding: 0.1rem 1rem;
	border-radius: 4rem;
	margin-bottom: 0.5rem;
}

.diagnosis-fig table {
    min-width: 900px;
    width: 100%;
}
@media screen and (max-width: 1000px) {
.diagnosis-fig {
    overflow-x: scroll;
}
}
.diagnosis-fig table tbody tr {
	background: #fff;
}
.diagnosis-fig table thead th, .diagnosis-fig table thead td {
    border: 1px solid #fff;
}
.diagnosis-fig table thead td {
    background: #c1191f none repeat scroll 0 0;
	color: #fff;
    border-bottom: 1px solid #ccc;
	text-align: center;
	font-size: 1.125rem;
	 width: 38%;
}
.diagnosis-fig table thead th {
    background: #666666 none repeat scroll 0 0;
    color: #fff;
    margin-bottom: 0;
    text-align: center;
    width: 18%;
}
.diagnosis-fig table tbody th, .diagnosis-fig table tbody td {
    border: 1px solid #ccc;
    font-size: 0.875rem;
}
.diagnosis-fig table tbody td {
    text-align: center;
}
.diagnosis-fig table tbody th.em,.diagnosis-fig table tbody td.em {
	background: #f9e6e9;
}
.diagnosis-fig table tbody th.em{
	color:#333;
	font-size:1rem;
}
.diagnosis-fig table tbody td.em {
	color: #b82126;
	font-size:1rem;
}
.diagnosis-fig table tbody td.em span {
	font-size:0.875rem;
	font-weight: normal;
}


/* 脅威と対策 -------------*/
.threat-list{
	margin-top: 1rem;
	}
.threat-list:nth-child(2){
	margin-top: 4rem;
	}
	.threat-list a{
		display: block;
		overflow: hidden;
		}
	.threat-list .pic{
		overflow: hidden;
		}
		.threat-list .pic > img{
			transition: all .2s ease-out;
			}
		.threat-list a:hover .pic > img{
			opacity: .8;
			transform: scale(1.05);
			}
	.threat-list h3{
		margin-top:0;
		}
	.threat-list .text{
		color: #333;
		display: inline;
		}
	.threat-list .more{
		display: inline;
		margin-left: 1rem;
		padding-left:0.7rem;
		background:url(/img/icon_foot_arrow.png) no-repeat left 50%;
		color: #333;
		}
	.threat-list hr{
		border-bottom-style:dotted;
		}
	.threat-list a:hover h3,
	.threat-list a:hover .text,
	.threat-list a:hover .more{
		color: #005bac;
		}
	.threat-list a:hover h3{
		text-decoration: underline;
	}
.threat-detail h2{
	padding-bottom: 1rem;
	border-bottom:1px solid #a5a4a4;;
	}
.threat-detail .text > p{
	font-size: 1rem;
	}
.threat-catch{
	margin-top: -1rem;
	margin-bottom: .5rem;
	font-size: 26px;
	font-weight: bold;
	}
	.threat-catch > span{
		font-size: 80px;
		color: #b21b20;
		}

/* お申し込み -------------*/
.order_flow{
	display: table;
	width: 100%;
	padding: 2rem 0;
	}
	.order_flow > li{
		position: relative;
		display: table-cell;
		width: 27%;
		padding-left: 2%;
		border-right: 5px solid #f6f6f6;
		height: 150px;
		vertical-align: middle;
		background: #b6242c;
		color: #fff;
		font-size: 1.125rem;
		}
	.order_flow > li::after{
		display: block;
		position: absolute;
		top:0;
		right: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 75px 0 76px 46px;
		border-color: transparent transparent transparent #b6242b;
		content: '';
		background: #f6f6f6;
		}
@media only screen and (max-width:900px) {
	.order_flow > li{
		width: 25%;
		font-size: 1rem;
		}
	.order_flow > li::after{
		display: none;
		}
}
	.order_flow > li:last-child{
		width: auto;
		line-height: 142px;
		border-right: 0;
		background: #fff;
		border:4px solid #b6242c;
		border-radius: 4px;
		color: #b6242c;
		}
	.order_flow > li:last-child::after{
		display: none;
		}
		.order_flow > li > strong{
			display: block;
			font-size: 1.25rem;
			margin-bottom: 1rem;
			font-weight: normal;
			}
.order_info section{
	padding-bottom: 1rem;
	}

/* websecurityトップページ　テキストリンクcss -------------*/
.a_text_white{color: #fff;}
.a_text_white:hover{
	text-decoration: none;
	color: #fff;
}
/* 20170412 websecurityトップページ　一行ニュース設置css -------------*/
.sitelock_index_headline {
background-color: #fff;
padding-bottom:2.15rem;
}
.sitelock_index_headline > .icon-new {
    margin-right: 2rem;
}
/* 20170412 websecurityトップページ　バナー設置css -------------*/
.top_banner:hover img{opacity:0.8;}

/* 20170913 診断内容ページ改修css -------------*/
.diagnosis-block{
	padding:1rem;
	border:1px solid #ccc;
	min-height: 230px;
	margin-bottom: 1rem;
}
.ttl-h4-diagnosis{
	font-weight: bold;
	font-size: 1.1rem;
}

/* 20171016 スマホはみ出し修正  -------------*/
.sp-correction{
	word-wrap: break-word;
}

/*文言修正による段落ずれ修正*/
.large-10.meidium-10.small-10.column {
    height: 10%;
}
/*20171213 テキスト幅調節*/
@media screen and (min-width:870px){
	.text-margin{
		width: 81.5%;
		margin: auto;
	}
	
}

@media screen and (min-width:770px){
	.text-margin1{
		width: 71.5%;
		margin: auto;
	}
	
}

.sitelock,.sitelock-managed,.sitelock-report,.sitelock-cdn {
	border: solid 6px;
	background: #fff;
}
.sitelock {
	border-color: #b82126;
	margin-bottom: 4rem;
}
.sitelock-managed {
	border-color: #50486e;
}
.sitelock-report{
	border-color: #1bb2a9;		
}
.sitelock-cdn{
	border-color: #ea8136;
}
.sitelock .ico_no1,.sitelock-cdn .ico_no1 {
	margin-top: 1rem;
	margin-bottom: 0;
}
.sitelock h2,.sitelock-cdn h2 {
	font-size: 1.2rem;
	font-weight: bold;
	padding-right:0;
	padding-top:1.5rem;
	margin-bottom: 1.3rem;
	text-align: left;
}
.sitelock .price,.sitelock-cdn .price {
	font-size: 1.3rem;
} 
.sitelock .price span,.sitelock-cdn .price span {
	font-size: 1.8rem;
	font-weight: bold;
} 
.sitelock .list {
	margin-top: 5rem;
}
.sitelock-cdn .list {
	margin-top: 2rem;
}
.sitelock .list li,.sitelock-cdn .list li {
	background: url(../img/ico_check.png) no-repeat left top;
	font-size: 1rem;
	margin-bottom: .3rem;
	text-align: left;
	padding-left:2rem; 
}
a.link_sitelock,a.link_sitelock-managed,a.link_sitelock-report,a.link_sitelock-cdn {
	text-decoration: none;
	color: #333;
}
.link_sitelock .btn {
	color: #fff;
	border:solid 2px #b82126;
	border-radius: .25rem;
	padding: .5rem 2rem; 
	background: #b82126;
	width: 50%;
	margin: 0 auto;
}
a.link_sitelock:hover .btn {
	color: #b82126 !important;
	border:solid 2px #b82126;
	border-radius: .25rem;
	padding: .5rem 2rem;
	background: #fef0f0;
}
a.link_sitelock:hover .sitelock {
	background: #fef0f0 !important;
}

.link_sitelock-managed .btn {
	color: #fff;
	border:solid 2px #50486e;
	border-radius: .25rem;
	padding: .5rem 2rem; 
	background: #50486e;
	width: 50%;
	margin: 0 auto;
}
a.link_sitelock-managed:hover .btn {
	color: #50486e !important;
	border:solid 2px #50486e;
	border-radius: .25rem;
	padding: .5rem 2rem;
	background: #ebecf9;
}
a.link_sitelock-managed:hover .sitelock-managed {
	background: #ebecf9 !important;
}

.link_sitelock-report .btn {
	color: #fff;
	border:solid 2px #1bb2a9;
	border-radius: .25rem;
	padding: .5rem 2rem; 
	background: #1bb2a9;
	width: 50%;
	margin: 0 auto;
}
a.link_sitelock-report:hover .btn {
	color: #1bb2a9 !important;
	border:solid 2px #1bb2a9;
	border-radius: .25rem;
	padding: .5rem 2rem;
	background: #eef8f7;
}
a.link_sitelock-report:hover .sitelock-report {
	background: #eef8f7 !important;
}
.link_sitelock-cdn .btn {
	color: #fff;
	border:solid 2px #ea8136;
	border-radius: .25rem;
	padding: .5rem 2rem; 
	background: #ea8136;
	width: 50%;
	margin: 0 auto;
}
a.link_sitelock-cdn:hover .btn {
	color: #ea8136 !important;
	border:solid 2px #ea8136;
	border-radius: .25rem;
	padding: .5rem 2rem;
	background: #fbe8db;
}
a.link_sitelock-cdn:hover .sitelock-cdn {
	background: #fbe8db !important;
}


.sitelock-managed h2,.sitelock-report h2 {	
	font-weight: bold;
	font-size: 0.9rem;
    margin-bottom: 10px;
    padding-top: 15px;
}
.sitelock-managed .price,.sitelock-report .price {
	font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1rem;
    margin-top: 6px;
}
.sitelock-managed .price span,.sitelock-report .price span {
	font-size: 1.3rem;
	font-weight: bold;
}
.sitelock-managed .list,.sitelock-report .list {
	margin-left: 5rem;
}
.sitelock-managed .list li,.sitelock-report .list li {
	background: url(../img/ico_check_mini.png) no-repeat left center;
	font-size: 1rem;
	margin-bottom: .3rem;
	text-align: left;
	padding-left:2rem; 
}