@charset "UTF-8";

.flex {
  display: flex;
}

@media screen and (max-width: 768px) {
  .flex {
    flex-direction: column;
  }
}

/* --------------------------------------------------
  MV
-------------------------------------------------- */

#mv {
  position: relative;
}
#mv #catch-phrase {
  color: #fff;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  left: 2.56%;
  bottom: 6.25%;
  z-index: 2;
}
#mv #catch-phrase strong {
  font-size: 130px;
  font-weight: 700;
  line-height: 1;
  display: block;
  animation: catch-phrase 1s ease-in-out;
  animation-fill-mode: forwards;
  clip-path: inset(0 100% 0 0);
}
#mv #catch-phrase p {
  margin-top: 5%;
  font-size: 2.8rem;
  animation: catch-phrase 1s ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  clip-path: inset(0 100% 0 0);
}
#mv #catch-phrase div {
  display: flex;
  align-items: center;
  gap: 20px;
}
#mv #catch-phrase div strong {
  animation-delay: 1s;
}
#mv .inner img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
#scroll-down {
  width: 120px;
  height: 120px;
  font-size: 18px;
  display: block;
  position: absolute;
  right: 4.39%;
  bottom: 10%;
}
#scroll-down svg {
  overflow: visible;
  animation: circular-text-rotate 10s linear paused infinite;
  animation-play-state: running;
}
#scroll-down path {
  fill: none;
}
#scroll-down text {
  fill: #fff;
}
#scroll-down img {
  margin: auto;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 35px;
  z-index: 2;
  transition: all .3s;
}
#scroll-down:hover img {
  transform: translateY(4px);
}

@media screen and (max-width: 768px) {
  #mv #catch-phrase strong {
    font-size: 15vw;
  }
  #mv #catch-phrase p {
    font-size: 4vw;
  }
  #mv #catch-phrase div {
    gap: 10px;
  }
  #mv .inner img {
    height: calc(100vh - 60px);
  }
  #scroll-down {
    display: none;
  }
}

@keyframes catch-phrase {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes circular-text-rotate {
  to {
    transform: rotate(1turn);
  }
}

/* --------------------------------------------------
  Section
-------------------------------------------------- */

/*
.slide-up {
  transform: translateY(40px);
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}
.slide-up.on {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}
*/

main section {
}
main section .inner {
  margin: 0 auto;
  width: 1170px;
}
main section h2 {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
main section h2::before {
  content: attr(data-title);
  color: var(--primary-color);
  font-size: 6rem;
}
main .detail-button a {
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 24px;
}
main .detail-button a span {
  width: 100px;
  height: 100px;
  background: var(--primary-color);
  border-radius: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .detail-button a:hover {
  text-decoration: none;
}
main .detail-button a:hover span img {
  transform: translateX(4px);
}

@media screen and (max-width: 768px) {
  main section .inner {
    width: 100%;
  }
  main section h2 {
    align-items: center;
  }
  main section h2::before {
    font-size: 3.2rem;
  }
  main .detail-button a {
    justify-content: center;
  }
  main .detail-button a span {
    width: 60px;
    height: 60px;
  }
  main .detail-button a span img {
    width: 50%;
    height: auto;
  }
}

/* --------------------------------------------------
  About
-------------------------------------------------- */

#about {
  background: #fff;
  position: relative;
  z-index: 2;
}
#about .inner {
  padding: 100px 0;
  display: flex;
  align-items: center;
  gap: 70px;
  position: relative;
}
#about .inner + div {
  width: 308px;
  flex-shrink: 0;
}
#about h2 {
  margin-bottom: 40px;
}
#about p {
  margin-bottom: 20px;
}
#about picture {
  width: 792px;
  flex-shrink: 0;
}
#about picture img {
  border-radius: 10px;
}
#about .ajipanda {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: all .5s;
  transition-delay: 2s;
}
#about.on .ajipanda {
  transform: translateY(0);;
}

@media screen and (max-width: 768px) {
  #about {
  }
  #about .inner {
    padding: 60px 15px;
    flex-direction: column;
    gap: 0;
  }
  #about .inner > div {
    width: 100%;
  }
  #about h2 + p::before {
    content: '';
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: url(../img/home/about.jpg) no-repeat center/cover;
    border-radius: 10px;
    aspect-ratio: 792/484;
    display: block;
  }
  #about picture {
    width: 100%;
  }
  #about picture img {
    display: none;
  }
  #about .ajipanda {
    width: 100px;
    height: auto;
  }
}

/* --------------------------------------------------
  Company
-------------------------------------------------- */

#company {
  background: var(--secondary-color);
  position: relative;
  z-index: 2;
}
#company .inner {
  padding: 100px 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 70px;
  position: relative;
}
#company .inner + div {
  width: 520px;
  flex-shrink: 0;
}
#company h2 {
  margin-bottom: 40px;
}
#company p {
  margin-bottom: 20px;
}
#company picture {
  width: 580px;
  flex-shrink: 0;
}
#company img {
  border-radius: 10px;
}
#company .ajipanda {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: all .5s;
  transition-delay: 2s;
}
#company.on .ajipanda {
  transform: translateY(0);;
}

