@charset "UTF-8";

/*****************************
top
*****************************/
.topsec {
  padding: 10rem 0;
}
@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 {
    padding: 6rem 0;
  }
}

/*****************************
topsec-fv
*****************************/
.topsec-fv {
  height: 120vh;
}
.topsec-fv .img {
  position: absolute;
}
.topsec-fv .img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.topsec-fv .img1,
.topsec-fv .img3 {
  left: 0;
}
.topsec-fv .img2,
.topsec-fv .img4 {
  right: 0;
}
.topsec-fv .img1 {
  top: 10%;
  height: 32vw;
}
.topsec-fv .img2 {
  top: 0%;
  height: 33vw;
}
.topsec-fv .img2.mask::before {
  opacity: .1;
}
.topsec-fv .img3 {
  bottom: -100px;
  height: 25vw;
}
.topsec-fv .img4 {
  bottom: 0;
  height: 22vw;
}
.topsec-fv .img4.mask::before {
  opacity: .45;
}
.topsec-fv .txtwrap {
  position: absolute;
  top: 22%;
  left: 12vw;
}
.topsec-fv .txtwrap p {
  margin-top: -3rem;
}
.topsec-fv .txtwrap p,
.topsec-fv .txtwrap span {
  background: linear-gradient(150deg, #5c6052, #fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  font-size: 5.5vw;
}
.topsec-fv .txtwrap span {
  display: inline-block;
  font-weight: 700;
}
.topsec-fv .txtwrap .big {
  font-size: 10vw;
  font-weight: 600;
}
.topsec-fv .txtja {
  margin-top: 2rem;
}
.topsec-fv .txtja span {
  background: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  font-size: 2vw;
  font-weight: 500;
}
@media only screen and (max-width: 1180px) {
  .topsec-fv {
    height: 700px;
  }
  .topsec-fv .txtwrap {
    top: 40%;
  }
  .topsec-fv .img1 {
    top: 15%;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-fv {
    height: 600px;
  }
  .topsec-fv .txtwrap p {
    margin-top: -2rem;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-fv {
    height: 500px;
  }
  .topsec-fv .img1 {
    top: 22%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-fv {
    height: 900px;
  }
  .topsec-fv .img1 {
    left: initial;
    right: 0;
    top: 28%;
    height: 100vw;
  }
  .topsec-fv .img2 {
    right: initial;
    left: 0;
    height: 50vw;
  }
  .topsec-fv .img3 {
    bottom: -10px;
    height: 40vw;
  }
  .topsec-fv .img4 {
    display: none;
  }
  .topsec-fv .txtwrap {
    top: 35%;
    left: 6vw;
  }
  .topsec-fv .txtwrap p,
  .topsec-fv .txtwrap span {
    font-size: 14vw;
  }
  .topsec-fv .txtja span {
    font-size: 2rem;
    line-height: 1.5;
  }
  .topsec-fv .txtwrap .big {
    font-size: 23vw;
  }
  .topsec-fv .txtja {
    font-size: 2vw;
  }
  .topsec-fv .img1.mask::before {
    opacity: .3;
  }
  .topsec-fv .img3.mask::before {
    opacity: 0;
  }
}

/*****************************
topsec-news
*****************************/
.topsec-news {
  padding: 20rem 0 10rem;
}
.topsec-news .newsbox {
  margin-right: calc(50% - 50vw);
}
.topsec-news .newsbox .newslist {
  margin-bottom: 5rem;
}
@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: 10rem 0;
  }
}

/*****************************
topsec-greeting
*****************************/
.topsec-greeting {
  padding: 5rem 0;
}
.topsec-greeting .logoobj1 {
  position: absolute;
  left: -30px;
  bottom: 30px;
  opacity: .3;
  max-width: 35vw;
  width: 100%;
  z-index: 3;
}
.topsec-greeting::before {
  background: #000;
  content: '';
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.topsec-greeting .imgbox {
  display: flex;
  gap: 1rem;
}
.topsec-greeting .txtwrap {
  position: absolute;
  top: 50%;
  right: 3%;
  z-index: 3;
}
.topsec-greeting .txtwrap {
  color: #fff;
  text-align: right;
}
.topsec-greeting .txtwrap h2 {
  font-size: 5rem;
}
.topsec-greeting .txtwrap p {
  line-height: 2;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-greeting .txtwrap h2 {
    font-size: 3.5rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-greeting .txtwrap {
    top: 15%;
    text-align: left;
  }
  .topsec-greeting .txtwrap h2 {
    font-size: 2.5rem;
  }
  .topsec-greeting .logoobj1 {
    max-width: 100px;
  }
  .topsec-greeting .imgbox .splide:nth-child(1) {
    display: none;
  }
}

/*****************************
topsec-service
*****************************/
.servicelist {
  display: flex;
  flex-wrap: wrap;
}
.servicelist li {
  overflow: hidden;
  position: relative;
  height: 600px;
  width: calc(100% / 4);
}
.servicelist li::before,
.servicelist li::after {
  content: '';
  transition: .5s;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.servicelist li:nth-child(1)::before {
  background: url(../images/top/servicelist1.webp) no-repeat center / cover;
}
.servicelist li:nth-child(2)::before {
  background: url(../images/top/servicelist2.webp) no-repeat center / cover;
}
.servicelist li:nth-child(3)::before {
  background: url(../images/top/servicelist3.webp) no-repeat center / cover;
}
.servicelist li:nth-child(4)::before {
  background: url(../images/top/servicelist4.webp) no-repeat center / cover;
}
.servicelist li:hover::before {
  transform: scale(1.1);
  transition: .5s;
}
.servicelist li::after {
  background: #000;
  opacity: .2;
}
.servicelist li:hover::after {
  transition: .5s;
  opacity: 0;
}
.servicelist li a {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.servicelist li:hover a {
  opacity: 1;
}
.servicelist .txtbox {
  padding: 2rem;
  position: relative;
}
.servicelist .txtbox::before {
  background: linear-gradient(0deg, rgb(0 0 0) 0%, rgba(255, 255, 255, 0) 100%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.servicelist .txtbox p {
  position: relative;
}
.servicelist .txtbox .ja,
.servicelist .txtbox .en {
  line-height: 1;
}
.servicelist .txtbox .ja {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.servicelist .txtbox .en {
  font-size: 1.4rem;
}
.servicelist .txtbox .txt {
  font-size: 1.5rem;
}
@media only screen and (max-width: 1180px) {
  .servicelist li {
    height: 500px;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .servicelist li {
    width: calc(100% / 2);
  }
  .servicelist li {
    height: 350px;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .servicelist li {
    height: 250px;
    width: 100%;
  }
}

/*****************************
topsec-alpha
*****************************/
.topsec-alpha .afp {
  background: linear-gradient(150deg, #5c6052, #fff);
  display: inline-block;
  font-size: 20vw;
  font-weight: 600;
  line-height: 1;
  opacity: .4;
  position: absolute;
  top: 7%;
  left: 2%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}
.topsec-alpha .img {
  position: absolute;
  top: 0;
  right: 0;
  width: 120vh;
}
.topsec-alpha .img.mask::before {
  opacity: .1;
}
.topsec-alpha .img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.topsec-alpha .txtwrap {
  position: relative;
  z-index: 2;
}
.topsec-alpha .ttlbox1 .txt1 {
  font-size: 3rem;
}
.topsec-alpha {
  padding: 15vw 0 12vw;
}
@media only screen and (max-width: 1180px) {
  .topsec-alpha {
    padding: 15rem 0 25rem;
  }
  .topsec-alpha .img.mask::before {
    opacity: .5;
  }
}
@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-alpha .ttlbox1 .txt1 {
    font-size: 2.5rem;
  }
  .topsec-alpha .afp {
    font-size: 12rem;
    opacity: .5;
    top: -5%;
  }
  .topsec-alpha .img {
    top: 50px;
    width: 70vh;
  }
  .topsec-alpha .txtwrap {
    top: 150px;
  }
}

/*****************************
topsec-recruit
*****************************/
.topsec-recruit {
  background: url(../images/top/bg_recruit.webp) no-repeat center / cover;
}
.topsec-recruit::before {
  background: #000;
  content: '';
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-recruit .txtbox {
  display: flex;
  gap: 10rem;
  position: relative;
}
.topsec-recruit .txtbox .box1 {
  font-size: 2rem;
}
.topsec-recruit .splide {
  margin-top: 5rem;
}
.topsec-recruit .splide__slide {
  height: 350px;
  width: calc(100% / 3);
}
.topsec-recruit .img.mask::before {
  opacity: .1;
}
.topsec-recruit .splide__slide img {
  object-fit: cover;
  object-position: top;
  height: 100%;
  width: 100%;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-recruit .txtbox {
    gap: 2rem;
  }
  .topsec-recruit .txtbox .box1 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-recruit .txtbox {
    flex-direction: column;
  }
  .topsec-recruit .splide__slide {
    height: 150px;
  }
}