@charset "utf-8";




/*------TopPage/Layout-------*/
.top_mainvis{
position:relative;
height:calc(100vw / (1400 / 490));
}
.top_mainvis .catch{
position:absolute;
left:calc(100vw / (1400 / 840));
top:calc(100vw / (1400 / 150));
z-index:1;
width:calc(100vw / (1400 / 360));
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  .top_mainvis{
  height:calc(100vw / (750 / 440));
  }
  .top_mainvis .catch{
  left:calc(100vw / (750 / 400));
  top:calc(100vw / (750 / 240));
  width:calc(100vw / (750 / 320));
  }
}


.top_about{
padding:calc(100vw / (1400 / 100)) 0 calc(100vw / (1400 / 200));
background:linear-gradient(90deg,rgba(0,224,216,1),rgba(0,149,101,1));
}
.top_about .inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
width:calc(100vw / (1400 / 1000));
margin:0 auto;
color:#fff;
}
.top_about .box_title{
}
.top_about h2{
margin:-0.3em 0 -0.3em;
padding-bottom:0.5em;
font-size:calc(100vw / (1400 / 90));
font-weight:700;
}
.top_about .read{
flex-shrink:0;
width:calc(100vw / (1400 / 540));
font-size:calc(100vw / (1400 / 24));
}
.top_about .txt{
line-height:2;
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  .top_about{
  padding:calc(100vw / (750 / 100)) 0 calc(100vw / (750 / 200));
  }
  .top_about .inner{
  display:block;
  width:calc(100vw / (750 / 700));
  }
  .top_about h2{
  margin:-0.3em 0 -0.3em;
  padding-bottom:0.5em;
  font-size:calc(100vw / (750 / 110));
  }
  .top_about .read{
  width:auto;
  font-size:calc(100vw / (750 / 36));
  }
  .top_about .txt{
  margin-top:2em;
  line-height:1.75;
  }
}


[class^="top_"] .box_title .title_sub{
padding:0;
background:transparent;
}
[class^="top_"] .box_title .h2{
font-size:calc(100vw / (1400 / 36));
}
[class^="top_"] .box_btn .btn{
width:calc(100vw / (1400 / 200));
margin-left:0;
background:transparent;
border:calc(100vw / (1400 / 2)) #fff solid;
}
[class^="top_"] .link{
position:relative;
display:flex;
align-items:center;
justify-content:flex-end;
margin-left:auto;
font-size:calc(100vw / (1400 / 14));
font-weight:700;
color:#009565;
}
[class^="top_"] .link::before,
[class^="top_"] .link::after{
content:'';
display:inline-block;
}
[class^="top_"] .link::before{
position:absolute;
right:0.9em;
top:50%;
transform:translateY(-50%) rotate(45deg);
width:0.6em;
height:0.6em;
border-right:1px #fff solid;
border-top:1px #fff solid;
}
[class^="top_"] .link::after{
width:calc(100vw / (1400 / 30));
height:calc(100vw / (1400 / 30));
margin-left:0.5em;
border-radius:50%;
background:#009565;
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  [class^="top_"] .box_title .h2{
  font-size:calc(100vw / (750 / 48));
  }
  [class^="top_"] .box_btn .btn{
  width:calc(100vw / (750 / 400));
  margin:calc(100vw / (750 / 30)) 0 0 auto;
  border:calc(100vw / (750 / 2)) #fff solid;
  }
  [class^="top_"] .link{
  font-size:calc(100vw / (750 / 22));
  text-decoration:none;
  }
  [class^="top_"] .link::before{
  right:0.8em;
  top:50%;
  width:0.6em;
  height:0.6em;
  border-right:1px #fff solid;
  border-top:1px #fff solid;
  }
  [class^="top_"] .link::after{
  width:calc(100vw / (750 / 40));
  height:calc(100vw / (750 / 40));
  margin-left:0.5em;
  }
}


