.heroes {
    & .section {
        &.sectionhero {
            z-index: 30;
                background: rgb(255, 253, 33);
overflow:hidden;
.inner{
                width: 100%;
                max-width: 100%;
.title{
    transform:;
margin-bottom:1rem;
margin-left:15rem;
width:60%;
}
}
        }
    }
}

.heroes {
    & .section {
        &.sectionhero {
            position: relative;
            margin: 0 0 -35rem;
            padding-top: 20rem;
            padding-bottom: 50rem;
            clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
            top: calc(9.85rem - max(0.5rem, (100vw - var(--container-width)) * 0.109) - 2px);
width:100%;
        }
    }
}

.heroes #slider1{

}

.heroes #slider1 li{
}

img.scroll {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
bottom:55%;
animation: poyoyon2 1s ease-in-out infinite;
}
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
.section1 img.scroll {
bottom:0%;
}
.sectionhero img.scroll {
    left: auto;
   right: 12%;
    transform: none;
    bottom: auto;
    top: 19%;
}
.section2 img.scroll {
bottom:53%;
}

.w-7.mt-4.prof.pc {
  width: 22em;
}


/******ここから下、ヒーロー詳細で固定しない場合******/

.heroes {
    & .section {
        &.section0 {
            .hero-top {
                margin-top: -1.5rem;
            }
        }
    }
}
.heroes {
    & .section {
        &.section1 {
            .hero-top {
                margin-top: 2em;
            }
        }
    }
}
.hero-top {
    & .hero-image {
        .icon, .badge {
            position: absolute;
            top: 0;
            right: 10px;
            transform: translateY(-25%);
            z-index: 1;
        }
    }
}


.heroes {
    & .section {
        &.section2, &.section3, &.section4 {
            position: relative;
            margin: -10rem 0 -35rem;
            padding-top: calc(10rem + 10vw);
            padding-bottom: 35rem;
            clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
            top: calc(9.85rem - max(0.5rem,(100vw - var(--container-width))* 0.109));
        }
    }
}
.heroes {
    & .section {
        &.section0 {
            & .hero-top {
                .icon {
                    position: absolute;
                    top: 4.1rem;
                }
            }
        }
    }
}
.heroes {
    & .section {
        &.sectionhero {
            position: relative;
            margin: 2em 0 -35rem;
            padding-top: 15rem;
            padding-bottom: 30rem;
            clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
            top: calc(9.85rem - max(0.5rem,(100vw - var(--container-width))* 0.109) - 2px);
            width: 100%;
        }
    }
}
.heroes {
    & .section {
        &.section2 {
            padding-bottom: 32rem;
margin-top:-10rem;
        }
    }
}
.heroes {
    & .section {
        &.section4 {
            padding-bottom: 40rem;
        }
    }
}


.heroes {
    & .section {
        &.sectionhero {
            & .inner {
                .title {
                    display: grid;
                    max-width: var(--container-width);
                    gap: 1em;
                    grid-template-columns: 60% 1fr;
                    margin-bottom: 1rem;
                    margin: 0 auto 1em;
                    padding-left: 2em;
                }
            }
        }
    }
}