@charset "UTF-8";

#content_Wrap { background-color: #fff;}
#content_Wrap img { width: 100%;}
#content_Wrap .bg_Wht { background-color: inherit;}

.garamond {
font-family: "EB Garamond", serif !important;
}

#main_img {
position: relative;
width: 100%;
height: 0;
padding-top: 55%;
background: url(../img/main.jpg) no-repeat center top;
background-size: cover;
}
#main_img h2 {
position: absolute;
top: 20%;
left: 5%;
color: #fff;
font-size: 17vw;
font-family: 'Teko', sans-serif;
z-index: 1;
}
#main_img .main_ttl {
position: absolute;
bottom: 10%;
left: 5%;
color: #fff;
text-align: left;
}
#main_img .main_ttl h3 {
padding: 0 0 20px;
font-size: 3vw;
letter-spacing: 0.1em;
}
#main_img .main_ttl h3 span { font-size: 7vw;}
#main_img .main_ttl p {
font-size: 3vw;
letter-spacing: 0.1em;
}


.intro{
background: #fff;
padding: 80px 0 100px;
}
.intro .inner{
max-width: 1024px;
}
.intro_company ul.flex{
position: relative;
flex-wrap: wrap;
justify-content: space-between;
}

.intro_company li{
width: 45%;
padding: 22px;
}
.intro_company li:nth-child(1),
.intro_company li:nth-child(2){
margin-bottom: 8.333333333333333%;
}
.intro_company li:nth-child(1){
background: rgba(113,0,0,0.1);
}
.intro_company li:nth-child(2){
background: rgba(34,75,135,0.1);
}
.intro_company li:nth-child(3){
background: rgba(205,204,0,0.1);
}
.intro_company li:nth-child(4){
background: rgba(47,145,91,0.1);
}
.intro_company li .logo_box {
width: 100%;
margin:0 auto 20px;
}
.intro_company li .logo_box.jr{
max-width: 337px;
}
.intro_company li .logo_box.haseko{
max-width: 223px;
}
.intro_company li .logo_box.sumitomo{
max-width: 219px;
}
.intro_company li .logo_box.nittetsu{
max-width: 245px;
}
.intro_company li .text_box{

}
.intro_company li .text_box h3{
text-align: center;
font-size: 24px;
line-height: 1.4;
padding-bottom: 0.4em;
}
.intro_company li .text_box p{
font-size: 13px;
line-height: 1.6;
}
.cross {
color: #000;
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%,-50%);
margin-top: 0;
margin-left: 0;
width: 100px;
height: 100px;
}
.cross:before {
content: '';
position: absolute;
top: 10px;
width: 100px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cross:after {
content: '';
position: absolute;
top: 10px;
width: 100px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.company_area {
}
.company_area .com_box{
max-width: 1024px;
margin: 0 auto 150px;
}
.company_area .com_box .img_box{
margin: 0 auto 60px;
}
.company_area .com_box .img_box ul{
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between
}
.company_area .com_box .img_box ul li.single{
width: 100%;
margin-bottom: 5px;
}
.company_area .com_box .img_box ul li.two{
width: calc((100% - 5px) / 2);
}
.company_area .com_box .img_box ul li figure{
position: relative;
line-height: 0;
}
.company_area .com_box .img_box ul li figure figcaption{
position: absolute;
bottom: 0;
left: 0;
font-size: 14px;
color: #fff;
line-height: 1;
padding: 4px 40px 4px 10px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&1+0,1+82,0+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 82%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 82%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

.company_area .com_box .text_box{
text-align: center;

}
.company_area .com_box .text_box .logo_box{
margin: 0 auto 40px;
}
.company_area .com_box .text_box .logo_box.mjr{
max-width: 317px;
}
.company_area .com_box .text_box .logo_box.branchera{
max-width: 276px;
}
.company_area .com_box .text_box .logo_box.livio{
max-width: 242px;
}
.company_area .com_box .text_box h3{
font-size: 34px;
line-height: 1;
margin-bottom: 36px;
}
.company_area .com_box .text_box h3 span.subcopy{
font-size: 20px;
}
.company_area .com_box .text_box p{
font-size: 16px;
line-height: 2;
}

.company_area .com_box .text_box h3.cityhouse img{
  display: block;
  max-width: 310px;
  width: 100%;
  margin: 0 auto;
}

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

#main_img {
position: relative;
width: 100%;
height: 0;
padding-top: 75%;
background: url(../img/main.jpg) no-repeat center top;
background-size: cover;
}
#main_img h2 {
top: 30%;
left: 3%;
font-size: 20vw;
}
#main_img .main_ttl { left: 3%;}
#main_img .main_ttl h3 {
padding: 0 0 10px;
font-size: 5vw;
}
#main_img .main_ttl h3 span { font-size: 9vw;}
#main_img .main_ttl p { font-size: 5vw;}

.intro{
padding: 30px 0 40px;
}

.company_area .com_box {
margin: 0 auto 80px;
}
.company_area .com_box .img_box {
margin: 0 auto 30px;
}
.company_area .com_box .img_box ul li{
margin-bottom: 5px;
}
.company_area .com_box .img_box ul li.two{
width: 100%;
}
.company_area .com_box .text_box .logo_box.mjr{
max-width: calc(317px * 0.8);
}
.company_area .com_box .text_box .logo_box.branchera{
max-width: calc(276px * 0.8);
}
.company_area .com_box .text_box .logo_box.livio{
max-width: calc(242px * 0.8);
}
.company_area .com_box .text_box h3{
font-size: 24px;
line-height: 1.4;
margin-bottom: 36px;
}
.company_area .com_box .text_box h3.cityhouse{
font-size: 24px;
line-height: 1.4;
margin-bottom: 36px;
}

.company_area .com_box .text_box h3 span.subcopy{
font-size: 16px;
}
.company_area .com_box .text_box p{
font-size: 14px;
line-height: 2;
}


}