@media screen and (max-width: 768px) {
  #company {
  }
  #company .inner {
    padding: 60px 15px;
    flex-direction: column;
    gap: 0;
  }
  #company h2 + p::before {
    content: '';
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: url(../img/home/company.jpg) no-repeat center/cover;
    border-radius: 10px;
    aspect-ratio: 580/485;
    display: block;
  }
  #company picture {
    width: 100%;
  }
  #company picture img {
    display: none;
  }
  #company .ajipanda {
    width: 60px;
    height: auto;
  }
}

/* --------------------------------------------------
  Service
-------------------------------------------------- */

#service {
  background: #fff;
  position: relative;
  z-index: 2;
}
#service .inner {
  padding: 100px 0;
  display: flex;
  align-items: center;
  gap: 70px;
  position: relative;
}
#service .inner > div {
  width: 308px;
  flex-shrink: 0;
}
#service h2 {
  margin-bottom: 40px;
}
#service p {
  margin-bottom: 20px;
}
#service picture {
  width: 100%;
}
#service img {
  border-radius: 10px;
}
#service .ajipanda {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: all .5s;
  transition-delay: 2s;
}
#service.on .ajipanda {
  transform: translateY(0);;
}

@media screen and (max-width: 768px) {
  #service {
  }
  #service .inner {
    padding: 60px 15px;
    flex-direction: column;
    gap: 0;
  }
  #service .inner > div {
    width: 100%;
  }
  #service h2 + p::before {
    content: '';
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: url(../img/home/service.jpg) no-repeat center/cover;
    border-radius: 10px;
    aspect-ratio: 580/485;
    display: block;
  }
  #service p {
    width: calc(100vw - 30px);
  }
  #service picture {
    width: 100%;
  }
  #service picture img {
    display: none;
  }
  #service .ajipanda {
    width: 100px;
    height: auto;
  }
}

/* --------------------------------------------------
  Recruit
-------------------------------------------------- */

#recruit {
  padding: 100px 0;
  background: var(--secondary-color);
  position: relative;
  z-index: 2;
}
#recruit .inner {
  padding: 30px;
  background: var(--primary-color);
  border-radius: 10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  position: relative;
}
#recruit .inner > div {
  width: 460px;
  flex-shrink: 0;
}
#recruit h2 {
  margin-bottom: 40px;
  color: #fff;
}
#recruit h2::before {
  color: #fff;
}
#recruit p {
  margin-bottom: 20px;
}
#recruit .detail-button {
  margin-right: 40px;
}
#recruit .detail-button a {
  color: #fff;
  justify-content: end;
}
#recruit .detail-button a span {
  background: #fff;
}
#recruit .detail-button a span img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(45%) saturate(7290%) hue-rotate(346deg) brightness(83%) contrast(123%);
}
#recruit picture {
  width: 580px;
  flex-shrink: 0;
}
#recruit img {
  border-radius: 10px;
}
#recruit .ajipanda {
  position: absolute;
  right: 0;
  bottom: -100px;
  transform: translateY(100%);
  transition: all .5s;
  transition-delay: 2s;
}
#recruit.on .ajipanda {
  transform: translateY(0);;
}

@media screen and (max-width: 768px) {
  #recruit {
    padding: 60px 15px;
  }
  #recruit .inner {
    padding: 30px 30px;
    flex-direction: column;
    gap: 0;
  }
  #recruit .inner > div {
    width: 100%;
  }
  #recruit h2 + p::before {
    content: '';
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: url(../img/home/recruit.jpg) no-repeat center/cover;
    border-radius: 10px;
    aspect-ratio: 580/485;
    display: block;
  }
  #recruit p {
    width: calc(100vw - 90px);
  }
  #recruit picture {
    width: 100%;
  }
  #recruit picture img {
    display: none;
  }
  #recruit .detail-button {
    margin-right: 0;
  }
  #recruit .detail-button a {
    justify-content: center;
  }
  #recruit .ajipanda {
    width: 100px;
    height: auto;
    bottom: -60px;
  }
}

/* --------------------------------------------------
  Related Links
-------------------------------------------------- */

#links {
  background: var(--secondary-color);
  position: relative;
  z-index: 2;
}
#links .inner {
  padding: 100px 0 50px;
}
#links h2 {
  margin-bottom: 40px;
  align-items: center;
}
#links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 0;
}
#links li {
  width: 370px;
  height: 100px;
  background: #ccc;
}

@media screen and (max-width: 768px) {
  #links {
  }
  #links .inner {
    padding: 60px 15px 30px;
  }
  #links ul {
    gap: 20px 0;
  }
  #links li {
    width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 370/100;
  }
}