:root {
  --window-width: 1920px;
  --window-height: 1080px;
  --bg-size: 100%;
  --white100: #fff;
  --textBlack: #707070;
  --textGray: #999999;
  --gray50: #e2e2e2;
  --gray80: #acacac;

  /* イージング */
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);

  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1);

  --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ページレイアウト */
.AppLayout {
  position: relative;
  overflow: hidden;
}

/* 背景 */
.MainBg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--bg-size);
  height: var(--bg-size);
  opacity: 0;
  z-index: 0;
  svg {
    display: block;
  }
}

/* ロゴ */
.MainLogo {
  position: fixed;
  top: 10rem;
  right: 10rem;
  width: 20%;
  height: auto;
  z-index: 10;
  @media (max-width: 768px) {
    right: 6rem;
    width: 30%;
  }
  @media (max-width: 480px) {
    top: 6rem;
    right: 3rem;
    width: 40%;
  }
  svg {
    display: block;
    path {
      opacity: 0;
      transform: translateY(50px);
    }
  }
}

.MainLogo.isActive {
  svg {
    path {
      opacity: 1;
      transform: translateY(0);
      transition: transform 0.65s cubic-bezier(0.2, 0.885, 0.32, 1.4),
        opacity 0.5s var(--easeOutQuad);
    }
    .LogoParts00 {
      transition-delay: 0s;
    }
    .LogoParts01 {
      transition-delay: 0.05s;
    }
    .LogoParts02 {
      transition-delay: 0.1s;
    }
    .LogoParts03 {
      transition-delay: 0.15s;
    }
    .LogoParts04 {
      transition-delay: 0.2s;
    }
  }
}

/* ヒーロービュー */
.Hero {
  position: relative;
  height: 100svh;
  margin-bottom: 49.6rem;
  @media (max-width: 1280px) {
    margin-bottom: 24.3rem;
  }
  @media (max-width: 768px) {
    margin-bottom: 19rem;
  }
  @media (max-width: 480px) {
    margin-bottom: 11rem;
  }
  .Title {
    position: absolute;
    bottom: 10rem;
    left: 10rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 7.5rem;
    line-height: calc(97 / 75);
    color: var(--white100);
    @media (max-width: 1280px) {
      font-size: 4.8rem;
      line-height: calc(62 / 48);
    }
    @media (max-width: 768px) {
      bottom: 5rem;
      left: 6rem;
      font-size: 3.2rem;
      line-height: calc(48 / 32);
    }
    @media (max-width: 480px) {
      bottom: 5rem;
      left: 3rem;
      font-size: 3.2rem;
      line-height: calc(48 / 32);
    }
  }
  .Title > span {
    display: inline-block;
    transform: translateY(30px);
    opacity: 0;
  }
}

/* スクロール */
.Scroll {
  position: absolute;
  right: 8.2rem;
  bottom: 10rem;
  font-family: ten-mincho, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: calc(40 / 12);
  color: var(--textBlack);
  writing-mode: vertical-rl;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.6s var(--easeOutQuad);
  @media (max-width: 1280px) {
    right: 9.45rem;
    bottom: 10rem;
  }
  @media (max-width: 768px) {
    right: 5.6rem;
    bottom: 5rem;
  }
  @media (max-width: 480px) {
    right: 2.5rem;
  }
}

.Scroll.isActive {
  opacity: 1;
  transform: translateY(0);
}


