@charset "utf-8";


#hero h2,
#hero .lead-group,
.hero-line_1,
.hero-line_2,
.hero-line_3,
.hero-line_4,
.hero-circle,
.sr-image{
  visibility: hidden;
}


/* hero
--------------------------*/
#hero {
  padding-top: 15%;
  margin-bottom: 9.38vw;
}

#hero .container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero-text {
  width: 38.54vw;
  padding-top: 5%;
  margin-right: 8.75%;
}

.hero-text .lead-group {
  margin-bottom: 23.5%;
}

.hero-text .lead-group p {
  margin-bottom: 2.5%;
}

.hero-image {
  width: 27.76vw;
}

.hero-image .image-group {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.hero-image .image-group img {
  width: 21.3875%;
}

.hero-image .overlay {
  width: 41.44vw;
  top: -35%;
  left: 10%;
}

.hero-circle {
  animation: rotate360 25s linear infinite;
  transform-origin: center center;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.scroll-indicator {
  display: flex;
  gap: 1%;
}

.scroll-line {
  position: relative;
  width: 1px;
  height: 6.25vw;
  overflow: hidden;
}

.scroll-line::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background: #4D769F;
  transform-origin: top;
  transform: scaleY(0);
  animation: scroll-akidesign 1.8s ease-in-out infinite;
}

@keyframes scroll-akidesign {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }

  20% {
    transform: scaleY(0);
    opacity: 1;
  }

  65% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

.scroll-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media screen and (max-width: 768px) {
  #hero {
    padding-top: 32.5%;
    margin-bottom: 26.67vw;
  }

  #hero .container {
    flex-direction: column;
  }

  .hero-text {
    width: 100%;
    padding-top: 0;
    margin-right: 0;
    order: 2;
  }

  .hero-text .lead-group {
    margin-bottom: 7.5%;
  }

  .hero-text .lead-group p {
    margin-bottom: 2.5%;
  }

  .hero-image {
    width: 72.5%;
  }

  .hero-image .image-group {
    margin-bottom: 20%;
  }

  .hero-image .overlay {
    width: 74.67vw;
    top: -25%;
    left: 57.5%;
  }

  .scroll-indicator {
    justify-content: flex-end;
    gap: 1.5%;
  }

  .scroll-line {
    height: 16vw;
  }

}

/* about-us
--------------------------*/

#about-us img {
  width: 30vw;
  margin-top: 2.5%;
  margin-left: 5%;
}

@media screen and (max-width: 768px) {

  #about-us .text-group {
    width: 80%;
    margin-top: 0;
    margin-left: 0;
  }

  #about-us img {
    width: 55%;
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top: -9.33vw;
    right: -3.5%;
    opacity: 0.5;
    z-index: -1;
  }

}


/* 共通要素
--------------------------*/
#about-us,
#service,
#product,
#works {
  margin-bottom: 15vw;
}

#about-us .container,
#service .container,
#product .container,
#works .container {
  display: flex;
  align-items: center;
}

.hero-text,
#about-us .text-group,
#service .text-group,
#product .text-group,
#works .text-group {
  margin-left: 12.5%;
}

#service .text-group,
#product .text-group,
#works .text-group {
  width: 51.41vw;
}

#service .image-group,
#product .image-group,
#works .image-group {
  width: 18.5vw;
  margin-left: 7.5%;
}

#service .image-group img,
#product .image-group img,
#works .image-group img {
  margin-bottom: 2.5vw;
}

#service .image-group img:last-of-type,
#product .image-group img:last-of-type,
#works .image-group img:last-of-type {
  margin-bottom: 0;
}

section .info-block {
  padding: 3.39vw 0;
  border-bottom: solid 0.5px #4D769F;

}

section .info-block:first-of-type {
  margin-top: 2.5%;
}

section .info-block .title {
  margin-bottom: 1.25%;
  display: flex;
  align-items: center;
  gap: 1.56vw;
}

@media screen and (max-width: 768px) {

  #about-us,
  #service,
  #product {
    margin-bottom: 26.67vw;
  }

  #works {
    margin-bottom: 50vw;
  }


  .hero-text,
  #about-us .text-group,
  #service .text-group,
  #product .text-group,
  #works .text-group {
    margin-left: 0;
  }

  #service .text-group,
  #product .text-group,
  #works .text-group {
    width: 80%;
  }

  #service .image-group,
  #product .image-group{
    width: 35%;
    margin-left: 0;
    position: absolute;
    bottom: -9.33vw;
    right: -3.5%;
    opacity: 0.5;
    z-index: -1;
  }



  #works .image-group {
    width: 35%;
    margin-left: 0;
    position: absolute;
    bottom: -24.25vw;
    right: -3.5%;
    opacity: 0.5;
    z-index: -1;
  }

  section .info-block {
    padding: 7.5vw 0;
  }

  section .info-block:first-of-type {
    margin-top: 5%;
  }

  section .info-block .title {
    margin-bottom: 1.85%;
    gap: 2.56vw;
  }

}