@import url(common.css);

main {
  overflow-x: clip;
}

.hero {
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 0;
  img,
  video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.main-bg {
  position: relative;
  background-color: var(--bg-c);
  &::before,
  &::after {
    position: absolute;
    content: "";
    background-color: var(--primary-c);
  }
  &::before {
    inset: 0 auto 0 max(8vw, 3em);
    width: 2%;
    scale: 1 0;
    transform-origin: top;
  }
  &:has(.about.show)::before {
    animation: grow 20s linear forwards;
  }
  &:after {
    inset: 0 0 0 auto;
    width: 25%;
  }
  > * {
    position: relative;
    z-index: 2;
  }
}

@keyframes grow {
  to {
    scale: 1;
  }
}

.scroll {
  position: absolute;
  inset: 10vw 0 auto;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  color: var(--primary-c);
  font-weight: 300;
  z-index: 10;
  &::after {
    content: "";
    height: 6em;
    width: 1px;
    background-color: var(--primary-c);
    animation: scroll 3s linear infinite;
  }
}
@keyframes scroll {
  0%,
  50% {
    transform-origin: top;
    scale: 1 0;
  }
  50% {
    scale: 1;
  }
  51%,
  100% {
    transform-origin: bottom;
  }
  100% {
    scale: 1 0;
  }
}

.deco {
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--primary-c);
  font-size: max(5vw, 2em);
  writing-mode: vertical-rl;
  z-index: 10;
  text-box: trim-both cap alphabetic;
  padding: calc(5em - 18vw) 0.4em 0;
}

.about {
  padding-block: max(16vw, 100px) 0;
  .treat:not(.sp) {
    inset: max(2.5vw, 25px) 13.5vw auto auto;
  }
  .bg-images {
    display: flex;
    flex-direction: column;
    gap: max(4vw, 1em);
    width: 100vw;
    margin-left: -5vw;
    & > div {
      display: flex;
      &:first-child {
        img {
          &:first-child {
            width: 60%;
          }
          &:last-child {
            width: 40%;
          }
        }
      }
      &:not(:first-child) {
        img {
          width: calc(100% / 3);
        }
      }
    }
  }
  .body {
    position: absolute;
    inset: 0 8vw 0 50%;
    translate: 0 max(5vw, 50px);
    margin-block: auto;
    border-radius: max(4vw, 2.4em);
    height: fit-content;
    background-color: #fff;
    padding: max(10vw, 80px) max(4.4vw, 1.8em);
    display: flex;
    flex-direction: column;
    gap: 2em;
  }
  h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-c);
    font-size: max(1.6vw, 1.3em);
    font-weight: 300;
    img {
      width: 1.2em;
      padding-bottom: 0.3em;
    }
  }
  h3 {
    color: var(--primary-c);
    font-size: max(1.9vw, 1.3em);
    line-height: 1.9;
  }
  p {
    line-height: 2;
  }
}

.more {
  display: flex;
  align-items: baseline;
  gap: 1em;
  color: #fff;
  height: fit-content;
  background-color: #000;
  padding: 1.2em 2.6em 1em 2em;
  width: fit-content;
  border-radius: 2em;
  transition: background-color 0.4s;
  &::before {
    content: "";
    width: 2em;
    height: 10px;
    border-right: 1.6px solid;
    border-bottom: 1px solid;
    transform: skew(40deg);
  }
  &:hover {
    background-color: #888;
  }
}

.service,
.shop,
.tesla {
  h2 {
    margin-bottom: 2em;
    position: relative;
    padding-bottom: 1em;
    &::before {
      position: absolute;
      inset: auto 0 0;
      content: "";
      height: 4px;
      width: 100vw;
      background-color: var(--primary-c);
      margin-left: -18vw;
      scale: 0 1;
      transform-origin: left;
      transition: scale 2s linear;
    }
    &.show::before {
      scale: 1;
    }
    span {
      font-weight: 300;
      text-box: trim-both cap alphabetic;
      display: block;
      font-size: max(5vw, 2.6rem);
      margin-bottom: 1rem;
    }
  }
  .head {
    grid-area: 1/-1/1/-1;
    p {
      font-weight: 500;
      line-height: 1.7;
      font-size: max(1.5vw, 13.2px);
    }
  }
}

