@charset "UTF-8";
/* CSS Document */

#contents {
padding: 0px;
}

/* 中身-モバイルファースト======================================================================================================== */

#header_inner{
justify-content: flex-end;
}
#header_logo{
position: absolute;
left: 0;
top: 0;
z-index: 1000;
}
#header_logo a img{
height: 70px;
}


#slider li{
height: 40vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#slider li:nth-child(1){
background-image: url("../images/main01.jpg");
background-image: -webkit-image-set(url(../images/main01.jpg) 1x, url(../images/main01@2x.jpg) 2x);
}
#slider li:nth-child(2){
background-image: url("../images/main02.jpg");
background-image: -webkit-image-set(url(../images/main02.jpg) 1x, url(../images/main02@2x.jpg) 2x);
}
#slider li:nth-child(3){
background-image: url("../images/main03.jpg");
background-image: -webkit-image-set(url(../images/main03.jpg) 1x, url(../images/main03@2x.jpg) 2x);
}
#slider li:nth-child(4){
background-image: url("../images/main04.jpg");
background-image: -webkit-image-set(url(../images/main04.jpg) 1x, url(../images/main04@2x.jpg) 2x);
}
#slider li h2{
font-size: 5vw;
font-weight: bold;
color: #fff;
text-shadow: 0px 0px 5px rgba(0,0,0,0.9);
white-space:nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
margin: auto;
}


#top_copy{
text-align: center;
line-height: 2.5;
}


.common_title{
text-align: center;
margin-bottom: 20px;
}
.common_title .en{
font-family: Arial, Helvetica, "sans-serif";
font-size: 30px;
line-height: 1.2;
font-weight: bold;
display: block;
}
.common_title .en::after{
content: "";
display: block;
width: 60px;
height: 5px;
margin: 10px auto;
background-color: #45bcb4;
border-radius: 5px;
}
.common_title h3{
}


#value h4{
font-size: 20px;
margin-bottom: 20px;
}
#value .img{
margin-bottom: 20px;
}
#value ul li{
background-color: #eee;
padding: 20px;
border-radius: 5px;
margin-top: 10px;
}
#value ul li h5{
font-weight: bold;
color: #45bcb4;
}


#works .article{
width: 200px;
margin: 0 10px;
}
#works .article a{
display: block;
text-decoration: none;
}
#works .article .photo{
width: 200px;
height: 200px;
overflow: hidden;
margin-bottom: 10px;
}
#works .article .photo img{
height: 200px;
object-fit: cover;
border-radius: 200px;
}
#works .article h4{
font-size: 18px;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#works .article p{
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}


#business{
background-color: #eee;
padding: 60px 0;
}
#business .photo{
width: 80%;
}
#business .article{
margin-top: 40px;
}
#business .article:first-child{
margin-top: 0px;
}
#business .article:nth-child(even) .photo{
margin: 0 0 0 auto;
}
#business .text{
padding: 5vw 5vw 0;
text-align: left;
}
#business .text h3{
text-align: center;
font-size: 18px;
}
#business .text p{
margin-top: 10px;
}


#showroom{
display: block;
background-image: url("../images/showroom_bg.jpg");
background-image: -webkit-image-set(url(../images/showroom_bg.jpg) 1x, url(../images/showroom_bg@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
#showroom a{
content: "";
display: block;
text-decoration: none;
color: #fff;
width: 100%;
height: 100%;
background-color: rgba(163,112,47,0.5);
padding: 15vw 0;
}
#showroom a .common_title .en::after{
background-color: #fff;
}

#project{
display: block;
background-image: url("../images/project_bg.jpg");
background-image: -webkit-image-set(url(../images/project_bg.jpg) 1x, url(../images/project_bg@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
#project a{
content: "";
display: block;
text-decoration: none;
color: #fff;
width: 100%;
height: 100%;
background-color: rgba(30,117,111,0.5);
padding: 15vw 0;
}
#project a .common_title .en::after{
background-color: #fff;
}


#company .greeting .photo{
width: 200px;
margin: 0 auto 20px;
}
#company .greeting .text{
margin-bottom: 20px;
}
#company .greeting h3{
font-size: 18px;
}
#company .greeting p{
margin-top: 10px;
}
#company .greeting .name{
text-align: right;
}

#company .outline{
margin-bottom: 20px;
}






/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#header_logo{
margin: 2.5vh 5vw;
}
#header_logo a img{
height: 20vh;
}


#slider li{
height: 85vh;
}
#slider li h2{
font-size: 3vw;
}

#top_copy{
font-size: 20px;
}

.common_title{
margin-bottom: 40px;
}
.common_title .en{
font-size: 50px;
}


#value .inner{
position: relative;
}
#value h4{
font-size: 24px;
margin-bottom: 0px;
position: absolute;
top: 0;
left: 0;
}
#value .img{
margin: 0 auto;
width: 370px;
}
#value ul li{
width: 280px;
position: absolute;
}
#value ul li::after{
content:"";
display: block;
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
#value ul li.for_you::after,
#value ul li.challenge::after{
border-width: 10px 20px 10px 0;
border-color: transparent #eeeeee transparent transparent;
left: -20px;
}
#value ul li.give::after{
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #eeeeee;
right: -20px;
}
#value ul li.for_you{
top: -20px;
left: 620px;
}
#value ul li.give{
bottom: -10px;
left: 0px;
}
#value ul li.challenge{
bottom: -10px;
right: 0px;
}


#works .article{
width: 300px;
margin: 0 30px;
}
#works .article .photo{
width: 300px;
height: 300px;
}
#works .article .photo img{
height: 300px;
border-radius: 300px;
}
#works .article h4{
font-size: 20px;
}


#business{
padding: 100px 0;
}
#business .article{
display: flex;
}
#business .article:nth-child(even){
flex-direction: row-reverse;
}
#business .article:nth-child(even) .photo{
margin: 0;
}
#business .photo{
width: 60%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#business .article:nth-child(1) .photo{
background-image: url("../images/business_photo01.jpg");
background-image: -webkit-image-set(url(../images/business_photo01.jpg) 1x, url(../images/business_photo01@2x.jpg) 2x);
}
#business .article:nth-child(2) .photo{
background-image: url("../images/business_photo02.jpg");
background-image: -webkit-image-set(url(../images/business_photo02.jpg) 1x, url(../images/business_photo02@2x.jpg) 2x);
}
#business .article:nth-child(3) .photo{
background-image: url("../images/business_photo03.jpg");
background-image: -webkit-image-set(url(../images/business_photo03.jpg) 1x, url(../images/business_photo03@2x.jpg) 2x);
}
#business .photo img{
display: none;
}
#business .text{
flex: 1;
padding: 5vw;
}
#business .text h3{
font-size: 20px;
}
#business .text p{
margin-top: 20px;
}


#other_contents{
display: flex;
}
#other_contents > *{
width: 50%;
}
#other_contents > * a{
padding: 10vw 0;
}
#showroom a:hover{
background-color: rgba(163,112,47,0.8);
}
#project a:hover{
background-color: rgba(30,117,111,0.8);
}


#company .greeting{
display: flex;
flex-direction: row-reverse;
}
#company .greeting .photo{
width: auto;
}
#company .greeting .text{
flex: 1;
margin-right: 40px;
}
#company .greeting h3{
font-size: 20px;
margin-bottom: 40px;
}
#company .greeting p{
margin-top: 20px;
font-size: 16px;
}
#company .greeting .name{
margin-top: 100px;
}
#company .outline{
margin-bottom: 60px;
}
#company .map iframe{
height: 600px;
}


}