/* ステートメント */
.Statements {
  position: relative;
  margin-bottom: 95rem;
  @media (max-width: 1280px) {
    margin-bottom: 60rem;
  }
  @media (max-width: 768px) {
    margin-bottom: 24rem;
  }
  @media (max-width: 480px) {
    margin-bottom: 20rem;
  }
  .Inner {
    position: relative;
    padding: 0 11.6rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 28.6rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 19rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 8rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    span {
      display: inline-block;
    }
  }
  .Title::before {
    content: "";
    display: block;
    margin-top: -1.65rem;
    @media (max-width: 1280px) {
      margin-top: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-top: -1rem;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1rem;
    }
  }
  .Message {
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.7rem;
    line-height: calc(74 / 37);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      font-size: 2.4rem;
      line-height: calc(48 / 24);
    }
    @media (max-width: 768px) {
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    @media (max-width: 480px) {
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
    span {
      display: inline-block;
      transform: translateY(30px);
      opacity: 0;
    }
  }
  .Message::before {
    content: "";
    display: block;
    margin-top: -1.85rem;
    @media (max-width: 1280px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 768px) {
      margin-top: -1rem;
    }
    @media (max-width: 480px) {
      margin-top: -1.2rem;
    }
  }
  .Message::after {
    content: "";
    display: block;
    margin-bottom: -1.85rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1.2rem;
    }
  }
  .Bg {
    position: absolute;
    top: 16rem;
    right: 10rem;
    width: 141.3rem;
    @media (max-width: 1280px) {
      top: 9.6rem;
      width: 89.6rem;
    }
    @media (max-width: 768px) {
      position: relative;
      top: inherit;
      right: inherit;
      width: calc(100% - 12rem);
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      width: calc(100% - 6rem);
    }
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .Bg::after {
    content: "";
    display: block;
    padding-bottom: calc(817.9 / 1413.2 * 100%);
  }
}

/* サービス */
.Service {
  position: relative;
  padding-bottom: 89rem;
  overflow: hidden;
  @media (max-width: 1280px) {
    padding-bottom: 57.6rem;
  }
  @media (max-width: 768px) {
    padding-bottom: 79.6rem;
  }
  @media (max-width: 480px) {
    padding-bottom: 61rem;
  }
  .Inner {
    position: relative;
    padding: 0 11.6rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 28.6rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 19rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 8rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    span {
      display: inline-block;
    }
  }
  .Title::before {
    content: "";
    display: block;
    margin-top: -1.65rem;
    @media (max-width: 1280px) {
      margin-top: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-top: -1rem;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1.1rem;
    }
  }
  .Message {
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.8rem;
    line-height: calc(56 / 28);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      font-size: 1.8rem;
      line-height: calc(36 / 18);
    }
    @media (max-width: 768px) {
      font-size: 1.6rem;
      line-height: calc(36 / 16);
    }
    @media (max-width: 480px) {
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
    span {
      display: inline-block;
      transform: translateY(30px);
      opacity: 0;
    }
  }
  .Message::before {
    content: "";
    display: block;
    margin-top: -1.4rem;
    @media (max-width: 1280px) {
      margin-top: -0.9rem;
    }
    @media (max-width: 768px) {
      margin-top: -0.9rem;
    }
    @media (max-width: 480px) {
      margin-top: -0.8rem;
    }
  }
  .Message::after {
    content: "";
    display: block;
    margin-bottom: -1.4rem;
    @media (max-width: 1280px) {
      margin-bottom: -0.9rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -0.8rem;
    }
  }
  .Positions {
    display: flex;
    align-items: center;
    margin-bottom: 6.2rem;
    @media (max-width: 1280px) {
      margin-bottom: 5rem;
    }
    @media (max-width: 768px) {
      margin-bottom: 5rem;
    }
    @media (max-width: 480px) {
      margin-bottom: 3.2rem;
    }
  }
  .PositionItem {
    margin-right: 3.4rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.7rem;
    line-height: calc(74 / 37);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      font-size: 2.4rem;
      line-height: calc(48 / 24);
    }
    @media (max-width: 768px) {
      margin-right: 2rem;
      font-size: 2rem;
      line-height: calc(48 / 20);
    }
    @media (max-width: 480px) {
      margin-right: 1.2rem;
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
  }
  .PositionItem::before {
    content: "";
    display: block;
    margin-top: -1.85rem;
    @media (max-width: 1280px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.4rem;
    }
    @media (max-width: 480px) {
      margin-top: -0.8rem;
    }
  }
  .PositionItem::after {
    content: "";
    display: block;
    margin-bottom: -1.85rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.4rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -0.8rem;
    }
  }
  .Bg {
    position: absolute;
    top: 17.4rem;
    right: 10rem;
    width: 80rem;
    @media (max-width: 1280px) {
      width: 51.2rem;
      top: 10rem;
    }
    @media (max-width: 768px) {
      top: 20.5rem;
      right: -7.5rem;
      width: 61.4rem;
    }
    @media (max-width: 480px) {
      top: 30rem;
      right: -4rem;
      width: 33.1rem;
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
      transform-origin: center;
      opacity: 0;
      will-change: transform;
    }
  }
  .Bg::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  .BgInner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* プロジェクト */
.Projects {
  position: relative;
  margin-bottom: 25rem;
  @media (max-width: 1280px) {
    margin-bottom: 20rem;
  }
  @media (max-width: 768px) {x
    margin-bottom: 20rem;
  }
  @media (max-width: 480px) {
    margin-bottom: 20rem;
  }
  .Inner {
    position: relative;
    padding: 0 10.8rem 0 11.8rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 28.6rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 6rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 8rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    span {
      display: inline-block;
    }
  }
  .Title::before {
    content: "";
    display: block;
    margin-top: -1.65rem;
    @media (max-width: 1280px) {
      margin-top: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-top: -1rem;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1rem;
    }
  }
  .Unit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem 0;
    @media (max-width: 480px) {
      display: block;
    }
  }
  .Block {
    width: 78.8rem;
    @media (max-width: 1280px) {
      width: 50rem;
    }
    @media (max-width: 768px) {
      width: 48%;
    }
    @media (max-width: 480px) {
      width: 100%;
    }
    a {
      display: block;
      transform: translateY(30px);
      opacity: 0;
    }
    a:hover {
      .Image {
        image {
          transform: scale(1.1);
          opacity: 0.2;
          @media (max-width: 768px) {
            transform: scale(1);
            opacity: 1;
          }
        }
      }
      .Detail {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        @media (max-width: 768px) {
          opacity: 0;
        }
      }
    }
  }
  .Block:not(:nth-child(2n + 1)) {
/*    margin-left: 12.5rem;*/
/*    transform: translateY(6.3rem);*/
    padding-top: 6.3rem;
    @media (max-width: 1280px) {
/*      margin-left: 8rem;*/
/*      transform: translateY(4rem);*/
      padding-top: 4rem;
    }
    @media (max-width: 768px) {
/*      margin-top: 4rem;*/
/*      margin-left: auto;*/
      transform: translateY(0);
    }
    @media (max-width: 480px) {
      padding-top: 0;
    }
  }
  .Block + .Block {
    @media (max-width: 480px) {
      margin-top: 4rem;
    }
  }
  .Block {
    .Logo {
      height: 8.3rem;
      width: fit-content;
      margin: 0 auto;
      @media (max-width: 1280px) {
        height: 8.3rem;
      }
      @media (max-width: 768px) {
        height: 8.3rem;
      }
      @media (max-width: 480px) {
        height: 6.8rem;
      }
      img {
        height: 100%;
        width: auto;
      }
    }
  }
/*
  .Block:nth-child(2) {
    .Logo {
      width: 30rem;
      @media (max-width: 1280px) {
        width: 19rem;
      }
      @media (max-width: 768px) {
        width: 23.9rem;
      }
      @media (max-width: 480px) {
        width: 19rem;
      }
    }
  }
*/
  .Image {
    position: relative;
    margin-bottom: 6.3rem;
    @media (max-width: 1280px) {
      margin-bottom: 4rem;
    }
    @media (max-width: 768px) {
      margin-bottom: 3.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: 2.2rem;
    }
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
    }
    image {
      width: 100%;
      transform-origin: center;
      transition: 0.65s var(--easeOutCubic);
    }
  }
  .Image::after {
    content: "";
    display: block;
    padding-bottom: calc(591.472 / 788.629 * 100%);
  }
  .Logo {
    margin: 0 auto;
  }
  .Detail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%) scale(1.1);
    color: var(--textBlack);
    text-align: center;
    opacity: 0;
    transition: 0.65s var(--easeOutCubic);
    backface-visibility: hidden;
  }
  .DetailTitle {
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    line-height: calc(40 / 20);
  }
  .DetailText {
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
    line-height: calc(40 / 16);
  }
  .DetailMore {
    margin-top: 2rem;
    margin-bottom: -5.1rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    line-height: calc(26 / 18);
  }
}