.top_business{
height:calc(100vw / (1400 / 620));
margin-top:calc(100vw / (1400 / -100));
padding:calc(100vw / (1400 / 100)) 0 calc(100vw / (1400 / 100));
}
.webp .top_business{
background:url(../../img/top_bg01.webp) no-repeat center / contain;
}
.no-webp .top_business{
background:url(../../img/top_bg01.png) no-repeat center / contain;
}
.top_business .inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
width:calc(100vw / (1400 / 1000));
margin:0 auto;
}
.top_business .box_title{
width:calc(100vw / (1400 / 540));
flex-shrink:0;
}
.top_business .box_btn{
margin-top:calc(100vw / (1400 / 40));
}
.top_business .read{
font-size:calc(100vw / (1400 / 18));
color:#fff;
}
.top_business .list_nav{
flex-shrink:0;
width:calc(100vw / (1400 / 460));
}
.top_business .list_nav li{
height:calc(100vw / (1400 / 200));
padding:calc(100vw / (1400 / 40)) calc(100vw / (1400 / 50)) 0;
border-radius:calc(100vw / (1400 / 5));
background:#fff;
}
.top_business .list_nav li+li{
margin-top:calc(100vw / (1400 / 20));
}
.top_business .list_nav h3{
margin-bottom:0.3em;
font-size:calc(100vw / (1400 / 21));
font-weight:700;
}
.top_business .list_nav p{
font-size:calc(100vw / (1400 / 14));
line-height:2;
}
.top_business .list_nav .link{
margin-top:0.5em;
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  .top_business{
  height:auto;
  margin-top:calc(100vw / (750 / -100));
  padding:calc(100vw / (750 / 100)) 0 calc(100vw / (750 / 100));
  border-radius:calc(100vw / (750 / 80)) 0 calc(100vw / (750 / 80)) 0;
  }
  .webp .top_business,
  .no-webp .top_business{
  background-size:cover;
  }
  .top_business .inner{
  display:block;
  width:calc(100vw / (750 / 700));
  margin:0 auto;
  }
  .top_business .box_title{
  width:auto;
  }
  .top_business .read{
  font-size:calc(100vw / (750 / 32));
  }
  .top_business .list_nav{
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:calc(100vw / (750 / 40));
  }
  .top_business .list_nav li{
  position:relative;
  height:auto;
  width:48.5%;
  padding:calc(100vw / (750 / 30)) calc(100vw / (750 / 30)) calc(100vw / (750 / 80));
  border-radius:calc(100vw / (750 / 10));
  }
  .top_business .list_nav li+li{
  margin-top:0;
  }
  .top_business .list_nav h3{
  font-size:calc(100vw / (750 / 30));
  }
  .top_business .list_nav p{
  font-size:calc(100vw / (750 / 22));
  line-height:1.75;
  }
  .top_business .list_nav .link{
  position:absolute;
  right:calc(100vw / (750 / 30));
  bottom:calc(100vw / (750 / 30));
  }
}


