@charset "UTF-8";
/*=============================================================
#about
=============================================================*/
#about {
width: 100%;
position: relative;
overflow: hidden;
}
#about::before {
content: '';
position: absolute;
top: -80%;
bottom: 80%;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}
#about::after {
content: '';
position: absolute;
top: 95%;
bottom: -95%;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}
#about .box {
width: 1200px;
margin: 230px auto 0;
display: flex;
justify-content: space-between;
z-index: 100;
}
#about .box .left {
margin: 0 auto;
}
#about .box .right {
text-align: left;
width: 690px;
}
#about .box .right p {
padding: 40px 0;
}
#about .box .right p.right {
text-align: right;
}
/*=============================================================
#service
=============================================================*/
#service  {
padding-top: 70px;
}
#service h2.blue {
padding: 0;
}
#service .swiper{
padding-top: 30px;
}
#service .swiper-wrapper .img01 {
background-image: url("../image/service_img01.jpg");
background-size: cover;
width: 780px;
height: 700px;
margin: 0 auto;
display: flex;
align-items: center;
}
#service .swiper-wrapper .img02 {
background-image: url("../image/service_img02.jpg");
background-size: cover;
width: 780px;
height: 700px;
margin: 0 auto;
display: flex;
align-items: center;
}
#service .swiper-wrapper .img03 {
background-image: url("../image/service_img03.jpg");
background-size: cover;
width: 780px;
height: 700px;
margin: 0 auto;
display: flex;
align-items: center;
}
#service .swiper-wrapper .swiper-slide .blue_box{
position: relative;
padding: 90px 0 40px;
width: 100%;
}
#service .swiper-wrapper .swiper-slide .blue_box:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2E74B6;
mix-blend-mode: multiply;
z-index: 1;
}
#service .box_text {
position: relative;
z-index: 2;
width: 580px;
margin: 0 auto;
}
#service .box_text p {
color: #fff;
padding: 30px 0; 
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 70px;
  margin: auto;
  width: 70px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
background-image: url(../image/prev.png);
}
/* 次への矢印カスタマイズ */
.swiper-button-next:after {
background-image: url(../image/next.png);
}
/*=============================================================
#recruit
=============================================================*/
#recruit {
width: 100%;
position: relative;
padding: 120px 0 80px;
position: relative;
top: 80px;
}
#recruit::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}
#recruit .box {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
z-index: 100;
}
#recruit .box .left {
margin: 0 auto;
}
#recruit .box .right {
text-align: left;
width: 690px;
color: #fff;
}
#recruit .box .right p {
margin: 30px 0;
}
/*=============================================================
#instagram
=============================================================*/
#insta {
padding-top: 150px;
}
#insta .insta_img {
width: 600px;
margin: 30px auto 40px;
}
/*=============================================================
#contact
=============================================================*/
#contact {
width: 100%;
position: relative;
padding: 100px 0 80px;
position: relative;
top: 80px;
}
#contact .box{
width: 100%;
background: #2E74B6;
}
#contact::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}