@charset "utf-8";

/**
 *
 * TOP: 総合トップページ
 *
 */


/*--------------------------------------------------------------------------
	サービス
--------------------------------------------------------------------------*/
.sec_service {padding:0;}
.sec_service .item {margin:0; position:relative;}

/* .ttl */
.sec_service .item .ttl{
	position: relative;
	width: 680px;
	height: 364px;
	display: table;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}
.sec_service .item._type02 .ttl {float: right;}
.sec_service .item._num01 .ttl {background: url(../images/service01_img.jpg) no-repeat 50% 50%;}
.sec_service .item._num02 .ttl {background: url(../images/service02_img.jpg) no-repeat 50% 50%;}
.sec_service .item._num03 .ttl {background: url(../images/service05_img.jpg) no-repeat 50% 50%;}
.sec_service .item._num04 .ttl {background: url(../images/service04_img.jpg) no-repeat 50% 50%;}
.sec_service .item._num06 .ttl {background: url(../images/service06_img.jpg) no-repeat 50% 50%;}
.sec_service .item._num07 .ttl {background: url(../images/service07_img.jpg) no-repeat 50% 50%;}

.sec_service .item .ttl {background-size: cover;}

.sec_service .item .ttl_inner{
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px;
}
.sec_service .item .ttl .bg{
	overflow: hidden;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px;
}
.sec_service .item .ttl .bg_inner {position:relative; width:100%; height:100%;}
.sec_service .item .ttl .bg .rect{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: #24d2f0;
	background: -webkit-linear-gradient(left, #24d2f0 0%, #05f4b4 100%);
	background: linear-gradient(to right, #24d2f0 0%,#05f4b4 100%);
	opacity: 0;
	filter: alpha(opacity=0);

}

.sec_service .item .ttl .bg .line{
	position: absolute;
	background: #fff;
}
.sec_service .item .ttl .bg .line.top,
.sec_service .item .ttl .bg .line.bottom{
	width: 0;
	/*width: 100%;*/
	height: 2px;
}
.sec_service .item .ttl .bg .line.left,
.sec_service .item .ttl .bg .line.right{
	height: 0;
	/*height: 100%;*/
	width: 2px;
}
.sec_service .item .ttl .bg .line.top{ top: 0; left: 0;}
.sec_service .item .ttl .bg .line.right{ top: 0; right: 0;}
.sec_service .item .ttl .bg .line.bottom{ bottom: 0; right: 0;}
.sec_service .item .ttl .bg .line.left{ bottom: 0; left: 0;}


.sec_service .item .ttl .bg .line.top   { transition: width .1s linear .3s;}
.sec_service .item .ttl .bg .line.right {transition: height .1s linear .2s;}
.sec_service .item .ttl .bg .line.bottom{ transition: width .1s linear .1s;}
.sec_service .item .ttl .bg .line.left  {transition: height .1s linear 0s;}

.sec_service .item.active .ttl .bg .line.top,
.sec_service .item.active .ttl .bg .line.bottom{ width: 100%;}
.sec_service .item.active .ttl .bg .line.right,
.sec_service .item.active .ttl .bg .line.left  { height: 100%;}

.sec_service .item.active .ttl .bg .line.top   { transition: width .1s linear;}
.sec_service .item.active .ttl .bg .line.right {transition: height .1s linear .1s;}
.sec_service .item.active .ttl .bg .line.bottom{ transition: width .1s linear .2s;}
.sec_service .item.active .ttl .bg .line.left  {transition: height .1s linear .3s;}

.sec_service .item.active .ttl .bg .rect{
	opacity: .3;
	transition: opacity .4s cubic-bezier(0.47, 0, 0.745, 0.715) .4s;
}

.sec_service .item .ttl p{
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -33px;
	text-align: center;
}
.sec_service .item .ttl p img{
	width: 366px;
	height: 66px;
}

/* .txt */
.sec_service .item .txt{
	z-index: 10;
	position: absolute;
	top: 0px;
	width: 408px; height:364px;
	/*width: 420px;*/
	text-align:left;
	/**/text-align: center;
	color: #000;
	-webkit-transform: rotateX(0) translateZ(0);
	        transform: rotateX(0) translateZ(0);
	background-color:#FFFFFF;
	/*background: url(../images/bg_polygon04.png) no-repeat;*/
	/*box-shadow:2px 2px 2px rgba(0,0,0, 0.2);*/
	background-size: cover;
	cursor: pointer; 
}
.sec_service .item._type01 .txt {right:0;}
.sec_service .item._type02 .txt {left:0;}
.bro_ie8 .sec_service .item .txt {background: url(../images/bg_polygon04.png);}
.sec_service .item .txt dl{
	display: table-cell;
	padding: 30px;
	min-height: 210px;
	vertical-align: middle;
}
.sec_service .item .txt dt {
	/**/margin-bottom:10px;
	/**/padding-bottom:10px;
	padding-top:40px;
	font-size: 18px;
}
.sec_service .item .txt dd {font-size:14px;}
.sec_service .item .txt dd.btn{
	margin-top: 25px;
	line-height: 1;
}
.sec_service dd.btn .cmn_btn_rotate._type02 a,
.sec_service dd.btn .cmn_btn_rotate._type02 span{
	height: 50px;
}
.sec_service dd.btn .cmn_btn_rotate .off{
	-webkit-transform: rotateX(0) translateZ(25px);
	        transform: rotateX(0) translateZ(25px);
}
.sec_service dd.btn .cmn_btn_rotate .cube .on{
	-webkit-transform: rotateX(-90deg) translateZ(-25px);
	        transform: rotateX(-90deg) translateZ(-25px);
}
.sec_service .item .txt dd.btn svg{
	max-width: 200px;
}
/* .bro_ie_mod */
.bro_ie_mod .sec_service dd.btn .cmn_btn_rotate .off{
	background: transparent;
}
/* .bro_ie8  */
.bro_ie8 .sec_service dd.btn .cmn_btn_rotate._type02{
	display: none;
}



/* @SP */
@media all and (max-width: 1024px){

	.sec_service {padding: 50px 0 0;}
	.sec_service h2 {padding-bottom: 30px;}
	.sec_service .item {margin: 0 -20px; text-align: center;}

	/* .ttl */
	.sec_service .item .ttl{
		position: relative;
		width: 100%;
		display: block;
		height: 400px;
	}
	.sec_service .item._type02 .ttl {float: none;}
	.sec_service .item .ttl .bg {padding: 5px;}
	.sec_service .item .ttl_inner {padding: 0;}

	.sec_service .item .ttl .bg .line.top,
	.sec_service .item .ttl .bg .line.bottom{
		height: 1px;
	}
	.sec_service .item .ttl .bg .line.left,
	.sec_service .item .ttl .bg .line.right{
		width: 1px;
	}

	.sec_service .item .ttl p{
		margin-top: -23px;
	}
	.sec_service .item .ttl p img{
		width: 255px;
		height: 46px;
	}

	/* .txt */
	.sec_service .item .txt{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	.sec_service .item .txt dl {
		display: block;
		padding: 30px 20px 35px;
	}
	.sec_service .item .txt dt {margin-bottom: 15px;}
	.sec_service .item .txt dd {line-height:1.7;}
	.sec_service .item .txt dd.btn {margin-top: 20px;}
	.sec_service .item .txt dd.btn svg {max-width: 100%;}

}