@charset "UTF-8";


#mainVideo {
  width: 100%;
  height: 300vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#mainVideo video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  position: sticky;
  top: 0;
  left: 0;
}

.main-contents {
  background: var(--white);
  position: relative;
  z-index: 2;
}
.main-contents > section {
  overflow: hidden;
}

#about {
  background: rgba(0, 0, 102, .8);
  color: var(--white);
  --color1: var(--white);
  --arrow-path-w: var(--arrow-path);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
#about h3.copy {
  line-height: 2;
}
#about .txtBox p {
  letter-spacing: .05em;
  line-height: 2.4;
}
#about picture:nth-of-type(1) {
  margin-bottom: 2.5rem;
}
@media(min-width: 576px) and (max-width: 767px){
  #about picture:nth-of-type(2) {
    margin-left: 50%;
    margin-bottom: -27.5%;
  }
}
@media(min-width: 768px){
  #about .txtBox {
    position: relative;
    z-index: 2;
  }
  #about h3.copy {
    font-size: 1.769em;
  }
  #about .txtBox p {
    max-width: 34em;
  }
  #about picture:nth-of-type(1) {
    margin-left: -35%;
    margin-bottom: 3rem;
  }
  #about picture:nth-of-type(2) {
    margin-left: 10%;
  }
}
@media(min-width: 992px){
  #about picture:nth-of-type(1) {
    margin-left: -50%;
    margin-bottom: 5rem;
  }
  #about picture:nth-of-type(2) {
    margin-left: 0;
  }
  #about h3.copy {
    font-size: 2.286em;
  }
}
@media(min-width: 1200px){
  #about picture:nth-of-type(1) {
    margin-left: -70%;
    margin-bottom: 5rem;
  }
  #about h3.copy {
    font-size: 2.571em;
  }
}




#service .strategy {
  position: relative;
}
#service .strategy::before {
  content: '';
  display: block;
  width: 100%;
  height: 12em;
  background: var(--white);
  position: absolute;
  top: 0;
  left: 0
}
.strategy-slider .card-img::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--color1);
  border-radius: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: rotateAnimation 5s linear infinite;
}





#contents-link .row:has(.card-link) {
  row-gap: calc(var(--section-gy)*0.5);
}
#contents-link .card._banner {
  border-bottom: 0;
  row-gap: 0;
}
#contents-link .card._banner .overlay {
  color: var(--color1);
  opacity: .4;
}
#contents-link .card._banner .card-link {
  color: var(--white);
  --arrow-path-w: var(--arrow-path);
}
#contents-link .card._banner .card-link .ttl {
  position: absolute;
  right: 2em;
  bottom: 2.5em;
}

@media(min-width: 992px){
  #contents-link .card._banner {
    padding-top: 2em;
  }
  #contents-link .card._banner .card-link .en_ttl {
    font-size: 3.571em;
  }
}


#our-contents {
  position: relative;
  z-index: 2;
}
#our-contents::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right 50% top 50%;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22956%22%20height%3D%221400%22%20viewBox%3D%220%200%20956%201400%22%20fill%3D%22none%22%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M956%20264.634V840.854L0%201400L0%20290.244L490.804%200L956%20264.634ZM209.124%20409.757L209.124%201020.12L738.339%20717.074V384.147L490.803%20243.294L209.124%20409.757Z%22%20fill%3D%22%23000066%22%2F%3E%20%3C%2Fsvg%3E');
  background-size: 120%;
  position: absolute;
  right: 0;
  z-index: -1;
}
@media(min-width: 576px){
  #our-contents::before {
    width: 70%;
    height: 100%;
    background-position: right 0 top 35%;
    background-size: 100%;
  }
}


#recruit picture {
  margin-bottom: -2rem;
}
@media(min-width: 992px){
  #recruit picture {
    margin-bottom: -3rem;
  }
}