.service {
  padding: 14vw 0 max(22.5vw, 180px) 18vw;
  display: grid;
  row-gap: 6vw;
  > .treat:first-of-type {
    inset: max(2vw, 22px) min(-4vw, -26px) auto auto;
    width: max(22%, 150px);
  }
  > .treat:nth-of-type(2) {
    inset: 28% auto auto -5%;
    width: 32vw;
  }
  .treat.bottom {
    inset: auto -2vw 0 auto;
    width: 32vw;
    z-index: 2;
  }
  .head .more {
    margin-top: max(3vw, 30px);
  }

  .bg-images {
    position: relative;
    grid-area: 1/-1/1/-1;
    width: 70%;
    justify-self: end;
    margin-top: 1em;
    img:not(.treat img) {
      position: absolute;
      inset: 0 -10% auto auto;
      width: 88%;
      border-radius: max(3.2vw, 1em);
      &:nth-child(2) {
        width: max(24%, 100px);
        border-radius: max(1.6vw, 8px);
        inset: max(3vw, 22px) auto auto 14%;
      }
      &:nth-child(3) {
        width: max(30%, 130px);
        border-radius: max(1.7vw, 10px);
        inset: max(20vw, 160px) auto auto 0;
      }
    }
  }
  .body {
    grid-area: 2/1/3/2;
    background-color: #fff;
    padding: max(15vw, 140px) 5vw max(8vw, 60px);
    border-radius: max(4vw, 1.4em) 0 0 max(4vw, 1.4em);
  }
  .buttons {
    display: flex;
    gap: max(2vw, 1em);
    a {
      background-color: var(--primary-c);
      padding: 1.4em 1em;
      flex: 1;
      display: grid;
      color: #fff;
      font-size: max(1.6vw, 1.2em);
      grid-template-columns: 1fr auto;
      border-radius: 1em;
      align-items: end;
      gap: 10px;
      transition-property: translate, box-shadow;
      transition-duration: 0.5s;
      @media (any-hover: hover) {
        &:hover {
          translate: 0 -10px;
          box-shadow: 0 10px 20px rgb(0 0 0/0.2);
        }
      }
      span {
        font-size: 1rem;
        align-self: start;
        grid-area: 2/1/3/2;
      }
      &::after {
        content: "";
        grid-area: 1/2/3/3;
        width: 1rem;
        aspect-ratio: 1;
        border-top: 1px solid;
        border-right: 1px solid;
        rotate: 45deg;
        align-self: center;
      }
    }
  }

  .menu {
    padding-top: max(8vw, 60px);
    display: flex;
    flex-direction: column;
    gap: max(5vw, 50px);
    position: relative;

    ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: max(5vw, 30px) max(5%, 1em);
      counter-reset: num 0;
    }
    img {
      width: 100%;
      aspect-ratio: 16/11;
      object-fit: cover;
      border-radius: clamp(8px, 0.7vw, 14px);
    }
    li {
      display: flex;
      flex-direction: column;
      gap: 1em;
      counter-increment: num 1;
      translate: 0 30px;
      opacity: 0;
      transition-property: translate, opacity;
      transition-duration: 1s;
      &.show {
        opacity: 1;
        translate: 0;
      }
      p {
        line-height: 1.7;
        font-size: 15px;
      }
    }
  }
  h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: max(3vw, 2em);
      font-weight: 300;
    }
  }
  h4 {
    color: var(--primary-c);
    font-size: clamp(1.2em, 1.4vw, 22px);
    text-box: trim-both cap alphabetic;
    &::before {
      font-weight: 300;
      display: block;
      content: "service." counter(num);
      font-size: 1rem;
      padding-bottom: 6px;
    }
    span {
      font-size: 1rem;
    }
  }
  .more {
    align-self: end;
  }
}

