:root {
  --sp-topPage-catchcopy-bottom: calc(489 / 375 * 100vw);
}

/* アニメーション指定 */
@keyframes circlefadein {
  0% {
    clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
  }
}

/* hover */
.aboutus-link-button:hover {
  opacity: 0.7;
}

/* KV */
.kv-wrapper {
  height: auto;
}

.kv-bg-wrapper {
  height: calc(1226 / 1440 * 100vw);
}

.top-kv-catchcopy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 581px;
}

.fadein-text {
  padding: 2px 12px 4px;
}

.fadein-text.long-text {
  padding: 2px 0 12px 8px;
}

.content-lead {
  padding: 59px 0;
}

.content-lead-wrapper {
  margin-top: calc(100vh - 72px);
}

.ttl-indent {
  display: inline-block;
}

/* About us */
.aboutus-content {
  background: url(/recruit/images/top_bg_pc.png) 0px 0px / 100% repeat;
  padding: 40px 10px;
}

.aboutus-list {
  width: min(801px, calc(100% - 20px));
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  gap: 24px;
}

.aboutus-item {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.aboutus-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.8);
  position: relative;
}

.aboutus-item:nth-child(odd)::before {
  content: "";
  backdrop-filter: blur(6px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.aboutus-item:nth-child(even) {
  flex-direction: row-reverse;
}

.aboutus-item.aboutus-story-item {
  background: unset;
  backdrop-filter: unset;
}

.aboutus-img-square {
  width: 374px;
  height: auto;
}

.aboutus-img-grid {
  background: #fff;
  width: 374px;
  display: flex;
  flex-flow: column;
  gap: 16px;
  overflow: hidden;
}

.grid-imagesInner {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.grid-imagesInner:nth-child(even) {
  translate: -210px;
}

.gid-image {
  width: 140px;
  height: 140px;
}

.aboutus-img-circle {
  border-radius: 342px;
  width: 342px;
  height: 342px;
  flex-shrink: 0;
}

.circle-fadein {
  animation-name: circlefadein;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}

.aboutus-parallax-img-wrap {
  position: relative;
  width: 377px;
  height: 371px;
}

.aboutus-parallax-img {
  position: absolute;
}

.aboutus-parallax-img:nth-child(1) {
  top: 86px;
  left: 104.44px;
  z-index: 1;
}

.aboutus-parallax-img:nth-child(2) {
  top: 21px;
  left: 0;
}

.aboutus-parallax-img:nth-child(3) {
  top: 0;
  right: 30.92px;
}

.aboutus-parallax-img:nth-child(4) {
  top: 135px;
  right: 0;
}

.aboutus-parallax-img:nth-child(5) {
  top: 256px;
  left: 22.08px;
}

.aboutus-feature {
  justify-content: center;
  flex: 1 0 0;
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.aboutus-page-ttl {
  margin-top: -8px;
  margin-bottom: 0;
}

.page-ttl__bg-white {
  padding: 2px 8px 4px;
  background: #fff;
  width: fit-content;
  margin: 8px auto 0;
}

.aboutus-lead {
  color: var(--text-color-light-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

.aboutus-link-button {
  background: #242424;
  width: 226px;
  line-height: 23px;
  flex-shrink: 0;
  padding: 8.6px 16px 8.4px;
  margin: 0 auto;
  color: var(--text-color-white);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  transition: 0.2s opacity linear;
}

.site-banner {
  padding-bottom: 85px;
}

@media (orientation: portrait) {
  .kv-bg-wrapper {
    height: calc(959 / 375 * 100vw);
  }
}

@media not all and (min-width: 769px) {
  /* KV */
  .kv-bg-wrapper {
    height: calc(959 / 375 * 100vw);
  }

  .fadein-text {
    padding: var(--1px) var(--12px) var(--3px);
  }

  .fadein-text.long-text {
    padding: var(--1px) 0 var(--3px) var(--12px);
  }

  .top-kv-catchcopy {
    font-size: var(--44px);
    line-height: 1.37273;
    letter-spacing: calc(0.774 / 375 * 100vw);
    gap: var(--6px);
    bottom: var(--sp-topPage-catchcopy-bottom);
    margin-left: var(--12px);
  }

  .content-lead {
    padding: var(--24px) var(--16px) var(--40px);
  }

  .content-lead-wrapper {
    margin-top: calc(100vh - var(--88px));
  }

  /* About us */
  .aboutus-content {
    background: url(/recruit/images/top_bg_sp.png) 0px 0px / 100% repeat;
    padding: var(--40px) 0 0;
  }

  .aboutus-list {
    width: calc(100% - var(--32px));
    gap: var(--32px);
  }

  .aboutus-item {
    padding: var(--40px) 0;
    display: block;
    position: relative;
  }

  .aboutus-img-square {
    width: var(--311px);
    margin: 0 auto;
    display: block;
  }

  .aboutus-img-grid {
    background: none;
    width: 100%;
    height: var(--296px);
    gap: var(--16px);
  }

  .grid-imagesInner {
    gap: var(--8px);
  }

  .grid-imagesInner:nth-child(even) {
    translate: calc(-1 * var(--210px));
  }

  .gid-image {
    width: var(--140px);
    height: var(--140px);
  }

  .aboutus-img-circle {
    border-radius: var(--342px);
    width: var(--342px);
    height: var(--342px);
  }

  .aboutus-parallax-img-wrap {
    width: 100%;
    height: var(--371px);
  }

  .aboutus-parallax-img:nth-child(1) {
    width: var(--188px);
    height: var(--142px);
    top: var(--86px);
    left: calc(68.34 / 375 * 100vw);
  }

  .aboutus-parallax-img:nth-child(2) {
    width: var(--117px);
    height: var(--191px);
    top: var(--21px);
    left: calc(-1 * var(--16px));
  }

  .aboutus-parallax-img:nth-child(3) {
    width: var(--100px);
    height: var(--100px);
    top: 0;
    right: var(--14px);
  }

  .aboutus-parallax-img:nth-child(4) {
    width: var(--161px);
    height: var(--191px);
    top: var(--135px);
    right: calc(-1 * var(--16px));
  }

  .aboutus-parallax-img:nth-child(5) {
    width: var(--100px);
    height: var(--115px);
    top: var(--256px);
    left: calc(-1 * var(--16px));
  }

  .aboutus-feature {
    margin-top: var(--15px);
    gap: var(--24px);
  }

  .aboutus-item:nth-child(odd) .aboutus-feature {
    padding: 0 var(--16px);
  }

  .aboutus-page-ttl {
    margin-top: 0;
    text-align: left;
    position: absolute;
  }

  .aboutus-item:nth-child(1) .aboutus-page-ttl {
    top: var(--290px);
    left: var(--15px);
  }

  .aboutus-item:nth-child(2) .aboutus-page-ttl {
    top: var(--295px);
    left: var(--8px);
  }

  .aboutus-item:nth-child(3) .aboutus-page-ttl {
    top: var(--261px);
    left: var(--15px);
  }

  .aboutus-item:nth-child(4) .aboutus-page-ttl {
    top: var(--295px);
    left: var(--8px);
  }

  .aboutus-item:nth-child(5) .aboutus-page-ttl {
    top: var(--357px);
    left: var(--8px);
  }

  .page-ttl__bg-white {
    padding: var(--2px) var(--8px) var(--3px);
    margin: 0;
  }

  .ttl-indent {
    display: block;
    margin-top: var(--8px);
  }

  .aboutus-lead {
    font-size: var(--16px);
    line-height: var(--20px);
    line-height: 1.6;
  }

  .aboutus-link-button {
    width: var(--226px);
    line-height: var(--23px);
    padding: calc(8.6 / 375 * 100vw) var(--16px) calc(8.4 / 375 * 100vw);
    font-size: var(--16px);
  }

  .site-banner {
    padding-bottom: var(--79px);
  }
}