/* メンバー */
.Member {
  position: relative;
  margin-bottom: 56.7rem;
  @media (max-width: 1280px) {
    margin-bottom: 36rem;
  }
  @media (max-width: 768px) {
    margin-bottom: 24rem;
  }
  @media (max-width: 480px) {
    margin-bottom: 19.7rem;
  }
  .Inner {
    position: relative;
    padding: 0 10rem 0 12rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 28.6rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 18rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 10rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    span {
      display: inline-block;
    }
  }
  .Title::before {
    content: "";
    display: block;
    margin-top: -1.65rem;
    @media (max-width: 1280px) {
      margin-top: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-top: -1rem;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1rem;
    }
  }
  .Unit {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem 2.66%;
    width: 80%;
    @media (max-width: 1280px) {
      margin: 0 -1rem;
    }
    @media (max-width: 768px) {
      margin: 0;
      width: 90%;
    }
    @media (max-width: 480px) {
      gap: 0;
      width: 100%;
    }
  }
  .Block {
    width: 23%;
/*
    @media (max-width: 1280px) {
      width: 21rem;
    }
*/
    @media (max-width: 768px) {
/*      width: calc((100% - 7rem) / 4);*/
    }
    @media (max-width: 480px) {
      width: 47%;
    }
  }
/*
  .Block:not(:first-child) {
    @media (max-width: 480px) {
      margin-top: 4rem;
    }
  }
*/
  .Block:not(:nth-child(5n + 1)) {
/*    margin-left: calc((100% - (30rem * 5)) / 4);*/
    @media (max-width: 1280px) {
/*      margin-left: calc((100% - (19.2rem * 5)) / 4);*/
    }
    @media (max-width: 768px) {
      margin-left: 0;
    }
  }
  .Block:not(:nth-child(4n + 1)) {
    @media (max-width: 768px) {
      margin-left: 0;
    }
    @media (max-width: 480px) {
      margin-left: 0;
    }
  }
  .Block:nth-child(even) {
/*    transform: translateY(6.3rem);*/
    padding-top: 6.3rem;
    @media (max-width: 1280px) {
/*      transform: translateY(4rem);*/
      padding-top: 6rem;
    }
    @media (max-width: 768px) {
/*      transform: translateY(3rem);*/ */
      padding-top: 4rem;
    }
    @media (max-width: 480px) {
      margin-left: auto;
/*      transform: translateY(0);*/
/*      padding-top: 0rem;*/
    }
  }
  .BlockInner {
    transform: translateY(20px);
    opacity: 0;
  }
  .Image {
    margin-bottom: 3rem;
    @media (max-width: 1280px) {
      margin-bottom: 1.9rem;
    }
    @media (max-width: 768px) {
      margin-bottom: 1.8rem;
    }
    @media (max-width: 480px) {
      margin-bottom: 2rem;
    }
    svg {
      width: 100%;
      height: auto;
    }
    image {
      width: 100%;
    }
  }
  .Detail {
    padding: 0 1.6rem;
    @media (max-width: 1280px) {
      padding: 0 1.2rem;
    }
  }
  .Name {
    margin-bottom: 1.4rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: calc(50 / 25);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      margin-bottom: 0.8rem;
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
  }
  .Name::before {
    content: "";
    display: block;
    margin-top: -1.25rem;
    @media (max-width: 1280px) {
      margin-top: -0.8rem;
    }
  }
  .Name::after {
    content: "";
    display: block;
    margin-bottom: -1.25rem;
    @media (max-width: 1280px) {
      margin-bottom: -0.8rem;
    }
  }
  .Meta {
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.8rem;
    line-height: calc(27 / 18);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      font-size: 1.2rem;
      line-height: calc(18 / 12);
    }
  }
}