.top_job,
.top_employee{
height:calc(100vw / (1400 / 770));
padding:calc(100vw / (1400 / 100)) 0 calc(100vw / (1400 / 100));
}
.webp .top_employee{
background:url(../../img/top_bg02.webp) no-repeat center / contain;
}
.no-webp .top_employee{
background:url(../../img/top_bg02.png) no-repeat center / contain;
}
.job .inner,
.top_employee .inner{
}
.top_job .box_title,
.top_employee .box_title{
width:calc(100vw / (1400 / 1000));
margin:0 auto;
}
.top_job .box_title::after,
.top_employee .box_title::after{
content:'';
display:block;
clear:both;
}
.top_job .box_btn,
.top_employee .box_btn{
margin-top:calc(100vw / (1400 / 5));
}
.top_job .read,
.top_employee .read{
float:left;
margin-right:calc(100vw / (1400 / 30));
font-size:calc(100vw / (1400 / 18));
}
.top_employee .read{
color:#fff;
}
.top_job .slider,
.top_employee .slider{
margin-top:calc(100vw / (1400 / 40));
}
.top_job .slider li,
.top_employee .slider li{
padding-left:calc(100vw / (1400 / 50));
}
.top_employee .slider li{
color:#fff;
}
.top_job .slider li,
.top_employee .slider li{
padding-left:calc(100vw / (1400 / 50));
}
.top_job .slider h3,
.top_employee .slider h3{
margin:calc(100vw / (1400 / 30)) 0 calc(100vw / (1400 / 10));
font-size:calc(100vw / (1400 / 21));
font-weight:700;
}
.top_job .slider p,
.top_employee .slider p{
font-size:calc(100vw / (1400 / 14));
}
.top_employee .slider .link{
margin-top:calc(100vw / (1400 / -30));
color:#fff;
}
.job_slider .slick-prev,
.job_slider .slick-next,
.emp_slider .slick-prev,
.emp_slider .slick-next{
top:calc(100vw / (1400 / 150));
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  .top_job,
  .top_employee{
  height:auto;
  padding:calc(100vw / (750 / 100)) 0 calc(100vw / (750 / 100));
  }
  .top_employee{
  border-radius:calc(100vw / (750 / 80)) 0 calc(100vw / (750 / 80)) 0;
  }
  .webp .top_employee,
  .no-webp .top_employee{
  background-size:cover;
  }
  .top_job .box_title,
  .top_employee .box_title{
  width:calc(100vw / (750 / 700));
  }
  .top_job .box_btn,
  .top_employee .box_btn{
  margin-top:calc(100vw / (750 / 5));
  }
  .top_job .read,
  .top_employee .read{
  float:none;
  margin-right:0;
  font-size:calc(100vw / (750 / 30));
  }
  .top_job .slider,
  .top_employee .slider{
  margin-top:calc(100vw / (750 / 40));
  position: relative;
  }
  .top_job .slider li,
  .top_employee .slider li{
  padding-left:calc(100vw / (750 / 20));
  padding-bottom:calc(100vw / (750 / 50));
  }
  .top_job .slider h3,
  .top_employee .slider h3{
  margin:calc(100vw / (750 / 20)) 0 calc(100vw / (750 / 10));
  font-size:calc(100vw / (750 / 30));
  }
  .top_job .slider p,
  .top_employee .slider p{
  font-size:calc(100vw / (750 / 22));
  }
  .top_employee .slider .link{
  margin-top:0;
  }
  .top_job .slider .link,
  .top_employee .slider .link{
  position:absolute;
  bottom:0;
  margin-left:calc(100vw / (750 / 100));
  }
  .job_slider .slick-prev,
  .job_slider .slick-next,
  .emp_slider .slick-prev,
  .emp_slider .slick-next{
  top:calc(100vw / (750 / 150));
  }
}


.top_data{
height:calc(100vw / (1400 / 440));
padding:calc(100vw / (1400 / 100)) 0 calc(100vw / (1400 / 100));
overflow:hidden;
}
.webp .top_data{
background:url(../../img/top_bg03.webp) no-repeat center / contain;
}
.no-webp .top_data{
background:url(../../img/top_bg03.png) no-repeat center / contain;
}
.top_data .inner{
width:calc(100vw / (1400 / 1000));
margin:0 auto;
}
.top_data .box_title{
}
.top_data .box_btn{
margin-top:calc(100vw / (1400 / 40));
}
.top_data .read{
font-size:calc(100vw / (1400 / 18));
}
@media screen and (min-width:768px){}
@media screen and (max-width:767px){
  .top_data{
  height:auto;
  padding:calc(100vw / (750 / 100)) 0 calc(100vw / (750 / 100));
  }
  .webp .top_data,
  .no-webp .top_data{
  background-size:cover;
  }
  .top_data .inner{
  width:calc(100vw / (750 / 700));
  }
  .top_data .box_title{
  }
  .top_data .box_btn{
  margin-top:calc(100vw / (750 / 40));
  }
  .top_data .read{
  font-size:calc(100vw / (750 / 30));
  }
}


.top_business .box_title .title_sub,
.top_employee .box_title .title_sub{
color:#fff;
}
.top_business .box_title .h2,
.top_employee .box_title .h2{
color:#fff;
}
.top_business .box_btn .btn,
.top_employee .box_btn .btn{
border-color:#fff;
color:#fff;
}
.top_business .box_btn .btn::after,
.top_employee .box_btn .btn::after{
border-color:#fff;
}


.top_job .box_title .title_sub,
.top_data .box_title .title_sub{
color:#333;
}
.top_job .box_title .h2,
.top_data .box_title .h2{
color:#333;
}
.top_job .box_btn .btn,
.top_data .box_btn .btn{
border-color:#333;
color:#333;
}
.top_job .box_btn .btn::after,
.top_data .box_btn .btn::after{
border-color:#333;
}