@charset "utf-8";

/**
 *
 *  会社を知る トップページ
 *　company
 */

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

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.company .page-ttl{
	margin-bottom: 45px;	
}
.message{
	height: 1687px;
	margin-top: -120px;
	background:url(../images/company/img_message.png) no-repeat center top;
		
}
.message .inner{
	position: relative;	
}
.message .card{
	position: absolute;
	width: 500px;
	height: 400px;
	background:#FFF;	
}
.message .card div{
	padding: 55px 60px 0 40px;
	transition:.3s;
}
.message .card a{
	display:block;
	min-height: 400px;
}
.message .card a:hover div{
	transform: translate(20px, 0);
}
.message .card h4{
	margin-bottom: 30px;
	font-size:143%;
	line-height:1.2;
}
.message .card .copy{
	margin-bottom: 30px;
	font-size:215%;
	font-weight:bold;	
}
.message .card .name{
	font-size:172%;
}
.message .card .name span{
	font-size:58%;
	display:block;
}
.message .card .btn{
	position: absolute;
	right:-30px;
	bottom:-30px;
	width: 350px;
	height: 65px;
	padding-top: 26px;
	text-align:center;
	line-height:0;
	transition:.3s;
}
.message .card a:hover .btn{
	padding-left: 20px;	
}
.message .card a:hover .btn:after{
	right:-37px;	
}
.message .card01{
	top:295px;
}
.message .card02{
	right:0;
	top:960px;
}

.other-contents{
	margin-top: -80px;	
}
.other-contents li{
	position: relative;
	float: left;
	margin-top: 80px;
	padding-bottom: 38px;	
}
.other-contents li+li{
	float: right;
	margin-top: -20px;	
}
.other-contents h4{
	font-size:172%;
	margin-bottom: 22px;
}
.other-contents .pic{
	width: 520px;
	height: 370px;
	overflow:hidden;
}
.other-contents .pic img{
	transition: transform 0.5s;
}
.other-contents a:hover .pic img{
	transform: scale(1.07);
}
.other-contents li .btn{
	position: absolute;
	right:-28px;
	bottom:0;
	width: 350px;
	height: 65px;
	text-align:center;
	padding-top: 24px;
	transition:.3s;	
}
.other-contents li a:hover .btn{
	padding-left: 20px;	
}
.other-contents li a:hover .btn:after{
	right:-37px;
}

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

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.company .page-ttl{
	margin-bottom: 20px;	
}
.message{
	height: 600px;
	margin-top: -70px;
	background:url(../images/company/img_message.png) no-repeat center top;
	background-size:auto 100%;
		
}
.message .card{
	width: 200px;
	height: 200px;
}
.message .card div{
	padding: 15px 10px 0;	
}
.message .card a{
	min-height: 200px;	
}
.message .card a:hover div{
	transform: translate(10px, 0);
}
.message .card h4{
	margin-bottom: 8px;
	font-size:100%;
	line-height:1.4;
}
.message .card .copy{
	margin-bottom: 8px;
	font-size:117%;
	font-weight:bold;
	line-height:1.4;	
}
.message .card .name{
	font-size:115%;
	line-height:1.4;
}
.message .card .name span{
	font-size:72%;
	display:block;
}
.message .card .btn{
	position: absolute;
	right:-5px;
	bottom:-18px;
	width: 150px;
	height: 35px;
	padding-top: 12px;
}
#Page .message .card .btn img{
	width: auto;
	height: 11px;	
}
.message .card a:hover .btn{
	padding-left: 10px;	
}
.message .card a: .btn:after{
	content:url(../images/common/ico_arrow_s_sp.png);
}
.message .card a:hover .btn:after{
	right:-20px;	
}
.message .card01{
	top:60px;
	left:20px;
}
.message .card02{
	right:20px;
	top:325px;
}

.other-contents{
	margin-top: -40px;	
}
.other-contents ul{
	padding: 0 10px;
}
.other-contents li{
	float: none;
	margin-top: 0;
	padding-bottom: 18px;	
}
.other-contents li+li{
	float: none;
	margin-top: 20px;	
}
.other-contents h4{
	font-size:115%;
	margin-bottom: 12px;
}
.other-contents .pic{
	width: 100%;
	height: auto;
	overflow:hidden;
}
.other-contents .pic img{
	transition: transform 0.5s;
}
.other-contents a:hover .pic img{
	transform: scale(1.07);
}
.other-contents li .btn{
	right:-5px;
	width: 175px;
	height: 35px;
	padding-top: 11px;
}
.other-contents li .btn:after{
	content:url(../images/common/ico_arrow_s_sp.png);	
}
#Page .other-contents li .btn img{
	width: auto;	
	height: 13px;
}
.other-contents li a:hover .btn{
	padding-left: 20px;	
}
.other-contents li a:hover .btn:after{
	right:-20px;
}



}