/* コンタクト */
.Contact {
  position: relative;
  margin-bottom: 50.5rem;
  @media (max-width: 768px) {
    margin-bottom: 24rem;
  }
  .Inner {
    position: relative;
    padding: 0 11.58rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 9.7rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 6.8rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 8rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    &::before {
      content: "";
      display: block;
      margin-top: -1.65rem;
      @media (max-width: 1280px) {
        margin-top: -1.1rem;
      }
      @media (max-width: 768px) {
        margin-top: -1.2rem;
      }
      @media (max-width: 480px) {
        margin-top: -1rem;
      }
    }
    span {
      display: inline-block;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1rem;
    }
  }
  .Message {
    margin-bottom: 2rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: calc(50 / 25);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      margin-bottom: 1.2rem;
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
    @media (max-width: 768px) {
      font-size: 1.4rem;
      line-height: calc(24 / 14);
    }
    span {
      display: inline-block;
      transform: translateY(30px);
      opacity: 0;
    }
  }
  .Notice {
    margin-bottom: 5.3rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8rem;
    line-height: calc(27 / 18);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 3.2rem;
      font-size: 1.2rem;
      line-height: calc(18 / 12);
    }
    span {
      display: inline-block;
    }
  }
  .Form {
    display: block;
    width: 100.1rem;
    @media (max-width: 1280px) {
      width: 64rem;
    }
    @media (max-width: 768px) {
      width: 100%;
    }
  }
  .FormLabel {
    display: block;
    margin-bottom: 0.64rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: calc(33 / 22);
    color: var(--textGray);
    @media (max-width: 1280px) {
      margin-bottom: 0.4rem;
      font-size: 1.4rem;
      line-height: calc(24 / 14);
    }
    span {
      display: inline-block;
    }
  }
  .FormBlock {
    margin-bottom: 2rem;
    transform: translateY(30px);
    opacity: 0;
  }
  .FormUnit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    @media (max-width: 480px) {
      display: block;
    }
    .FormBlock {
      width: calc((100% - 3.2rem) / 2);
      @media (max-width: 480px) {
        width: 100%;
      }
    }
  }
  .FormSelect {
    position: relative;
    select {
      display: block;
      width: 100%;
      padding: 1.8rem 2.8rem;
      border-radius: 4px;
      border: 1px solid rgba(75, 73, 68, 0.2);
      font-family: ten-mincho, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.8rem;
      line-height: 1;
      @media (max-width: 1280px) {
        padding: 1.1rem 1.8rem;
        font-size: 1.2rem;
        line-height: calc(18 / 12);
      }
    }
    select:not(.isSelected) {
      color: var(--textGray);
    }
  }
  .FormSelect::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2.8rem;
    width: 1.3rem;
    height: 1rem;
    background: url(../images/ic_form_arrow.svg) no-repeat center;
    background-size: cover;
    transform: translateY(-50%);
    @media (max-width: 1280px) {
      right: 1.8rem;
      width: 0.8rem;
      height: 0.6rem;
    }
  }
  .FormInput {
    input {
      display: block;
      width: 100%;
      padding: 1.8rem 2.8rem;
      border-radius: 4px;
      border: 1px solid rgba(75, 73, 68, 0.2);
      font-family: ten-mincho, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.8rem;
      line-height: 1;
      @media (max-width: 1280px) {
        padding: 1.1rem 1.8rem;
        font-size: 1.2rem;
        line-height: calc(18 / 12);
      }
    }
    input::placeholder {
      color: rgba(75, 73, 68, 0.2);
    }
  }
  .FormTextArea {
    textarea {
      display: block;
      width: 100%;
      height: 31.5rem;
      padding: 1.8rem 2.8rem;
      border-radius: 4px;
      border: 1px solid rgba(75, 73, 68, 0.2);
      font-family: ten-mincho, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.8rem;
      line-height: 2;
      @media (max-width: 1280px) {
        height: 20rem;
        padding: 1.1rem 1.8rem;
        font-size: 1.2rem;
        line-height: calc(18 / 12);
      }
      resize: none;
    }
    textarea::placeholder {
      color: rgba(75, 73, 68, 0.2);
    }
  }
  .FormError {
    display: none;
    margin-top: 1.2rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    line-height: calc(21 / 14);
    color: #c36464;
    @media (max-width: 1280px) {
      margin-top: 0.8rem;
      font-size: 1.2rem;
      line-height: calc(18 / 12);
    }
  }
  .FormError.isActive {
    display: block;
  }
  .FormSubmit {
    display: block;
    width: 50rem;
    margin-top: 5rem;
    background-color: var(--gray80);
    border-radius: 4px;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(63 / 27);
    text-align: center;
    color: var(--white100);
    transform: translateY(30px);
    opacity: 0;
    transition: background-color 0.65s var(--easeOutCubic),
      letter-spacing 0.65s var(--easeOutCubic);
    cursor: pointer;
    @media (max-width: 1280px) {
      width: 32rem;
      margin-top: 3.2rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 480px) {
      width: 50%;
    }
  }
  .FormSubmit:hover {
    background-color: #999999;
    letter-spacing: 0.1em;
    @media (max-width: 768px) {
      background-color: var(--gray80);
      letter-spacing: 0;
    }
  }
}

