@charset "UTF-8";
@import "news.css";
/*@import "footer.css";*/

body.over-hidden {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/*--------------------
　背景動画
---------------------*/
.bgmovie {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  position: relative;
  z-index: -1;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/*--------------------
 loading
---------------------*/
.loader-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: #F6F879;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-bg .js-apper {
  opacity: 0;
  transition: .1s;
}
.loader-bg .js-apper.apper {
  opacity: 1;
}
.loader-bg .splashbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleY(0);
  background-color: #FFFFFF;
}

.ball-scale-random {
  width: 74px;
  height: 80px;
}

.ball-scale-random > div {
  background-color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: 4px;
  animation-fill-mode: both;
  position: absolute;
  display: inline-block;
  height: 60px;
  width: 60px;
  animation: ball-scale 1s 0s ease-in-out infinite;
}

.ball-scale-random > div:nth-child(1) {
  margin-left: -14px;
  animation: ball-scale 1s 0.2s ease-in-out infinite;
}

.ball-scale-random > div:nth-child(3) {
  margin-left: -4px;
  margin-top: 18px;
  animation: ball-scale 1s 0.5s ease-in-out infinite;
}

@keyframes kvmaskOut {
  0% {
    clip-path: inset(0 50%);
  }
  100% {
    clip-path: inset(0 0);
  }
}
@keyframes loadingtxtIn {
  0% {
    transform: scale(1);
  }
  99% {
    transform: scale(1.49999);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes ball-scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


/*--------------------
 bg_page
---------------------*/
#bg_page {
  background-color:white;
  mix-blend-mode: soft-light;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: background-color 1s;
}
#bg_page.about {
  background-color: #878B8F;
  mix-blend-mode: multiply;
}
#bg_page.recruit {
  background-color: rgb(28 56 208 / 0.75);
  mix-blend-mode:normal;
}


/*--------------------
　fv
---------------------*/
#home .fv {
  width: 100%;
  height: 100vh;
  padding: var(--size80);
}
@media (max-width: 1024px) {
  #home .fv {
    padding: var(--size40);
  }
}
@media (max-width: 500px) {
  #home .fv {
    padding: 0;
    padding-bottom: 0;
    height: auto;
  }
}
.img_fv_wrap {
  width:100%;
  height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.img_fv_wrap > div {
  height:50%;
}
.img_fv_wrap > div .slider {
  padding-right:min(8.8%,172px);
}
.img_fv_wrap .img__fv_top .slider {
  gap:min(8.8%,172px);
  animation: infinity-scroll-left 50s linear infinite both;
}

.img_fv_wrap .img__fv_btm .slider {
  gap:min(8.8%,172px);
  animation: infinity-scroll-right 50s linear infinite both;
  align-items: flex-end;
}

@keyframes infinity-scroll-left  {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes infinity-scroll-left2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(0%);
  }
    to {
    transform: translateX(100%);
  }
}
@keyframes infinity-scroll-right2 {
  from {
    transform: translateX(-200%);
  }
    to {
    transform: translateX(0%);
  }
}

.img_fv_wrap .img__fv_top {
  padding-top:calc(var(--size100) + var(--size20));
}
.img_fv_wrap .img__fv_btm {
  padding-bottom:var(--size80);
}
.kv01 {
  width:21.6vw;
  margin-top:5.78vw;
}
.kv02 {
  width:21.6vw;
}
.kv03 {
  width:29.1vw;
  margin-top:2.6vw;
}
.kv04 {
  width:36.35vw;
}
.kv05 {
  width:29.16vw;
  padding-bottom:5.78vw;
}
.kv06 {
  width:21.7vw;
}
.kv07 {
  width:36.875vw;
}
.kv08 {
  width:21.6vw;
  padding-bottom:8.125vw;
}
.tit_fv {
  gap:var(--size20);
}
.tit_fv .catchcopy {
  position: relative;
  line-height: 1;
}
.tit_fv .catchcopy .txtS {
  font-size: 4.16em;
  display: block;
}

.tit_fv .subcatch {
  font-size: 2.75em;
  display: block;
  line-height: 1.2;
}

.wrap_fv {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 500px) {
  .wrap_fv {
    position: relative;
    height: auto;
  }
}
.wrap_fv .container {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .wrap_fv .container {
    width: 90%;
  }
  .img_fv_wrap > div .slider {
    padding-right:40px;
  }
  .img_fv_wrap .img__fv_top .slider {
    gap:40px;
  }
  
  .img_fv_wrap .img__fv_btm .slider {
    gap:40px;
  }
}
@media (max-width: 500px) {
  .wrap_fv .container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
}




/*--------------------
　common
---------------------*/
#home section {
  padding-top: calc(2*var(--size100));
  padding-bottom: calc(2*var(--size100));
}
@media (max-width: 768px) {
  #home section {
    padding-top: var(--size100);
    padding-bottom:var(--size100);
  }
}

