@charset "UTF-8";

/*****************************
  top
*****************************/
.topsec{
  padding: 10rem 0;
}
.topsecmask{
  mask-image: url(../images/ob/mask_main.svg);
  -webkit-mask-image: url(../images/ob/mask_main.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.topseclink .linksectxt {
  width: 50%;
}
.topseclink-imgR .linksectxt {
  margin-right: auto;
}
.topseclink-imgL .linksectxt {
  margin-left: auto;
}
.topseclink .linksectxt .txtbox{
  margin-top: 4rem;
}
.topseclink .linksectxt .txtbox p{
  font-weight: 500;
  line-height: 2;
}
.topseclink .imgbox{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42.8%;
  width: 45%;
}
.topseclink .imgbox img{
  border-radius: 16px;
}
.topseclink-imgR .imgbox{
  right: -1rem;
}
.topseclink-imgL .imgbox{
  left: -1rem;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec{
    padding: 8rem 0;
  }
  .topseclink .linksectxt {
    margin: 0 auto;
    width: 90%;
  }
  .topseclink .imgbox{
    margin-top: 2rem;
    position: relative;
    top: auto;
    transform: none;
    width: 60%;
  }
  .topseclink-imgR .imgbox {
    right: auto;
    left: 42%;
  }
  .topseclink-imgR .morebtn1{
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topseclink .linksectxt{
    width: 100%;
  }
  .topseclink .imgbox {
    width: 90%;
  }
  .topseclink-imgR .imgbox {
    left: 12%;
  }
}

/*****************************
topsec-firstview
*****************************/
.topsec-firstview {
  padding: 0;
}
.topsec-firstview .topslider{
  mask-image: url(../images/ob/mask_topslide.svg);
  -webkit-mask-image: url(../images/ob/mask_topslide.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  mask-size: cover;
  -webkit-mask-size: cover;
  height: 100vh;
}
.topsec-firstview .topslider::after{
  content: "";
  background: #8DAACB;
  mix-blend-mode: screen;
  opacity: .3;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-firstview .topslider .slick-list,
.topsec-firstview .topslider .slick-track{
  height: 100%;
}

.topsec-firstview .catch{
  color: #fff;
  position: absolute;
  right: 5%;
  bottom: 20%;
}
.topsec-firstview .catch .main{
  font-size: 5rem;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.2;
}
.topsec-firstview .catch .main span,
.topsec-firstview .catch .sub{
  font-weight: 500;
}
.topsec-firstview .catch .main span{
  font-size: 7.4rem;
  margin-right: 1rem;
}
.topsec-firstview .catch .sub{
  font-size: 3.8rem;
  line-height: 1;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-firstview .topslider{
    height: 550px;
  }
  .topsec-firstview .catch .main {
    font-size: 3rem;
  }
  .topsec-firstview .catch .main span {
    font-size: 4.4rem;
  }
  .topsec-firstview .catch .sub {
    font-size: 2.8rem;
  }
}

/*****************************
topsec-concept
*****************************/
.topsec-concept{
  background: #fff;
  margin-top: -8rem;
  padding: 15rem 0;
  z-index: 1;
}
.topsec-concept::before{
  content: "";
  aspect-ratio: 1019 / 340;
  background: url(../images/top/ob_environment.svg) no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
}
.topsec-concept h2{
  font-size: 4.4rem ;
  font-weight: bold;
}
.topsec-concept .txtbox{
  line-height: 2.2;
  margin: 5rem 2% 0 auto;
  width: 80%;
}
.topsec-concept .txtbox p{
  font-weight: 500;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-concept h2{
    font-size: 3.4rem ;
  }
  .topsec-concept .txtbox{
    width: 68%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-concept {
    margin-top: -5rem;
    padding: 10rem 0;
  }
  .topsec-concept .txtbox{
    margin: 2rem 0 0;
    width: 100%;
  }
}

/*****************************
topsec-news
*****************************/
.topsec-news{
  background: #fff;
  padding: 10rem 0 15rem;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-news {
    padding: 5rem 0 10rem;
  }
}

/*****************************
topsec-message
*****************************/
.topsec-message{
  background: #EBF4CD;
  margin-top: -8rem;
  padding: 20rem 0 15rem;
  z-index: 0;
}
.topsec-message .fimgbox img{
  border-radius: 16px;
}
.topsec-message .ftxtbox{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topsec-message .ftxtbox p{
  font-weight: 500;
  line-height: 2.4;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-message {
    margin-top: -3rem;
    padding: 10rem 0 5rem;
  }
  .topsec-message .fimgbox,
  .topsec-message .ftxtbox{
    width: 100%;
  }
  .topsec-message .ftxtbox{
    margin-top: 2rem;
  }
  .topsec-message .ftxtbox p{
    line-height: 2;
  }
}

/*****************************
topsec-conmapny
*****************************/
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-work
*****************************/
.topsec-work::before{
  content: "";
  aspect-ratio: 1919/518;
  background: url(../images/top/ob_work.svg) no-repeat center / contain;
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  z-index: -1;
}
/* .topsec-work .ttlbox2{
  margin-left: auto;
  width: 50%;
} */
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-work{
    padding: 0;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-environment
*****************************/
.topsec-environment::before{
  content: "";
  aspect-ratio: 1919/518;
  background: url(../images/top/ob_environment.svg) no-repeat center / contain;
  position: absolute;
  bottom: -40%;
  left: 0;
  width: 100%;
  z-index: -1;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-environment::before{
    bottom: -10%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-environment{
    padding-bottom: 4rem;
  }
}
@media only screen and (max-width: 374px) {
  .topsec-environment .ttlbox2 .enttl::before {
    font-size: 4rem;
    right: -2rem;
    bottom: -2.5rem;
    left: auto;
  }
}

/*****************************
topsec-people
*****************************/
.topsec-people .box{
  margin-top: 4rem;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-data
*****************************/
.topsec-data{
  background: url(../images/top/bg_date.webp) no-repeat center / cover;
}
.topsec-data::before, 
.topsec-data .colormask{
  content: "";
  background: rgba(255, 255, 255, .5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-data .colormask{
  background: rgba(141, 170, 203, .74);
  mix-blend-mode: screen;
}
.topsec-data .txtbox p{
  font-weight: 500;
  line-height: 2;
}
.topsec-data .circlebtn a{
  aspect-ratio: 1 / 1;
  background: #8DAACB;
  border-radius: 50%;
  display: block;
  opacity: 1 !important;
  position: relative;
  margin: 0 auto;
  transition: .5s .3s;
  width: 20%;
  z-index: 1;
}
.topsec-data .circlebtn a::before{
  content: "";
  pointer-events: none;
  aspect-ratio: 1 / 1;
  border: 1px solid #8DAACB;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .5s;
  width: 200%;
  z-index: -1;
}
.topsec-data .circlebtn a .arrow{
  aspect-ratio: 81 / 19;
  background-color: #fff;
  mask-image: url(../images/ob/arrow_white.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  transition: .5s .5s;
  width: 50%;
}
.topsec-data .circlebtn a:hover{
  background: #fff;
}
.topsec-data .circlebtn a:hover::before{
  width: 100%;
}
.topsec-data .circlebtn a:hover .arrow{
  background-color: #8DAACB;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-data .ftxtbox{
    width: 65%;
  }
  .topsec-data .fbox{
    width: 35%;
  }
  .topsec-data .circlebtn a {
    width: 30%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-data{
    overflow: hidden;
  }
  .topsec-data .ftxtbox,
  .topsec-data .fbox{
    width: 100%;
  }
  .topsec-data .fbox{
    margin-top: 6rem;
  }
  .topsec-data .circlebtn a {
    margin: 0 0 0 auto;
    width: 30%;
  }
}

/*****************************
topsec-recruit
*****************************/
.topsec-recruit .box{
  margin-top: 4rem;
}
.topsec-recruit .fimgbox img{
  border-radius: 16px;
}
.topsec-recruit .fbox li{
  margin: 0 auto;
  width: 80%;
}
.topsec-recruit .fbox li:not(:first-of-type){
  margin-top: 2rem;
}

.topsec-recruit li a{
  background: #8DAACB;
  border: 1px solid #8DAACB;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(101, 130, 164, .3);
  color: #fff;
  display: block;
  font-size: 2.2rem;
  font-weight: bold;
  opacity: 1 !important;
  padding: 2.5rem 12rem;
  position: relative;
  transition: .5s;
}
.topsec-recruit li.color-lg a{
  background: #D2E397;
  border: 1px solid #D2E397;
}
.topsec-recruit li.color-gy a{
  background: #CCCCCC;
  border: 1px solid #CCCCCC;
}

.topsec-recruit li a::before{
  content: "";
  aspect-ratio: 22 / 17;
  background-color: #fff;
  mask-image: url(../images/ob/ob_leaves.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  width: 50px;
}
.topsec-recruit li.color-lg a::before{
  aspect-ratio: 44/51;
  mask-image: url(../images/ob/ob_gem.svg);
}
.topsec-recruit li.color-gy a::before{
  aspect-ratio: 53/51;
  mask-image: url(../images/ob/ob_comment.svg);
}

.topsec-recruit li a .arrow{
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  transition: .5s;
  width: 45px;
}
.topsec-recruit li a .arrow::before{
  content: "";
  aspect-ratio: 1 / 1;
  background: #8DAACB;
  clip-path: polygon(0 0, 80% 50%, 0 100%);
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  transition: .5s;
  width: 12px;
}
.topsec-recruit li.color-lg a .arrow::before{
  background: #D2E397;
}
.topsec-recruit li.color-gy a .arrow::before{
  background: #CCCCCC;
}

.topsec-recruit li a:hover{
  background: #fff;
  color: #8DAACB;
}
.topsec-recruit li.color-lg a:hover {
  color: #D2E397;
}
.topsec-recruit li.color-gy a:hover {
  color: #CCCCCC;
}
.topsec-recruit li a:hover::before,
.topsec-recruit li a:hover .arrow{
  background: #8DAACB;
}
.topsec-recruit li.color-lg a:hover::before,
.topsec-recruit li.color-lg a:hover .arrow{
  background: #D2E397;
}
.topsec-recruit li.color-gy a:hover::before,
.topsec-recruit li.color-gy a:hover .arrow{
  background: #CCCCCC;
}
.topsec-recruit li a:hover .arrow::before{
  background: #fff !important;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-recruit li a {
    font-size: 1.8rem;
    padding: 2rem 10rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
  .topsec-recruit .fimgbox,
  .topsec-recruit .fbox,
  .topsec-recruit .fbox li{
    width: 100%;
  }
  .topsec-recruit .fbox{
    margin-top: 2rem;
  }
  .topsec-recruit li a {
    padding: 2rem 7rem 2rem 10rem;
  }
  .topsec-recruit li a .arrow{
    width: 35px;
  }
}
@media only screen and (max-width: 350px) {
  .topsec-recruit .ttlbox2 .enttl::before {
    font-size: 4rem;
    right: 0;
    bottom: -2.5rem;
    left: auto;
  }
}

.top_2col_flex_btn{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start
}
.top_2col_flex_btn li{
  width: 50%;
  padding: 10px;
}
@media screen and (max-width: 767px) {
.top_2col_flex_btn li{
  width: 100%;
}
}