/* カンパニー */
.Company {
  position: relative;
  @media (max-width: 768px) {
    margin-bottom: 6rem;
  }
  .isSpHidden {
    @media (max-width: 480px) {
      display: none;
    }
  }
  .Inner {
    position: relative;
    padding: 0 11.58rem 16.2rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem 9.8rem;
    }
    @media (max-width: 768px) {
      padding: 0 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem;
    }
  }
  .Title {
    margin-bottom: 9.6rem;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.7rem;
    line-height: calc(60 / 27);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      margin-bottom: 6rem;
      font-size: 1.8rem;
      line-height: calc(40 / 18);
    }
    @media (max-width: 768px) {
      margin-bottom: 8rem;
      font-size: 1.6rem;
      line-height: calc(40 / 16);
    }
    @media (max-width: 480px) {
      margin-bottom: 6rem;
      font-size: 2rem;
      line-height: calc(40 / 20);
    }
    span {
      display: inline-block;
    }
  }
  .Title::before {
    content: "";
    display: block;
    margin-top: -1.65rem;
    @media (max-width: 1280px) {
      margin-top: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-top: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-top: -1rem;
    }
  }
  .Title::after {
    content: "";
    display: block;
    margin-bottom: -1.65rem;
    @media (max-width: 1280px) {
      margin-bottom: -1.1rem;
    }
    @media (max-width: 768px) {
      margin-bottom: -1.2rem;
    }
    @media (max-width: 480px) {
      margin-bottom: -1rem;
    }
  }
  .CompanyName {
    margin-bottom: 2em;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: calc(50 / 25);
    color: var(--textBlack);
    transform: translateY(30px);
    opacity: 0;
    @media (max-width: 1280px) {
      font-size: 1.6rem;
      line-height: calc(32 / 16);
    }
    span {
      display: inline-block;
    }
  }
  .CompanyName::before {
    content: "";
    display: block;
    margin-top: -1.25rem;
    @media (max-width: 1280px) {
      margin-bottom: -0.8rem;
    }
  }
  .List {
    .Row {
      display: flex;
      align-items: flex-start;
      transform: translateY(30px);
      opacity: 0;
    }
    .Row:not(:nth-last-child(-n + 2)) {
      @media (max-width: 480px) {
        display: block;
        margin-bottom: 3.5em;
      }
    }
    .Row:nth-last-child(-n + 2) {
      .ListTitle {
        @media (max-width: 480px) {
          color: var(--textBlack);
          &::after {
            content: ":";
            padding-right: 4px;
          }
        }
      }
      @media (max-width: 480px) {
        .ListTitle::after {
          content: ":";
          padding-right: 4px;
        }
      }
    }
    .ListTitle {
      width: 21rem;
      font-family: ten-mincho, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 2.5rem;
      line-height: calc(50 / 25);
      color: var(--textGray);
      @media (max-width: 1280px) {
        width: 13.2rem;
        font-size: 1.6rem;
        line-height: calc(32 / 16);
      }
      @media (max-width: 480px) {
        width: inherit;
      }
    }
    .Description {
      font-family: ten-mincho, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 2.5rem;
      line-height: calc(50 / 25);
      color: var(--textBlack);
      a {
        font-family: ten-mincho, serif;
        font-weight: 400;
        font-style: italic;
        text-decoration: underline;
        transition: 0.65s var(--easeOutCubic);
      }
      a:hover {
        color: #555555;
        letter-spacing: 0.1em;
        @media (max-width: 768px) {
          color: var(--textBlack);
          letter-spacing: 0;
        }
      }
      @media (max-width: 1280px) {
        font-size: 1.6rem;
        line-height: calc(32 / 16);
      }
      span {
        display: inline-block;
      }
    }
  }
  .gMap {
    position: absolute;
    bottom: 6rem;
    right: 11.58rem;
    width: 42%;
    @media (max-width: 1280px) {
      bottom: 3rem;
      right: 10rem;
      width: 40%;
    }
    @media (max-width: 768px) {
      position: static;
      width: 86%;
      margin: 5rem auto 0;
    }
  }
  .gMap > div {
    position: relative;
    width: 100%;
    padding-top: 60%;
    
    border-radius: 20px;
    overflow: hidden;
  }
  .gMap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*    clip-path: url(#mapPath);*/
  }
}

