@charset "UTF-8";
/* CSS Document */
body {
  overflow-x: hidden;
  color: #050505;
  font-size: 1em;
}
/*////section-top始まり////*/
.section-top {
  margin-top: 7.4vh;
  position: relative;
  border: 0;
  height: 0;
  padding-top: 70%;
  background-image: url("../images/top_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body {
  background-color: #050505;
  color: #fff;
  font-size: 16px;
}
.big-h1 {
  color: #fff;
  font-size: 154px;
  text-align: left;
  text-shadow:
    0.01em 0.01em 0 #aaa, 0.02em 0.02em 0 #999, 0.03em 0.03em 0 #999, 0.04em 0.04em 0 #888, 0.05em 0.05em 0 #888, 0.06em 0.06em 0 #777, 0.07em 0.07em 0 #777, 0.08em 0.08em 0 #666,
}
h1 span {
  font-size: 106px;
}
.mini-h1 {
  position: relative;
  margin: 0 -17px;
}
.top-text {
  position: absolute;
  top: 64%;
  left: 64%;
  transform: translate(-50%, -60%);
  width: 100vw;
}
/*////section-top終わり/////*/
.block{
  margin: 0 auto;
}

.section-title p {
  width: 74vw;
  margin-top: 30px;
  font-size: 1.2rem;
  line-height: 2;
}
.title-video {
  display: flex;
}
video {
  width: 30vw;
  height: auto;
}
.section-title {
  width: 20%;
}
.block p{
  font-size: 2.6rem;
  margin-bottom: -15vh;
}
.div-video p {
  margin-bottom: 10px;
  font-size: 14px;
}
.service-text {
  display: flex;
  gap: 230px;
}
.service-message {
  font-size: 1.2rem;
  line-height: 2;
}
/*section-serviceの円のところ*/
.circles {
  max-width: 1220px;
  margin: 8vh auto 0;
}
.circles img {
  width: 162.5px;
}
.circle1 {
  width: 505px;
  height: 505px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0.5px solid #fff;
}
.circle-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.circle-flex {
  margin-top: -70px;
  display: flex;
  justify-content: center;
}
.circle2 {
  top: 596px;
  right: 134px;
  width: 505px;
  height: 505px;
  border-radius: 50%;
  border: 0.5px solid #fff;
}
.circle3 {
  top: 596px;
  right: 537px;
  width: 505px;
  height: 505px;
  border-radius: 50%;
  border: 0.5px solid #fff;
}
.circles p {
  font-size: 1.2rem;
  top: 130px;
  left: 90px;
  margin-bottom: 20px;
  line-height: 2;
}
.circles span {
  top: 170px;
  left: 110px;
  line-height: 2;
  margin-bottom: 40px;
}
.circles .hover {
  align-self: flex-end;
  position: relative;
  right: 80px;
}
.photo {
  width: 43%;
}
.top-works {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-works-text {
  /* display: block; */
  width: 40%;
}
.top-works-text p {
  margin-bottom: 20px;
  margin-top: 30px;
  line-height: 30px;
}
.top-members .section-content-wrapper {
  flex-direction: row-reverse;
}
.top-members {
  margin-top: 20vh;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}
.top-members-text {
  /* display: block;
  position: relative;
  right: 60px; */
  width: 40%;
}
.top-members-text p {
  margin-bottom: 30px;
  margin-top: 30px;
  line-height: 30px;
}
.members-flex {
  display: flex;
  flex-direction: row-reverse;
}
.top-recruit {
  margin-bottom: 200px;
}

.top-recruit {
  margin-top: 20vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-recruit-text {
  display: block;
  position: relative;
  left: 60px;
}
.top-recruit-text p {
  width: 400px;
  margin-top: 30px;
  line-height: 30px;
}
.link_btn {
  /* position: absolute;
    right:0px; */
  text-decoration: none;
  border-radius: 25px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 230px;
  height: 50px;
  transition: all 0.3s ease-out;
  margin-left: auto;
}
.link_btn:hover {
  animation-name: glitch_skew;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
}
.link_btn::after {
  content: "";
  box-shadow: #fff 0 0 15px 2px;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 2px;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.link_btn:hover::after {
  animation-name: glitch_scan;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  opacity: 1;
}
.link_btn img {
  left: 10px;
  width: 65px
}
@keyframes glitch_skew {
  0% {
    transform: skewX(0deg);
  }
  5% {
    transform: skewX(4deg);
    opacity: 0.5;
  }
  10% {
    transform: skewX(0deg);
    opacity: 1;
  }
  15% {
    transform: skewX(-7deg);
    opacity: 0.5;
  }
  20% {
    transform: skewX(0deg);
    opacity: 1;
  }
  45% {
    transform: skewX(5deg);
    opacity: 0.5;
  }
  50% {
    transform: skewX(0deg);
    opacity: 1;
  }
  55% {
    transform: skewX(0deg);
    opacity: 0.5;
  }
  60% {
    transform: skewX(0deg);
    opacity: 1;
  }
  75% {
    transform: skewX(4deg);
  }
  80% {
    transform: skewX(0deg);
  }
  85% {
    transform: skewX(-10deg);
    opacity: 0.5;
  }
  90% {
    transform: skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: skewX(0deg);
  }
}
@keyframes glitch_scan {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}
.top-members-btn {
  left: 277px;
  top: 260px;
  position: relative;
}
h1 {
  /*影を縦方向に重ねる*/
  text-shadow:
    0.01em 0.01em 0 #aaa, 0.02em 0.02em 0 #999, 0.03em 0.03em 0 #888, 0.04em 0.04em 0 #777, 0.05em 0.05em 0 #666, 0.06em 0.06em 0 #555, 0.07em 0.07em 0 #444, 0.08em 0.08em 0 #333, 0.09em 0.09em 0 #222, 0.1em 0.1em 0 #111;
}
.anim750 {
  transition: all 750ms ease-in-out;
}
.works-members-recruit {
  max-width: 1220px;
  margin: 20vh auto;
}
@media (min-width:481px) {
  .top-text h1 img[src="assets/images/top-h1.png"], .top-text h1 img[src="assets/images/top-sub.png"] {
    display: none;
  }
}
/*トップ画像の調節*/
@media (max-width:1280px) {
  .title-video {
    display: block;
  }
  .service-text {
    display: block;
    margin-bottom: -130px;
  }
  .service-text {
    display: block;
  }
  .members-flex {
    display: block;
  }
  .works-members-recruit img {
    bottom: -15px;
    right: 0;
    left: 0;
  }
  .top-members-text {
    right: 0;
  }
  .top-works-text {
    left: 0;
  }
  .top-works {
    display: flex;
  }
  .top-members {
    display: flex;
  }
  .top-recruit {
    display: flex;
  }
  .section-content-wrapper {
    display: block;
  }
  video {
    width: 74vw;
    height: auto;
  }
}
@media (max-width:1080px) {
  h1 {
    font-weight: bold;
    color: #fff;
  }
  .big-h1 {
    font-size: 100px;
  }
  h1 span {
    font-size: 76px;
  }
}
@media (max-width:820px) {
  .top-works, .top-members, .top-recruit {
    width: 178vw;
    display: block;
  }
  .top-works-text, .top-members-text {
    margin-top: 50px;
  }
}
@media (max-width:480px) {
  .section-top {
    margin-top: 200px;
  }
  .top-text h1 img[src="assets/images/mv-txt2.png"] {
    display: none;
  }
  .top-text h1 img[src="assets/images/top-h1.png"] {
    position: relative;
    top: -110px;
    right: 51px;
}
  .top-text h1 img[src="assets/images/top-sub.png"] {
    position: relative;
    top: -20px;
    right: 20px;
  }
  .big-h1 {
    font-size: 50px;
  }
  h1 span {
    font-size: 36px;
  }
  .section-title p, .service-message {
    font-size: 16px;
  }
  .top-recruit {
    margin-bottom: 100px;
  }
}
@media (max-width:1124px) {
  .circle1, .circle2, .circle3 {
    width: 350px;
    height: 350px;
  }
}
@media (min-width:768px) and (max-width:1124px) {}
@media (max-width:820px) {
  .circle-flex {
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
  }
  .circle1 {
    right: 13px;
    position: relative;
  }
}
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #333;
  text-align: center;
  color: #fff;
}
/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 260px;
}
/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}