/* -----------------------------------------------------------
©PFU Limited
----------------------------------------------------------- */

.section {
  &.-ourBusinesses {
    padding-top: 40px;
    padding-bottom: 80px;

    @media (min-width: 561px) {
      padding-top: 120px;
    }
  }
}

/* -----------------------------------------------------------
ttlArea
----------------------------------------------------------- */
.ttlArea {
  position: relative;
  width: 100%;
  padding: 66px calc(100% * 32 / 390);
  background: url("/ptw/images/mainVisual.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  @media (min-width: 769px) {
    padding: 54px calc(100% * 80 / 1440);
  }
}

.ttlArea_inner {
  /* position: relative; */
  z-index: 0;
  background: none;
  @media (max-width: 768px) {
    &::before {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(90deg, #0338d7cc, #091d5ccc);
      z-index: 2;
    }
  }
}

.ttlArea_slide {
  height: 100%;
  width: auto;
  aspect-ratio: 890 / 490;
  position: relative;
  margin-left: auto;
  margin-right: 0;
  z-index: 1;
  background-color: #163182;
  @media (min-width: 769px) {
    width: 60%;
  }
}

.ttlArea_slideImage {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;

  animation: image-switch-animation 21s infinite;
  width: 100%;
  height: 100%;

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }
  4.285% {
    opacity: 1;
  } /* fade in  (0.9s) */
  17.142% {
    opacity: 1;
  } /* keep     (2.7s) */
  21.428% {
    opacity: 0;
  } /* fade out (0.9s) */
  100% {
    opacity: 0;
  }
}

.ttlArea_slideImage:nth-of-type(1) {
  animation-delay: 0s;
}
.ttlArea_slideImage:nth-of-type(2) {
  animation-delay: 3s;
}
.ttlArea_slideImage:nth-of-type(3) {
  animation-delay: 6s;
}
.ttlArea_slideImage:nth-of-type(4) {
  animation-delay: 9s;
}
.ttlArea_slideImage:nth-of-type(5) {
  animation-delay: 12s;
}
.ttlArea_slideImage:nth-of-type(6) {
  animation-delay: 15s;
}
.ttlArea_slideImage:nth-of-type(7) {
  animation-delay: 18s;
}

.ttlArea_txtArea {
  width: auto;
  display: inline-block;

  z-index: 3;
}

.word {
  line-height: 1.3em;
  font-weight: 700;
  font-size: 2.6rem;

  @media (min-width: 391px) {
    font-size: 3.4rem;
  }
  @media (min-width: 561px) {
    font-size: 5.2rem;
  }

  @media (min-width: 1280px) {
    font-size: 7.3rem;
  }
  text-transform: uppercase;
  transform: translateX(-110%) skewX(8deg);
  animation: wordIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.ttlArea_ttl {
  overflow: hidden;
  position: relative;
  padding-left: 80px;
  @media (max-width: 768px) {
    text-shadow: none;
  }
}

/* cover */
.ttlArea_ttl::before,
.ttlArea_ttl::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  animation: coverMove 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}

.ttlArea_ttl::before {
  background-color: #fff;
  animation-delay: 0.5s;
}

.ttlArea_ttl::after {
  background-color: #163182;
  animation-delay: 0.66s;
}

/* keyframes */
@keyframes coverMove {
  to {
    transform: translateX(101%);
  }
}

@keyframes wordIn {
  to {
    transform: translateX(0) skewX(0deg);
  }
}

.catchcopy {
  color: #fff;
  font-size: 1.5rem;
  margin-top: 32px;
  line-height: 200%;
  padding-inline: 80px;
}

/* -----------------------------------------------------------
loopTxt
----------------------------------------------------------- */
.loopTxt {
  opacity: 0.06;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1360px;
  font-family: "Spartan", sans-serif;
  font-weight: 800;
  font-size: 12rem;
  line-height: 0.62;
  text-wrap: nowrap;
  color: #fff;
  translate: -50% 0;

  @media (min-width: 769px) {
    width: 1840px;
    font-size: 16rem;
  }
}

.loop {
  -webkit-animation: loop 60s 0s linear infinite;
  animation: loop 60s 0s linear infinite;
}

.loop2 {
  -webkit-animation: loop 60s -20s linear infinite;
  animation: loop 60s -20s linear infinite;
}

.loop3 {
  -webkit-animation: loop 60s -40s linear infinite;
  animation: loop 60s -40s linear infinite;
}

@-webkit-keyframes loop {
  0% {
    translate: 100% 0;
  }
  100% {
    translate: -200% 0;
  }
}

@keyframes loop {
  0% {
    translate: 100% 0;
  }
  100% {
    translate: -150% 0;
  }
}

.carousel .txt {
  margin-top: 16px;
}

.carousel_body {
  @media screen and (min-width: 561px) {
    width: 496px;
    height: 292px;
  }
}