/* フッター */
.Footer {
  position: relative;
  display: none;
  .Inner {
    position: relative;
    padding: 0 11.58rem 4.7rem;
    z-index: 1;
    @media (max-width: 1280px) {
      padding: 0 10rem 4rem;
    }
    @media (max-width: 768px) {
      padding: 0 5rem 6rem;
    }
    @media (max-width: 480px) {
      padding: 0 3rem 3rem;
    }
  }
  .Copy {
    display: block;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8rem;
    line-height: calc(27 / 18);
    color: var(--textBlack);
    @media (max-width: 1280px) {
      font-size: 1.2rem;
      line-height: calc(18 / 12);
    }
  }
}

.Footer.isActive {
  display: block;
}


/* コンタクト 下層 */
#contact {
  padding-top: 30rem;
  color: var(--textBlack);
  @media (max-width: 480px) {
    padding-top: 18rem;
  }
  .Contact {
    margin-bottom: 30rem;
    @media (max-width: 480px) {
      margin-bottom: 14rem;
    }
  }
  .confirm {
    margin-top: 6rem;
    font-size: 2.2rem;
    @media (max-width: 480px) {
      margin-top: 3rem;
      font-size: 1.5rem;
    }
    ul li {
      display: flex;
      line-height: 1.8;
      padding: 2rem 0;
      border-bottom: var(--textGray) solid 1px;
      @media (max-width: 480px) {
        flex-direction: column;
      }
      .label {
        width: 30rem;
        @media (max-width: 480px) {
          width: 100%;
          margin-bottom: 1rem;
        }
      }
      .input {
        width: calc(100% - 30rem);
        @media (max-width: 480px) {
          width: 100%;
        }
      }
    }
    .submitWrap {
      margin-top: 6rem;
      display: flex;
      gap: 2rem;
      @media (max-width: 480px) {
        margin-top: 5rem;
        gap: 4%;
      }
      input[type="button"] {
        width: 30rem;
        display: block;
        font-size: 2rem;
        border: var(--gray80) solid 1px;
        color: var(--gray80);
        padding: 1.4rem;
        border-radius: 4px;
        @media (max-width: 480px) {
          width: 48%;
          font-size: 1.6rem;
          padding: 1.6rem;
        }
      }
      input[type="submit"] {
        width: 30rem;
        display: block;
        font-size: 2rem;
        border: var(--gray80) solid 1px;
        background: var(--gray80);
        color: var(--white100);
        padding: 2rem;
        border-radius: 4px;
        @media (max-width: 480px) {
          width: 48%;
          font-size: 1.6rem;
          padding: 1.6rem;
        }
      }
    }
    .errorWrap {
      border: var(--textGray) solid 1px;
      padding: 3rem;
      line-height: 1.8;
      @media (max-width: 480px) {
        padding: 1.6rem;
      }
      p {
        font-size: 1.6rem;
        @media (max-width: 480px) {
          font-size: 1.4rem;
        }
      }
    }
  }
  .thanks p {
    font-size: 2.5rem;
    line-height: 1.6;
    margin-bottom: 8rem;
    @media (max-width: 480px) {
      font-size: 1.8rem;
      margin-bottom: 6rem;
    }
  }
  .thanks a {
    font-size: 2.5rem;
    display: inline-block;
    padding-bottom: 0.8rem;
    border-bottom: var(--textBlack) solid 1px;
    @media (max-width: 480px) {
      font-size: 1.8rem;
    }
  }
}