header .copy{
  position: absolute;
  font-size:3.0rem;
  text-align: center;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(39, 41, 59, .8);
  padding: 30px;
  box-sizing: border-box;
  line-height: 1.6;
}
header .copy span{
  margin-top: 20px;
  font-size: 2.2rem;
  display: block;
}

h2{
  font-size:5.0rem;
  color: #333;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 20px;
}
h2 span{
  font-family: "Lato", sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;  
  font-size:3.0rem;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  color: #1146bb;
}



.news{
  padding: 120px 0;
  box-sizing: border-box;
}
.news h2{
  color: #27293b;
  margin-bottom: 0;
  font-size: 2vw;
  margin-right: 5%;
  width:20%;  
}

.news h2 span{
  color: #c9c9c9;
}
.news .flex{
  display: flex;
  align-items: center;
}
.news .flex ul{
  width: 100%;
}
.news .flex ul li{
  border-bottom: #999 solid 1px;
  margin-bottom: 15px;
}

.news .flex ul li a{
  display: block;
  margin-right: 30px;
  margin-bottom: 15px;
}
.news .flex ul li a span.date{
  color: #27293b;
  font-size: 1.4rem;
  margin-right: 30px;
}
.news .more{
  text-align: right;
  margin-top: 20px;
}
.news .more a{
  border-bottom: 1px solid #999;
}
.contents{
  background-color: #27293b;
}
.contents .flex{
  display: flex;
  padding: 50px 0;
  align-items: stretch;
}
.contents .flex .photo{
  width: 32%;
  margin: 20px 2% 20px 0;  
  background-color: #fff;
}
.contents .flex .photo:last-child{
  margin-right: 0;
}
.contents .flex .photo a{
  display: block;

  padding: 20px;
  box-sizing: border-box;
}
.contents .flex .photo a h3{
  text-align: center;
  font-size: 2.0rem;
  margin-bottom: 10px;
}


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

  }

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

    header .copy{
      font-size: 2.0rem;
    }
    header .copy span{
      font-size: 1.6rem;
    }

    header ul.slider{
      width: 100%;
      height: 300px;
    }
    header ul.slider li{
      width: 100%;
      object-fit: cover; /* 画像が歪まないように全体を覆う */
      height: 300px;      
    }
    h2{
      font-size:6vw;
    }
    h2 span{
      font-size:5vw;
    }    
    .btn a{
      padding: 10px 60px;
    }


  }

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

    .news{
      padding: 30px 30px;
    }
    .news .flex{
      display: block;
    }
    .news .flex ul{
      width: 100%;
    }
    .news .flex ul li{
      width: 100%;
    }
    .news .flex ul li a{
      margin-right: 10px;
    }
    .news h2{
      width: 100%;
    }
    .news .flex ul li a span.date{
      display: block;
    }
    .recruit .flex{
      display: block;
    }
    .recruit .flex .text_wrap{
      position: static;
      width: 80%;
      margin-top: -50px;
      margin-left: auto;
      margin-right: -20px;
    }

  }

  @media screen and (max-width: 600px){
    header .copy{
      font-size: 2.0vw;
      padding: 20px;
      box-sizing: border-box;
    }
    header .copy span{
      font-size: 1.8vw
    }
    header .logo img{
      width: 30vw;
    }    
    header ul.slider{
      height: 200px;
    }
    header ul.slider li{
      height: 200px;      
    }    
    .contents .flex{
      display: block;
    }
    .contents .flex .photo{
      width: 96%;
      margin-right: auto;
      margin-left: auto;
    }
    .contents .flex .photo .img img{
      margin: 0 auto;
      display: block;
    }
    .contents .flex .photo p{
      text-align: center;
    }
    .contents .flex .photo:last-child{
      margin-right: auto;
    }
  }

  @media screen and (max-width: 400px){
    header .copy{
      font-size: 1.8;
    }
    header .copy span{
      font-size: 1.4vw
    }
    header ul.slider{
      height:150px;
    }
    header ul.slider li{
      height:150px;      
    }     
    .news .flex ul li a{
      font-size: 1.4rem;
    }

  }

}