.globalNavWrap.nav {
  a[href] {
    color: var(--black);
    @media screen and (width <= 768px) {
      color: #fff;
    }
  }
}

.mainVisual {
  min-height: 55vw;
  @media (width <= 768px) {
    min-height: 135vw;
  }
  .mainVisualLogo {
    @media (width <= 768px) {
      top: 34%;
      transform: translateY(-50%);
      color: var(--black);
    }
  }
  .titleText {
    left: var(--global-margin);
    bottom: min(calc(39px * var(--global-fit-size)), 46.09px);
    @media (width <= 768px) {
      left: var(--global-margin);
      bottom: calc(209px * var(--global-fit-size));
    }
    > span {
      display: flex;
      overflow: hidden;
      &:has(.pageTitle) {
        margin-top: min(calc(15px * var(--global-fit-size)), 14.615px);
      }
    }
    .pageTitle,
    .minTitle {
      display: inline-block;
      transform: translateY(-100%);
    }
    .pageTitle {
      font-size: min(calc(60px * var(--global-fit-size)), 67.45px);
      letter-spacing: -0.02em;
      line-height: 1;
      @media (width <= 768px) {
        font-size: calc(38px * var(--global-fit-size));
        letter-spacing: 0.05em;
      }
    }
  }
  .image {
    position: absolute;
    top: 49.6%;
    right: calc(95px * var(--global-fit-size));
    width: calc(493px * var(--global-fit-size));
    height: auto;
    transform: translateY(-50%);
    @media (width <= 768px) {
      top: initial;
      bottom: calc(22px * var(--global-fit-size));
      right: initial;
      left: var(--global-margin);
      width: calc(100% - var(--global-margin) * 2);
      margin: 0 auto;
      transform: none;
    }
  }
}

.loaded .mainVisual .titleText {
  .pageTitle,
  .minTitle {
    animation: slideUpIn 1.1s var(--slide-up-in);
    animation-delay: 0.25s;
  }
  .pageTitle {
    animation-delay: 0.4s;
  }
}

.contactInfo {
  width: calc(100% - var(--global-margin) * 2);
  margin: calc(11px * var(--global-fit-size)) auto calc(142px * var(--global-fit-size));
  padding-top: calc(148px * var(--global-fit-size));
  border-top: 1px solid var(--light-gray);
  @media (width <= 768px) {
    margin-top: calc(28px * var(--global-fit-size));
    margin-bottom: calc(24px * var(--global-fit-size));
    padding-top: 0;
    border-top: 0;
  }
  .contactInfoItem {
    margin-bottom: calc(79px * var(--global-fit-size));
    @media (width <= 768px) {
      margin-bottom: calc(67px * var(--global-fit-size));
    }
    .minTitle {
      overflow: hidden;
      margin-bottom: calc(17px * var(--global-fit-size));
      line-height: 1em;
    }
    #mailTitle span {
      display: inline-block;
      min-width: max-content;
      transition: opacity 0.3s ease-out, transform 0.3s ease-out;
      &.animating {
        opacity: 0;
        transform: translateY(100%);
      }
    }
  }
  > p {
    margin-bottom: calc(65px * var(--global-fit-size));
    font-size: calc(21px * var(--global-fit-size));
    line-height: 1.74;
    @media (width <= 768px) {
      margin-bottom: calc(43px * var(--global-fit-size));
      font-size: calc(17px * var(--global-fit-size));
    }
  }
  small {
    font-size: calc(17px * var(--global-fit-size));
    line-height: 1.74;
    @media (width <= 768px) {
      font-size: calc(14px * var(--global-fit-size));
    }
  }
  .linkButton {
    position: relative;
    padding-right: calc(15px * var(--global-fit-size));
    @media (width <= 768px) {
      padding-right: calc(10px * var(--global-fit-size));
    }
    .moveArrow {
      top: calc(5px * var(--global-fit-size));
      right: 0;
      width: calc(10.86px * var(--global-fit-size));
      height: calc(11.21px * var(--global-fit-size));
      padding: 0;
      @media (width <= 768px) {
        top: 0;
      }
    }
    .arrow {
      width: calc(10.86px * var(--global-fit-size));
      height: calc(11.21px * var(--global-fit-size));
      &:first-child {
        margin-top: calc(26px * var(--global-fit-size));
      }
    }
    &:hover .moveArrow .arrowContainer {
      transform: translate(calc(10.34px * var(--global-fit-size)), calc(-13.04px * var(--global-fit-size)));
      @media (width <= 768px) {
        transform: translate(calc(11.14px * var(--global-fit-size)), calc(-13.04px * var(--global-fit-size)));
      }
    }
  }
}

.copy {
  font-family: "neue-haas-unica";
  font-size: calc(45.5px * var(--global-fit-size));
  line-height: 1.1;
  cursor: pointer;
  @media (width <= 768px) {
    font-size: calc(27px * var(--global-fit-size));
  }
  label,
  input {
    pointer-events: none;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }
  span {
    border-bottom: 1px solid var(--black);
    letter-spacing: -0.01em;
  }
}

/* .contactInfo内用の回転付きアニメーション */
@keyframes contactTransformRightLeftNav {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%,);
  }
}

@keyframes contactTransformLeftRightNav {
  0% {
    transform: translate(-100%, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes contactTransformRightLeftNavReverse {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes contactTransformLeftRightNavReverse {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 100%);
  }
}