.management {
  padding: max(5vw, 50px) 18vw max(8vw, 60px);
  margin-top: -15vw;
  > a {
    display: flex;
    overflow: hidden;
    border-radius: 2em;
    border: 5px solid var(--primary-c);
    position: relative;
    z-index: 3;
    img {
      max-width: 50%;
      min-height: 180px;
      transition: scale 0.4s;
      &:nth-of-type(1) {
        transform-origin: right;
      }
      &:nth-of-type(2) {
        transform-origin: left;
      }
    }
    &:hover img {
      scale: 1.07;
    }
  }
  .circle {
    position: absolute;
    inset: 0;
    margin: auto;
    display: grid;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: var(--primary-c);
    width: max(28%, 160px);
    place-items: center;
    place-content: center;
    color: #fff;
    text-align: center;
    font-weight: 300;
    font-size: max(1.4vw, 1.1em);
    gap: 8px;
  }
  span {
    font-weight: normal;
    font-size: 14px;
  }
  .more-arrow {
    margin-top: 0.6em;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 1em;
    &::before {
      content: "";
      width: 2em;
      height: 10px;
      border-right: 1.6px solid;
      border-bottom: 1px solid;
      transform: skew(40deg);
    }
  }
}

.shop {
  padding-inline: 18vw 0;
  .head {
    margin-bottom: max(3vw, 30px);
  }
  .body {
    background-color: #fff;
    margin-inline: -18vw 18vw;
    padding: max(7vw, 50px) 5vw max(7vw, 50px) 10vw;
    border-radius: 0 max(4vw, 1.4em) max(4vw, 1.4em) 0;
    display: flex;
    gap: max(5vw, 30px);
    align-items: center;
    > div {
      flex: 1;
      p {
        line-height: 2;
      }
    }
    img {
      border-radius: max(2vw, 12px);
    }
    .more {
      margin: 30px 0 0 auto;
    }
  }
  img {
    width: min(56%, 580px);
  }
}

.tesla {
  padding: max(28vw, 120px) 0 max(10vw, 100px) 18vw;
  margin-top: min(-15vw, -80px);
  display: grid;
  row-gap: max(24vw, 200px);
  > .treat {
    inset: max(5vw, 50px) auto auto -1.5vw;
    width: max(22%, 120px);
  }

  .bg-images {
    position: relative;
    grid-area: 1/-1/1/-1;
    width: 70%;
    justify-self: end;
    margin-top: 1em;
    z-index: 2;
    img {
      position: absolute;
      inset: -80% -18% auto auto;
      width: 100%;
      border-radius: max(3.2vw, 1em);
      &:nth-child(3) {
        width: max(36%, 120px);
        border-radius: max(1.6vw, 8px);
        inset: max(31vw, 210px) 30% auto auto;
      }
      &:nth-child(2) {
        width: max(42%, 125px);
        border-radius: max(1.7vw, 10px);
        inset: max(18vw, 150px) auto auto -14%;
      }
    }
  }
  .body {
    grid-area: 2/1/3/2;
    background-color: #fff;
    padding: max(8vw, 60px) 5vw max(8vw, 60px);
    border-radius: max(4vw, 1.4em) 0 0 max(4vw, 1.4em);
    display: flex;
    flex-direction: column;
    gap: max(5vw, 30px);
    position: relative;
    > .treat {
      inset: max(-3vw, -30px) auto auto -5vw;
      width: 36%;
    }
  }
  .lead {
    color: var(--primary-c);
    line-height: 2;
    text-align: center;
    word-break: keep-all;
  }
  h3 {
    align-self: center;
    width: max(11%, 80px);
  }
  .more {
    align-self: center;
  }
}

.logo-sec {
  position: relative;
  display: flex;
  .treat.pc {
    inset: -16vw -6vw auto auto;
    width: 26%;
  }
  & img:not(.treat img) {
    width: 50%;
  }
  h2 {
    position: absolute;
    height: fit-content;
    inset: 0;
    margin: auto;
    text-align: center;
    color: var(--primary-c);
    font-size: max(1.6vw, 11px);
    span {
      display: block;
      font-size: max(4vw, 1.6rem);
    }
  }
}

