@charset "utf-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

各採用トップ CSS
KeyColor : #c7000b

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

div#page {
padding: 0;
}

h3 {
display:block;
margin: 0 auto 40px;
padding: 40px 0 18px;
color: #000;
font-size: 4rem;
font-weight: bold;
text-align:center;
position: relative;
}
.mainWidth h3 {
margin: 0 auto 40px;
}
h3::after {
position: absolute;
margin: 0 auto;
content: "";
bottom: 0;
left: 0;
right: 0;
width: 50px;
height: 3px;
background-color: #c7000b;
}
.subttl {
font-size: 2rem;
text-align:center;
margin: 0 auto 40px;
}

img.sp {
display: none;
}

.recmessage {
padding: 50px 0;
margin: 25px 0 0;
border-top: #CCC 1px solid;
}
.new .recmessage {
padding: 50px 0;
margin: 0;
border: none;
}
.new .recmessage + .recmessage {
	padding-top: 0;
}

.recmessage a p {
transition: all .5s;
}
.recmessage a:hover p {
color: rgba(255,255,255,0.5);
}

.recmessage a {
display:block;
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
}
.recmessage a.banner {
margin-top:50px;
transition:opacity 0.3s;
}
.recmessage a.banner:hover {
opacity:0.6;
}
.recmessage a img {
width: 100%;
height: auto;

}
.recmessage a p {
display:inline-block;
font-size: 3.4rem;
font-weight: bold;
text-align: center;
vertical-align: middle;
color:#FFF;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.grayback {
background-color:#F3F3F3;
}
.contWrap a {
display:block;
position: relative;
}
.contWrap a img {
width: 100%;
height: auto;
}
.contWrap.about a {
width: 50%;
margin: 0;
float: left;
position: relative;
}
.contWrap.about a::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .2);
z-index: 2;
transition: all .5s;
}
.contWrap.about a:hover::before {
opacity: 0;
}
.contWrap.about a p {
display: block;
width: 100%;
color: #FFF;
font-size: 3rem;
font-weight: bold;
text-align: center;
line-height: 1.4;
margin: auto;
padding: 0 20px;
position: absolute;
top: 50%;
left: 0;
z-index: 3;
transform: translateY(-50%);
}
.contWrap.work a p, .contWrap.style a p {
display:inline-block;
font-size: 2.6rem;
text-align: center;
vertical-align: middle;
color:#FFF;
margin: auto;
padding:16px 24px;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
background: #000;
transition: opacity .5s;
}
.contWrap.work a:hover p, .contWrap.style a:hover p {
opacity: 1;
}
.contWrap.information {
overflow: hidden;
}
.contWrap.information ul {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 13px 40px;
}
.contWrap.information ul li {
display: block;
width: 25%;
padding: 0 7px 14px;
float: left;
}



.contWrap.information2 ul {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 13px 40px;
}

.contWrap.information2 ul li {
display: block;
width: 33.333333%;
padding: 0 7px 14px;
float: left;
}

.contWrap.information3 ul {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 13px 40px;
}

.contWrap.information3 ul li {
display: block;
width: 24%;
padding: 0 7px 14px;	
float: left;
}


.new .contWrap.information ul li {
width: 33.333333%;
}
.contWrap.information ul lia {
display: block;
}
.contWrap.information ul li p {
display:block;
width:100%;
height:180px;
margin:0;
padding: 0;
text-align:center;
background-color: #cbc5c552;
position: relative;
}
.contWrap.information ul li p span {
display:inline-block;
width: 100%;
padding: 0 10px;
font-size: 2rem;
text-align: center;
vertical-align: middle;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .5s;
}
.contWrap.information ul li a:hover p span {
color:#AAA;
}



@media screen and (max-width: 768px) {
.contWrap.work a p, .contWrap.style a p {
opacity: 1;
}
}

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

h3 {
font-size: 3.5rem;
}
.subttl{
font-size: 2rem;
}

.recmessage a p {
font-size: 2.6rem;
}
.contWrap.about a {
width: 100%;
}
.contWrap.about a p {
font-size: 2.6rem;
}

.contWrap.information ul li p {
height:150px;
}
.contWrap.information ul li p span {
font-size: 1.8rem;
}
}

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

.contWrap.information ul li,
.new .contWrap.information ul li,
.handicap .contWrap.information ul li {
width: 50%;
}

.recmessage {
margin: 0;
}

}

@media screen and (max-width: 480px) {
img.sp {
display: block;
}

img.pc {
display: none;
}

h3 {
font-size: 2.6rem;
}
.subttl{
font-size: 1.6rem;
}

.recmessage a p {
	font-size: 2.2rem;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	transform: translate(0, -60%);
}
.recmessage a.banner {
margin: 50px 20px 0;
}
.recmessage a.banner img {
width:calc(100% - 40px);
}
.contWrap.about a {
width: 100%;
}
.contWrap.about a p {
font-size: 2rem;
}

.contWrap.work a p, .contWrap.style a p {
font-size: 1.6rem;
}

.contWrap.information ul li p {
height: 70px;
}
.contWrap.information ul li p span {
font-size: 1.4rem;
line-height: 1.4;
}

}