.heroes {
        & .section {
            &.section2 {
                margin-top: 0;
                padding-top: 9rem;
                padding-bottom: 20rem;
                position: relative;
                top: 0;
z-index:-1;

           }
        }
    }
.heroes {
    & .section {
        &.sectionhero {
                            clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
                top: auto;
                width: 100%;
                padding-top: 8rem;
                padding-bottom: 22rem;
                margin: 16rem 0 -45rem;
                position: unset;
                z-index: -1;
            & .inner {
                .title {
                                            margin-bottom: 1rem;
                        margin-right: 1rem;
width:100%;
                        max-width: 85%;
                        margin-left: auto;
                }
}
        }
    }
}

.hero-top {
    & .hero-image {
        .photo {
mask-size: 120% 100%;
                margin-bottom: 1rem;
        }
    }
}

.w-7.mt-4.prof.tab {
  width: 76%;
  margin-top: 0;

  .font-13, .font-15 {
    font-size: 1em;
  }
}

.w-7.white.infos .font-13 {
  font-size: 1em;
  margin-top: 2em;
}

.w-7.white.infos p.font-15.mt-1-5 {
  max-width: 95%;
}

.heroes {
  & .bg1 {
    margin-top: 3.5em;
  }
}

.heroes {
        & .section {
            &.section2 {
                margin-top: 0;
                padding-top: 7rem;
                padding-bottom: 25rem;
            }
        }
    }

/****ここからPC固定を外した場合*****/

.hero-top {
    & .hero-image {
        .icon, .badge {
            position: absolute;
            top: 0;
            right: 10px;
            transform: translateY(-25%);
            z-index: 1;
            transform: translate(-11vw, 20%);
        }
    }
}

.heroes {
    & .section {
        &.section0 {
            & .hero-top {
                .icon {
                    position: absolute;
                    top: 6.5rem;
                    transform: translate(14vw, 80%);
                }
            }
        }
    }
}

    .heroes {
        & .section {
            &.sectionhero {
                & .inner {
                    .title {
                        margin-bottom: 1rem;
                        margin-right: 1rem;
                        width: 100%;
                        max-width: 85%;
                        margin-left: auto;
                        grid-template-columns: 1fr;
                    }
                }
            }
        }
    }

    .heroes {
        & .section {
            &.sectionhero {
                clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
                top: auto;
                width: 100%;
                padding-top: 6rem;
                padding-bottom: 26rem;
                margin: 24rem 0 -45rem;
                position: unset;
                z-index: -1;
            }
        }
    }

.heroes {
    & .section {
        &.section2, &.section3, &.section4 {
            position: relative;
            margin: -10rem 0 -35rem;
            padding-top: calc(10rem + 10vw);
            padding-bottom: 40rem;
            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 {
            &.section2 {
                margin-top: -8rem;
                padding-top: 7rem;
                padding-bottom: 23rem;
            }
        }
    }

.heroes {
    & .section {
        &.section4 {
            padding-bottom: 45rem;
        }
    }
}

.heroes {
    & .section {
        &.section1 {
            .hero-top {
                margin-top: -3em;
            }
        }
    }
}