@media (width < 1024px) {
  .about {
    .treat:not(.sp) {
      right: 5vw;
      top: 60px;
    }
    .body {
      position: relative;
      inset: auto;
      padding-left: 10vw;
      margin-inline: auto -5vw;
      width: min(95vw, 600px);
      translate: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 76px;
      > .treat.sp {
        display: grid;
        inset: auto 10vw -64px auto;
        width: 110px;
      }
    }
  }

  .service {
    > .treat:nth-of-type(2) {
      top: 24%;
    }
    .bg-images {
      width: 60%;
    }
    .buttons {
      margin-inline: auto;
      width: min(100%, 450px);
      flex-direction: column;
      a {
        row-gap: 6px;
      }
      .pc {
        display: none;
      }
    }
    .menu {
      ul {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
  .management {
    .circle {
      gap: 6px;
      .more-arrow {
        margin-top: 0.8em;
      }
    }
  }
  .shop {
    .body {
      flex-direction: column;
    }
    img {
      width: 100%;
    }
  }
}

@media (width < 768px) {
  .main-bg {
    &:after {
      width: 16%;
    }
  }

  .service,
  .shop,
  .tesla {
    h2 {
      padding-bottom: 6px;
      margin-bottom: 1em;
      font-size: 11px;
      &::before {
        height: 2px;
      }
    }
  }
  .about {
    .body {
      gap: 1em;
      h3 {
        word-break: keep-all;
      }
      p {
        font-size: 12px;
      }
    }
  }

  .service {
    display: block;
    .treat.pc {
      display: none;
    }
    .treat.sp.bottom {
      display: grid;
      inset: auto auto 8vw 2vw;
      width: 140px;
    }
    .bg-images {
      margin-top: 4em;
      width: 90%;
      z-index: 2;
      .treat.sp {
        display: grid;
        width: 28vw;
        inset: 5vw auto auto -40%;
      }
      img:not(.treat img) {
        &:first-child {
          top: 4vw;
        }
        &:nth-child(2) {
          left: 5%;
          top: 0;
        }
        &:nth-child(3) {
          left: -16%;
          top: 30vw;
        }
      }
    }
    .buttons {
      a {
        padding-block: 1em;
        gap: 0;
        border-radius: 10px;
        span {
          font-size: 12.5px;
        }
      }
    }
    .body {
      width: 100vw;
      margin-top: 53vw;
      margin-left: -18vw;
      padding-inline: 5vw;
      border-radius: 0;
      position: relative;
      .treat.sp {
        display: grid;
        width: 22vw;
        inset: 2vw -3vw auto auto;
      }
    }
    .menu {
      .treat.pc {
        display: none;
      }
      ul {
        column-gap: 12px;
        grid-template-columns: repeat(2, calc((100% - 12px) / 2));
      }
      li {
        &::before {
          font-weight: 300;
          text-align: center;
          margin-bottom: -1em;
          color: var(--primary-c);
          content: "service." counter(num);
          font-size: 12px;
        }

        p {
          font-size: 11px;
        }
      }
    }
    h4 {
      text-align: center;
      word-break: keep-all;
      font-size: 13px;
      &::before {
        display: none;
      }
      span {
        font-size: 11px;
      }
    }
    .more {
      align-self: center;
    }
  }

  .management {
    padding-inline: 5vw;
    .treat.sp {
      display: grid;
      inset: auto -10vw 3vw auto;
      width: 140px;
      z-index: -1;
      img {
        scale: -1 -1;
      }
    }
    > a {
      border-width: 4px;
      border-radius: 1.4em;
    }
    .circle {
      span {
        font-size: 12px;
      }
    }
  }

  .shop {
    .body {
      margin-right: 5vw;
      padding-inline: 5vw;
      .more {
        margin-inline: auto;
      }
    }
  }

  .tesla {
    display: block;
    padding-bottom: 160px;
    > .treat {
      inset: 0 10vw auto auto;
      width: max(22%, 120px);
      z-index: 2;
      img {
        scale: -1 -1;
      }
    }
    .bg-images {
      width: 93%;
      margin-top: 2em;
      img {
        &:nth-child(3) {
          top: 55vw;
          right: 24%;
        }
        &:nth-child(2) {
          top: 40vw;
          right: 24%;
        }
      }
    }
    .body {
      margin-top: max(22vw, 96px);
      margin-left: -13vw;
      padding-top: max(60vw, 270px);
      padding-inline: 24px;
      width: 95vw;
      .treat.pc {
        inset: auto -10px -50px auto;
        width: max(30%, 160px);
        img {
          scale: -1 -1;
        }
      }
      .treat.sp {
        display: grid;
        inset: max(38vw, 190px) auto auto -7vw;
        width: max(26vw, 130px);
      }
    }
    .lead {
      text-align: start;
      word-break: normal;
      .pc {
        display: none;
      }
    }
  }
  .logo-sec {
    .treat.pc {
      display: none;
    }
    h2 {
      inset: -60px 0 auto;
    }
  }
}