@charset "UTF-8";

@import "/datarecovery/include/css/import.pc.css";

@import "voice.pc.css";



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

	CSS Document bg

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



#bg {

	background: url(../top/bg_01.png) fixed top;

}



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

	CSS Document main_slick

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



#main_slick {

	height: 496px;

	font-size: 0;

	position: relative;

	z-index: 0;

}



#main_slick:after {

	content: '';

	width: 972px;

	height: 44px;

	background: url(../top/visual_bg.png) no-repeat center !important;

	transform: translateX(-50%);

	position: absolute;

	left: 50%;

	bottom: -2px;

	z-index: 3;

}



#main_slick .article {

	height: 496px;

	font-size: 0;

	position: relative;

	z-index: 0;

}



#main_slick .article:before,

#main_slick .article:after {

	content: '';

	width: calc(50% - 510px);

	height: 496px;

	overflow: hidden;

	background: rgba(0, 0, 0, 0.4);

	position: absolute;

	top: 0;

	z-index: 2;

}



#main_slick .article:before {

	left: 0;

}



#main_slick .article:after {

	right: 0;

}



#main_slick .slide {

	height: 496px;

	overflow: hidden;

}



#main_slick .slide a {

	opacity: 1;

}



#main_slick .slick-arrow {

	width: 44px;

	height: 44px;

	border-top: solid 5px rgba(255, 255, 255, 0.5);

	border-right: solid 5px rgba(255, 255, 255, 0.5);

	background: none;

	font-size: 0;

	position: absolute;

	transform: translateY(-50%);

	top: 50%;

	z-index: 3;

}



#main_slick .slick-arrow:hover {

	border-top-color: #fff;

	border-right-color: #fff;

	opacity: 1;

}



#main_slick .slick-prev {

	margin-right: 500px;

	right: 50%;

	transform: rotate(-135deg);

}



#main_slick .slick-next {

	margin-left: 500px;

	left: 50%;

	transform: rotate(45deg);

}



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

	CSS Document top > reason

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



#reason {

	margin-bottom: 50px;

}



#reason h2 {

	margin-bottom: 50px;

	font-weight: normal;

	font-size: 35px;

	line-height: 1;

}



#reason h2 br {

	display: none;

}



#reason ul {

	margin-bottom: 50px;

}



#reason li {

	float: left;

	width: 125px;

	margin-right: 23px;

	font-size: 12px;

	line-height: 18px;

	color: #777;

	position: relative;

}



#reason li:before {

	content: '';

	display: block;

	width: 125px;

	height: 70px;

	margin-bottom: 10px;

	border-bottom: solid 1px #c3c3c3;

}



#reason li.nth1:before {

	background: url(../top/reason_01.png) no-repeat center;

}



#reason li.nth2:before {

	background: url(../top/reason_02.png) no-repeat center;

}



#reason li.nth3:before {

	background: url(../top/reason_03.png) no-repeat center;

}



#reason li.nth4:before {

	background: url(../top/reason_04.png) no-repeat center;

}



#reason li.nth5:before {

	background: url(../top/reason_05.png) no-repeat center;

}



#reason li.nth6:before {

	background: url(../top/reason_06.png) no-repeat center;

}



#reason li.nth7:before {

	background: url(../top/reason_07.png) no-repeat center;

}



#reason li.nth7 {

	margin-right: 0;

}



#reason .btn a {

	height: 43px;

	padding: 0 40px;

	border-radius: 42px;

	background: #1e4580;

	line-height: 40px;

}



#reason .btn a:before {

	display: inline-block;

	vertical-align: top;

	content: '';

	width: 15px;

	height: 42px;

	background: url(../top/reason_arrow.png) no-repeat left;

}



#reason .btn a:after {

	display: none;

}



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

	CSS Document top > flow

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



#flow {

	margin-bottom: 50px;

}



#flow h2 {

	margin-bottom: 50px;

	font-weight: normal;

	font-size: 35px;

	line-height: 1;

}



#flow h2 br {

	display: none;

}



#flow li {

	float: left;

	width: 210px;

	height: 145px;

	padding-top: 40px;

	padding-right: 65px;

	color: #fff;

	position: relative;

}



#flow li span {

	display: block;

	font-weight: bold;

	font-size: 17px;

}



#flow li:after {

	content: '';

	display: inline-block;

	vertical-align: 0;

	width: 13px;

	height: 13px;

	margin-top: -5px;

	border-top: solid 2px #cecece;

	border-right: solid 2px #cecece;

	-webkit-transform: rotate(45deg);

	transform: rotate(45deg);

	position: absolute;

	top: 50%;

	right: 30px;

}



#flow li.nth1 {

	background: url(../top/flow_01.png) no-repeat 0 0;

}



#flow li.nth2 {

	background: url(../top/flow_02.png) no-repeat 0 0;

}



#flow li.nth3 {

	background: url(../top/flow_03.png) no-repeat 0 0;

}



#flow li.nth4 {

	background: url(../top/flow_04.png) no-repeat 0 0;

}



#flow li.nth5 {

	width: 145px;

	padding-right: 0;

	background: url(../top/flow_05.png) no-repeat 0 0;

}



#flow li.nth5:after {

	display: none;

}



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

	CSS Document top > service

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



#service {

	margin-top: -44px;

	padding: 110px 0;

	background: url(../top/bg_03.png) no-repeat center top;

	color: #fff;

}



#service h2 {

	margin-bottom: 50px;

	font-weight: normal;

	font-size: 44px;

	line-height: 1;

}



#service h2 span {

	color: #d52233;

}



#service li {

	display: inline-block;

	width: 33%;

	height: 80px;

	padding-top: 5px;

	padding-left: 100px;

	background: url(../top/service_01.png) no-repeat left top;

	vertical-align: top;

	text-align: left;

}



#service li.nth1 span ,

#service li.nth2 span {

	display: block;

	font-size: 19px;

}



#service li.nth1 a {

	display: block;

	text-decoration: none;

	font-size: 28px;

	color: #fff;

}



#service li.nth2 {

	background: url(../top/service_02.png) no-repeat left top;

}



#service li.nth3 {

	background: url(../top/service_03.png) no-repeat left top;

}



#service li.nth3 a {

	display: block;

	text-decoration: none;

	font-size: 19px;

	color: #fff;

}



#service li.nth3:hover {

	opacity: 0.8;

	filter: Alpha(opacity=80);

}



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

	CSS Document footer

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



#footer {

	margin-top: 0;

}