@charset "UTF-8";

@media screen and (max-width: 900px) {
  main {
    justify-content: center;
  }

  .fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
  }

  .fixed-inner {
    display: none;
  }

  .content {
    overflow: hidden;
  }

  .scroll {
    bottom: 38%;
  }

  .percentage-inner {
    top: 80vh;
  }
}

@media screen and (max-width: 800px) {
  .scroll {
    position: inherit;
    right: unset;
    bottom: unset;
    margin-top: 30px;
  }

  .scroll-border {
    height: 60px;
  }

  .item-box {
    flex-direction: column;
  }

  .item-left {
    width: 100%;
  }

  .item-inner {
    width: 100%;
  }
}

@media screen and (min-width: 601px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 600px) {
  .pc {
    display: none !important;
  }

  .fixed {
    display: none;
  }

  .content {
    width: 100%;
    margin: unset;
    border-radius: unset;
    overflow: hidden;
  }

  .fv {
    padding: 88px 16px 12px;
  }

  .item-list {
    gap: 32px;
  }

  .item-box {
    gap: 20px;
  }

  .item-inner {
    padding-inline: 12px;
  }
}