@import url(lower.css);
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

.top {
  padding: max(5vw, 50px) 0 0;
  video {
    display: block;
    width: max(50%, 340px);
    margin-inline: auto;
  }
  .inner {
    background: linear-gradient(#fff, var(--bg-c));
    padding: max(5vw, 50px) 5vw;
    width: 100vw;
    position: relative;
  }
  h2 {
    font-size: max(3.6vw, 1.4em);
    margin-bottom: 2em;
    letter-spacing: 0.08em;
  }
  p {
    margin-left: auto;
    width: fit-content;
    line-height: 2;
    font-size: max(1.3vw, 1em);
    position: relative;
    z-index: 2;
  }
  .infinite-swiper2 {
    position: absolute;
    inset: auto 0 max(5vw, 50px);
    width: 100vw;
    mix-blend-mode: overlay;

    .swiper-wrapper {
      transition-timing-function: linear;
    }
    .swiper-slide {
      font-size: max(16vw, 5em);
      line-height: 1;
      text-transform: capitalize;
      font-family: var(--serif);
      white-space: nowrap;
      width: fit-content;
      margin-right: 0.4em;
    }
  }
}

.mvv-area {
  background: linear-gradient(var(--bg-c), #fff);
  display: flex;
  gap: 2em;
  padding: max(5vw, 50px) 5vw;
  position: relative;
  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(var(--bg-c), transparent 30% 70%, #fff),
      url(../img/bg.png.webp) left/cover;
    opacity: 0.8;
    scale: -1 1;
  }
}
.mvv {
  position: relative;
  flex: 1;
  padding: 0;
  p {
    line-height: 1.8;
    &:is(.mission *) {
      width: min(100%, 520px);
    }
    &:is(.vision *) {
      width: min(100%, 500px);
    }
  }
}

.vision {
  padding-top: 15vw;
}
.title-common {
  margin-bottom: 3rem;
  h2 {
    font-size: max(2.6vw, 1.3em);
  }
  .en {
    margin-bottom: 3rem;
  }
}

.value {
  padding-block: 0 max(8vw, 60px);
  ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    justify-content: center;
    width: min(100%, 1200px);
    margin-inline: auto;
    gap: 5vw;
    counter-reset: num 0;
  }
  li {
    --p: max(2vw, 1.2em);
    padding: var(--p);
    border-radius: 1em;
    box-shadow: 5px 5px 10px rgb(0 0 0/0.2);
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 0.6em max(2vw, 1em);
    position: relative;
    counter-increment: num 1;
    &::before {
      position: absolute;
      inset: var(--p) var(--p) auto auto;
      content: "0" counter(num) ".";
      line-height: 1;
      font-size: 1.6em;
      font-family: var(--serif);
      opacity: 0.4;
    }
  }
  img {
    grid-area: 1/1/3/2;
    max-width: 100%;
    max-height: 120px;
    display: block;
    margin-inline: auto;
    align-self: center;
  }
  h3 {
    font-size: max(1.6vw, 1.1em);
    font-weight: 500;
    &:after {
      display: block;
      content: attr(data-en);
      font-size: 1rem;
      color: var(--secondary-c);
    }
  }
  p {
    line-height: 1.8;
  }
}

@media (width < 768px) {
  .top {
    .infinite-swiper2 {
      bottom: 0;
    }
  }
  .mvv-area {
    overflow: hidden;
    flex-direction: column;
    background: linear-gradient(var(--bg-c) 20%, #fff);
  }
  .vision {
    padding-block: 50px 2em;
  }
}

@media (width < 500px) {
  .pc {
    display: none;
  }
  .value ol {
    grid-template-columns: repeat(auto-fit, 100%);
  }
  .mvv-area {
    &::before {
      margin-top: auto;
      height: 100vw;
      aspect-ratio: 16/9;
      background: linear-gradient(
          to left,
          var(--bg-c),
          transparent 30% 70%,
          #fff
        ),
        url(../img/bg.png.webp) left/cover;
      rotate: 90deg;
      transform-origin: left bottom;
    }
  }
}
@media (width < 425px) {
  .value {
    li {
      display: flex;
      flex-direction: column;
    }
    img {
      max-height: 100px;
      margin-block: 1em;
    }
    h3 {
      text-align: center;
    }
  }
}