#top #visual {
  position: relative;
  background: url(/recruit/assets/image/top/visual-bg.jpg) no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
#top #visual #visual-slider {
  position: absolute;
  height: calc(100vh - 120px);
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  animation: slideIn 2s forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#top #visual #visual-slider #visual-slider-in {
  animation: 40s linear infinite sliderAnimation;
  display: flex;
  width: -moz-min-content;
  width: min-content;
}
#top #visual #visual-slider img {
  height: 80vh;
  width: auto;
  aspect-ratio: 254/50;
  max-width: none;
}
@keyframes sliderAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
#top #visual #visual-text {
  position: relative;
  z-index: 2;
  max-width: 570px;
  padding-top: 140px;
}
#top #visual #visual-text a {
  display: inline-block;
  color: #fff;
  background-color: #0068B4;
  border-radius: 6px;
  line-height: 1;
  padding: 8px 25px 10px;
  margin-left: 12px;
}
#top #visual #visual-text a:hover {
  background-color: #2c92db;
}
#top #visual #visual-scroll {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 0;
  color: #fff;
  height: 78px;
  width: 50px;
  display: flex;
  align-items: flex-end;
}
#top #visual #visual-scroll .bar {
  display: block;
  width: 1px;
  height: 78px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.4);
  overflow-y: hidden;
}
#top #visual #visual-scroll .bar::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  animation: scroll 1.5s infinite;
}
@keyframes scroll {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}
#top #visual #visual-scroll .en {
  padding-bottom: 10px;
  padding-left: 10px;
}
#top a {
  position: relative;
}
#top a .arrow {
  width: 52px;
  height: 52px;
  background-color: #0068B4;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  border-radius: 50%;
  transition: background-color 0.3s;
}
#top a:hover .arrow {
  background-color: #2c92db;
}
#top .content-block {
  padding: 150px 0 50px;
}
@media screen and (max-width: 767px) {
  #top .content-block {
    padding: 50px 0 50px;
  }
}
#top .content-block .bg {
  position: relative;
}
#top .content-block .bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
          clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
  opacity: 0.3;
}
#top .content-block .bg.bg1:before {
  background: linear-gradient(35deg, #FFD0F0 0%, #fff 80%);
  top: -150px;
  opacity: 0.6;
}
#top .content-block .bg.bg2:before {
  background: linear-gradient(90deg, #65ACFF 0%, #fff 70%);
  top: -300px;
  transform: rotate(180deg);
  height: 150%;
  opacity: 0.6;
}
#top .content-block .bg.bg3:before {
  background: linear-gradient(90deg, #82FF72 0%, #fff 80%);
  top: -150px;
  height: 125%;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
#top .content-block .bg.bg4:before {
  background: linear-gradient(90deg, #FFFFA5 0%, #fff 70%);
  top: -100px;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
  transform: rotate(180deg);
  opacity: 0.6;
}
#top .content-block .inner {
  position: relative;
  z-index: 1;
}
#top .content-block h2 .en {
  font-size: clamp(5rem, 5vw, 6rem);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #top .content-block h2 .en {
    font-size: 4rem;
  }
}
#top .content-block h2 .jp {
  font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem);
}
@media screen and (max-width: 767px) {
  #top .content-block h2 .jp {
    font-size: 1.8rem;
  }
}
#top .content-block #threemin {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin {
    margin-bottom: 50px;
  }
}
#top .content-block #threemin a {
  display: block;
  position: relative;
}
#top .content-block #threemin a h2 {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  right: 50px;
  display: flex;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin a h2 {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    right: 0;
    bottom: 15px;
    padding: 0 15px;
  }
}
#top .content-block #threemin a h2 .text {
  color: #fff;
  font-size: clamp(2rem, 1.6307692308rem + 0.4807692308vw, 2.4rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin a h2 .text {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin a h2 .text {
    font-size: 2rem;
  }
}
#top .content-block #threemin a h2 .arrow {
  line-height: 0;
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin a h2 .arrow {
    width: 26px;
    height: 26px;
  }
  #top .content-block #threemin a h2 .arrow img {
    width: 6px;
  }
}
@media screen and (max-width: 767px) {
  #top .content-block #threemin a .image {
    background: #000;
  }
}
#top .content-block #field {
  background: url(/recruit/assets/image/top/field-bg.jpg) no-repeat center center/cover;
  border-radius: 30px;
  padding: 50px 5%;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  #top .content-block #field {
    height: auto;
    padding-bottom: 20px;
    background-size: 100% auto;
    background-position: top center;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  #top .content-block #field h2 {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  #top .content-block #field .layout {
    display: block;
  }
}
#top .content-block #field .layout .box {
  background-color: #0068B4;
  border-radius: 30px;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #top .content-block #field .layout .box {
    margin-bottom: 15px;
    display: block;
    width: 100%;
  }
}
#top .content-block #field .layout .box .image {
  border-radius: 30px 30px 0 0;
}
#top .content-block #field .layout .box .text {
  padding: 10px 20px 15px 20px;
}
#top .content-block #field .layout .box .text h3 {
  font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #top .content-block #field .layout .box .text h3 {
    font-size: 1.8rem;
  }
}
#top .content-block #field .layout .box .text p {
  font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem);
}
@media screen and (max-width: 767px) {
  #top .content-block #field .layout .box .text p {
    font-size: 1.5rem;
  }
}
#top .content-block #project {
  margin-bottom: 200px;
}
@media screen and (max-width: 767px) {
  #top .content-block #project {
    margin-bottom: 50px;
  }
}
#top .content-block #project h2 {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #top .content-block #project .layout {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  #top .content-block #project .layout a {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}
#top .content-block #project .layout a h3 {
  margin-top: 10px;
}
#top .content-block #people {
  margin-bottom: 300px;
}
@media screen and (max-width: 767px) {
  #top .content-block #people {
    margin-bottom: 50px;
  }
}
#top .content-block #people h2 {
  text-align: right;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #top .content-block #people h2 {
    margin-bottom: 0px;
  }
}
#top .content-block #people h3 {
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem);
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #top .content-block #people h3 {
    font-size: 1.8rem;
  }
}
#top .content-block #people h3 span {
  display: inline-block;
  border-bottom: 6px solid #000;
}
#top .content-block #people .layout {
  gap: 24px;
}
@media screen and (max-width: 767px) {
  #top .content-block #people .layout {
    flex-wrap: wrap;
    gap: 2%;
  }
  #top .content-block #people .layout a {
    width: 48%;
    margin-bottom: 15px;
  }
}
#top .content-block #people #interview {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  #top .content-block #people #interview {
    margin-bottom: 50px;
  }
}
#top .content-block #people #career {
  margin-bottom: 140px;
}
#top .content-block #people .people-layout {
  display: flex;
  gap: 15%;
}
@media screen and (max-width: 767px) {
  #top .content-block #people .people-layout {
    display: block;
  }
}
#top .content-block #people .people-layout .week {
  width: 27%;
}
@media screen and (max-width: 767px) {
  #top .content-block #people .people-layout .week {
    width: 100%;
    margin-bottom: 50px;
  }
  #top .content-block #people .people-layout .week h3 {
    margin-bottom: 0;
  }
}
#top .content-block #people .people-layout .week ul li {
  display: block;
  border-bottom: 1px solid #aaa;
}
#top .content-block #people .people-layout .week ul li a {
  position: relative;
  display: flex;
  padding: 13px 0;
  justify-content: space-between;
  align-items: center;
}
#top .content-block #people .people-layout .week ul li a .arrow {
  width: 28px;
  height: 28px;
}
#top .content-block #people .people-layout .week ul li a .arrow img {
  width: 6px;
}
#top .content-block #people .people-layout .crosstalk {
  width: 48%;
}
@media screen and (max-width: 767px) {
  #top .content-block #people .people-layout .crosstalk {
    width: 100%;
  }
  #top .content-block #people .people-layout .crosstalk h3 {
    margin-bottom: 15px;
  }
}
#top .content-block #people .people-layout .crosstalk .image {
  margin-bottom: 1rem;
}
#top .content-block #workstyle {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  #top .content-block #workstyle {
    margin-bottom: 50px;
  }
}
#top .content-block #workstyle h2 {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #top .content-block #workstyle h2 {
    margin-bottom: 20px;
  }
}
#top .content-block #workstyle .layout {
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  #top .content-block #workstyle .layout {
    display: block;
  }
}
#top .content-block #workstyle .layout .image {
  width: 60%;
}
@media screen and (max-width: 767px) {
  #top .content-block #workstyle .layout .image {
    width: 100%;
    margin-bottom: 10px;
  }
}
#top .content-block #workstyle .layout ul {
  width: 30%;
}
@media screen and (max-width: 767px) {
  #top .content-block #workstyle .layout ul {
    width: 100%;
  }
}
#top .content-block #workstyle .layout ul li {
  display: block;
  border-bottom: 1px solid #aaa;
}
#top .content-block #workstyle .layout ul li a {
  position: relative;
  display: flex;
  padding: 13px 0;
  justify-content: space-between;
  align-items: center;
}
#top .content-block #workstyle .layout ul li a .arrow {
  width: 28px;
  height: 28px;
}
#top .content-block #workstyle .layout ul li a .arrow img {
  width: 6px;
}
#top .content-block #recruit {
  position: relative;
  z-index: 1;
  background-color: #FFFFA5;
  padding: 100px 0;
}
@media screen and (max-width: 767px) {
  #top .content-block #recruit {
    padding: 30px 0;
  }
}
#top .content-block #recruit .inner {
  display: flex;
  gap: 10%;
}
@media screen and (max-width: 767px) {
  #top .content-block #recruit .inner {
    display: block;
  }
}
#top .content-block #recruit .inner .link {
  position: relative;
  display: flex;
  padding: 13px 0;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  border-bottom: 1px solid #aaa;
}
@media screen and (max-width: 767px) {
  #top .content-block #recruit .inner .link {
    width: 100%;
  }
}
#top .content-block #recruit .inner .link .arrow {
  width: 28px;
  height: 28px;
}
#top .content-block #recruit .inner .link .arrow img {
  width: 6px;
}