@charset "UTF-8";

/* CSS Document */
.bg-slider {
width: 100%;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.bg-slider__title{
color: #fff;
font-size: 48px;
line-height: 1.5;
font-weight: bold;
text-align:center;
text-shadow: 1px 1px 1px #000;
}

h2{
color: #0071bc;
}
h2 span{
display: block;
font-family: 'Khand', sans-serif;
font-size: 2.6em;
line-height: 0.8;
}

main{
background: #eee;
}


#about h2,#recuruit h2{
background: url(../images/border.gif) no-repeat bottom left;
padding-bottom: 20px;
margin-bottom: 20px;
}
#about p,#recuruit p{
margin-bottom: 20px;
line-height: 180%;
}

#service h2{
color: #fff;
background: #0071bc;
}
#service ul{
width: 100%;
}
#service ul li div h3{
font-weight: bold;
font-size: 1.2em;
}
#service ul li div p{
margin: 8px 0;
}




/*横幅480px以下*/
@media screen and (max-width:480px){
	
}

/*横幅481px以上*/
@media screen and (min-width:481px){
	
}

/*横幅481px〜768px*/
@media (min-width:481px) and (max-width:768px){
}

/*横幅768px以下*/
@media screen and (max-width:768px){
  
#about,#recuruit{
width: 100%;
}
#about{
background: url(../images/about.jpg) no-repeat center center;
background-size: cover;
}
#recuruit{
background: url(../images/recuruit.jpg) no-repeat center center;
background-size: cover;
}
#about div,#recuruit div{
width: 90%;
padding: 40px 5%;
background: rgba(238,238,238,0.86);
}	
	
#service h2{
padding: 25px 0 20px 5%;
}
#service ul{
width: 100%;
}
#service ul li{
padding: 20px 0;
}
#service ul li:nth-child(1),#service ul li:nth-child(3){
background: #fff;
}
#service ul li img{
display: block;
width: 90%;
margin: 0 auto;
}
#service ul li div{
padding: 5% 5% 0 5%;
}
}

/*横幅769px以上*/
@media screen and (min-width:769px){

#about,#recuruit{
margin: 0 auto;
padding: 140px 0;
}
#about{
background: url(../images/about.jpg) no-repeat center left;
background-size: 50% auto;
}
#recuruit{
background: url(../images/recuruit.jpg) no-repeat center right;
background-size: 50% auto;
}
#about div{
width: 45%;
padding-left: 55%;
}
#recuruit div{
width: 45%;
padding-right: 55%;
}

#service h2{
padding: 40px 0 40px 10%;
}
#service ul{
display: table;
width: 100%;
table-layout: fixed;
border-bottom: 1px solid #fff;
}
#service ul li{
display: table-cell;
width: calc(33.333333% - 1px);
border-left: 1px solid #fff;
vertical-align: top;
position: relative;
}
#service ul li a{
width: 100%;
height: 100%;
display: inline-block;
}
#service ul li img{
width: 100%;
object-fit: cover;
object-position: center;
}
#service ul li div{
padding: 5%;
}
}

/*横幅769px〜1024px*/
@media (min-width:769px) and (max-width:1024px){
#about, #recuruit {
width: 90%;
}
}

/*横幅1024pxpx以下*/
@media screen and (max-width:1024px){
#contentsRight{
margin-top: 40px;
}
}

/*横幅1025px以上*/
@media screen and (min-width:1025px){
#header nav li:nth-child(1) a{
color: #0071bc;
}
#header nav li:nth-child(1) a::after{
display: block;
}
	
#about,#recuruit{
width: 80%;
max-width: 870px;
}

#service ul li a:hover {
background: #fff;
}
}