/*--------------------
　top_about
---------------------*/
.top_about .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circle-wrap{
  width: 160px;
  height: 160px;
  margin-bottom:var(--size40);
}
.rotate {
  width: 100%;
  height: 100%;
  animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
    0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.circle {
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
  animation: round_anime 5s linear infinite;
}
@keyframes round_anime {
    0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}



/*--------------------
　service
---------------------*/
.top_service__header {
  justify-content: space-between;
  flex-wrap: wrap;
}
.top_service__box figure{
 border-radius: 20px;
 overflow: hidden;
}
.top_service__box___tit {
  position:relative;
  margin-top:var(--size48);
  gap:var(--size20);
  margin-bottom:1.5em;
}

.top_service__box___tit:before {
  content:"";
  width:4em;
  height:4em;
  background-color: var(--yellow);
  border-radius: 50%;
  position:absolute;
  left:-1em;
  top:50%;
  transform:translateY(-50%) scale(1.0);
  transition:all .5s var(--easeout);
}
.top_service__box___tit h4 {
  position:relative;
}
.top_service__box___tit h4 span{
  display: block;
  font-size:0.8em;
  margin-top:var(--size10);
}
.top_service__box___tit .arrow {
  position:relative;
  right:0px;
  transition:all .5s var(--easeout);
}
.top_service__box___tit .arrow svg {
  stroke:var(--txt_black);
  transition:all .5s var(--easeout);
}

.top_service__box a:hover .top_service__box___tit:before {
  transform:translateY(-50%) scale(1.25);
}
.top_service__box a:hover .top_service__box___tit .arrow {
  right:-10px;
}
.top_service__box a:hover .top_service__box___tit .arrow svg {
  stroke:var(--blue);
}

@media (max-width: 768px) {

.top_service .ttl_top_common {
  margin-bottom:var(--size40);
}
.top_service__box___tit {
  margin-top: var(--size32);
  gap: var(--size20);
  margin-bottom: 1.5em;
}
}


/*--------------------
　top_recruit
---------------------*/
.top_recruit .container{
  gap: 2%;
  flex-wrap: wrap;
  color:white;
}
@media (max-width: 1024px) {

}

/* .top_recruit .container > * {
  width:49%;
} */

.top_recruit .container .txt_box {
  padding-right:var(--size80);
  width:55%;
}
.top_recruit .container .img_box {
  width:43%;
  display: flex;
  justify-content: space-between;
  gap:5%;
}
.top_recruit .container .img_box figure:last-child {
  position:relative;
  top:calc(-1*var(--size80));
}
.top_recruit .js-obj {
  position:absolute;
}
.obj01_wrap {
  left:0;
  top:0;
  width:clamp(100px,9.375vw,180px);
  height:auto;
  aspect-ratio:1/1;
}
.obj01_wrap .obj01 {
  background-color: var(--yellow);
  width:100%;
  height:100%;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.obj02_wrap {
  left:min(39.89%,766px);
  bottom:min(14.5%,142px);
  width:clamp(80px,5.5vw,106px);
  height:auto;
  aspect-ratio:1/1;
}
.obj02_wrap .obj02 {
  background-color: var(--yellow);
  width:100%;
  height:100%;
  transform: rotate(45deg);
}
.obj03_wrap {
  right:calc(-1*clamp(200px,13.54%,260px)/2);
  top:calc(50% - clamp(200px,13.54%,260px)/2);
  width:clamp(200px,13.54%,260px);
  height:auto;
  aspect-ratio:1/1;
}
.obj03_wrap .obj03 {
  background-color: var(--yellow);
  width:100%;
  height:100%;
  border-radius: 50%;
}


@media (max-width: 768px) {
  .top_recruit .container {
    flex-direction: column;
    gap:var(--size80)
  }
  .top_recruit .container > * {
    width:100%;
  }
  .top_recruit .container .txt_box {
    padding-right:0;
    padding-bottom:var(--size48);
  }
  .obj02_wrap {
    bottom:clamp(60px,10%,142px);
  }
}


/*--------------------
　top_news
---------------------*/
.top_news:before, .top_news:after{
  content:"";
  width:min(3.125%,60px);
  height:90%;
  position:absolute;
  background-color: var(--yellow);
  transition:transform .5s var(--easeinout);
} 
.top_news:before {
  left:0;
  top:0;
  transform: scaleY(0);
  transform-origin: top;
}
.top_news:after {
  right:0;
  bottom:0;
  transform: scaleY(0);
  transform-origin: bottom;
}
.top_news.view:before, .top_news.view:after {
  transform: scaleY(1);
}

.top_news .container {
  justify-content: space-between;
}
.top_news .container .txt_box {
  width:min(29%,415px);
}
.top_news .container .news_box {
  width:min(59.44%,850px);
}

@media (max-width: 768px) {
  .top_news .container  {
    flex-direction: column;
    gap:var(--size80)
  }
  .top_news .container .txt_box {
    width:100%
  }
  .top_news .container .news_box {
    width:100%
  }
}