.serviceList {
    background-color: var(--white);
    padding: 48px 5% 64px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .serviceList {
        padding-bottom: 32px;
    }
    
}

.work {
    padding: 64px 5%;
    position: relative;
    background-image: url(/img/wrecker-bg-work.jpg);
    background-position: 40% top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    overflow: hidden;
}

.work .bg-diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 117%;
    height: 100%;
    background-color: var(--primary-bland-color);
    transform: translateX(-46%) skewX(-30deg);
}

.work .bg-diagonal--inner {
    position: relative;
    -webkit-transform: skewX(36.3deg);
    transform: skewX(36.3deg);
    /* -webkit-transform-origin: center center; */
    transform-origin: center center;
}

.work .bg-diagonal--img {
    position: absolute;
    -webkit-transform: translate(48%, 15%) rotate(-15deg);
    transform: translate(48%, 15%) rotate(-15deg);
}

.work .content--titleBox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 24px;
}

.work .content--title {
    color: var(--white);
}

.work .content--titleText {
    font-size: 3.6rem;
    width: fit-content;
    background-color: var(--secondary-bland-color);
    margin-top: 12px;
    padding: 12px;
    text-align: left;
}

.work .content--imgBox {
    width: 300px;
    height: 200px;
}

.work .content--img {
    width: 100%;
    position: relative;
}

.work .checkList {
    display: grid;
    margin-top: 40px;
    padding: 24px 0;
    /* background-image: url(/img/gradation-white2transparent_bgfilter.png); */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.45) 90%, rgba(255, 255, 255, 0) 100%);
    background-position: right top;
    background-repeat: repeat-y;
    background-size: auto 1px;
    position: relative;
}

.work .checkList::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 100vw;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
}

.work .checkListItem {
    padding-left: 56px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2;
    background-image: url(/img/icon_check.png);
    background-position: left 6px top 12px;
    background-size: 30px 22px;
    background-repeat: no-repeat;
    position: relative;
}

/* .work .checkListItem::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -54px;
    width: 33px;
    height: 24px;
    transform: translateY(-50%);
    background-image: url(/img/icon_check.png);
    background-size: contain;
    background-repeat: no-repeat;
} */

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .work {
        background-position: 55% center;
    }
    
    .work .content--imgBox {
        width: 210px;
        height: 140px;
    }

    .work .content--titleText {
        font-size: 3rem;
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .work {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .work .bg-diagonal {
        top: 0;
        right: 0;
        transform: translateX(-75%) skewX(-36.3deg);
    }
    
    .work .content--imgBox {
        flex: 0 1 100px;
        height: auto;
    }

    .work .content--titleBox {
        flex: 1 0;
        gap: 8px;
        align-items: center;
    }

    .work .content--title {
        flex: 1 0;
        gap: 8px;
        white-space: normal;
    }

    .work .content--titleText {
        font-size: 2rem;
        padding: 0 12px
    }

    .work .checkList {
        row-gap: 16px;
    }

    .work .checkListItem {
        padding-left: 48px;
        font-size: 2.1rem;
        line-height: 1.5;
        background-position: left 6px top 6px;
        background-size: 28px 21px;
    }
}

.movie {
    padding: 64px 5%;
    background-color: var(--black);
}

.movie .content--title {
    line-height: 1.5;
    text-align: center;
    white-space: normal;
}

.movie .grid-col2 {
    justify-content: space-evenly;
    margin-top: 40px;
    column-gap: 40px;
}

.movie .youtubeBox {
    position: relative;
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    padding-top: 56%;
}

/* .youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */

.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .movie {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .movie .content--title {
        font-size: 2.3rem;
        text-align: left;
    }

    .movie .grid-col2 {
        column-gap: 0;
    }

    .movie .youtubeBox {
        position: relative;
        width: 100%;
        /* aspect-ratio: 16 / 9; */
        padding-top: 56%;
    }
}

.feature {
    padding: 100px 5% 40px;
    background-color: var(--white);
}

.feature .emphasis {
    color: var(--secondary-bland-color);
}

.feature .content--box {
    width: 100%;
    background-color: var(--background-color-lightgrey);
    padding: 40px 60px 60px 60px;
}

.feature .content--title {
    font-size: 4.6rem;
    text-align: center;
}

.feature .before .content--subTitle {
    font-size: 4.6rem;
    color: var(--secondary-bland-color);
    padding-left: 140px;
    margin-top: 40px;
}

.feature .after .content--subTitle {
    font-size: 4.6rem;
    color: var(--secondary-bland-color);
    text-align: right;
    padding-right: 216px;
}

.feature .before .media {
    display: flex;
    align-items: center;
    column-gap: 24px;
    margin-top: 75px;
    position: relative;
}

.feature .after .media {
    display: flex;
    align-items: center;
    column-gap: 24px;
    margin-top: 8px;
    position: relative;
}

.feature .media--character {
    width: 85px;
    min-width: 85px;
}

.feature .media--img {
    width: 100%;
}

.feature .media--body {
    flex: 1 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 24px;
}

.feature .media--fukidashi {
    flex: 1 0;
    background-color: var(--white);
    position: relative;
    border-radius: 8px;
    padding: 2em 2em 2em 5em;
}

.feature .media--fukidashi::before {
    position: absolute;
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%; 
    left: -30px;
    border: 10px solid transparent;
    border-right: 22px solid var(--white);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg) translateY(-75%);
}

.feature .before .media--list {
    padding-left: 350px;
}

.feature .before .media--text {
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    list-style: disc;
}

.feature .before .media--imgBox {
    position: absolute;
    width: 316px;
    left: 130px;
}

.feature .after .media--list {
    padding-right: 360px;
}

.feature .after .media--text {
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    list-style: disc;
}

.feature .after .media--imgBox {
    position: absolute;
    width: 316px;
    right: 40px;
}

.feature .media--imgOnText {
    border-radius: 12px;
}

.feature .arrow {
    display: grid;
    place-items: center;
    margin-top: 104px;
}

.feature .before2After {
    width: 55px;
    height: auto;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .feature .content--title {
        font-size: 4.2rem;
    }

    .feature .content--box {
        padding: 5%;
    }

    .feature .before .content--subTitle {
        font-size: 4.2rem;
    }

    .feature .after .content--subTitle {
        font-size: 4.2rem;
        padding-right: 32px;
    }

    .feature .before .media {
        margin-top: 32px;
    }
    
    .feature .after .media {
        margin-top: 8px;
    }

    .feature .before .media--imgBox,
    .feature .after .media--imgBox {
        width: 180px;
    }
    
    .feature .after .media--imgBox {
        right: 24px;
    }

    .feature .media--imgOnText {
        width: 180px;
    }

    .feature .before .media--list {
        padding-left: 200px;
    }

    .feature .after .media--list {
        padding-right: 200px;
    }

    .feature .arrow {
        margin-top: 48px;
    }

    .feature .before2After {
        width: 40px;
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    

    .feature .content--title {
        font-size: 2.6rem;
        text-align: center;
    }

    .feature .before .content--subTitle,
    .feature .after .content--subTitle {
        padding-left: 0;
        padding-right: 0;
        font-size: 4rem;
        text-align: center;
    }

    .feature .content--subTitle {
        padding-left: 0;
        text-align: center;
    }

    .feature .before .media {
        flex-direction: column;
        row-gap: 24px;
        margin-top: 8px;
    }

    .feature .after .media {
        flex-direction: column;
        row-gap: 24px;
        margin-top: 8px;
    }

    .feature .media--body {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 24px;
    }

    .feature .media--fukidashi {
        padding: 2em 2em 2em 4em;
    }

    .feature .before .media--list,
    .feature .after .media--list {
        padding-left: 0;
        padding-right: 0;
    }

    .feature .before .media--text,
    .feature .after .media--text {
        padding-left: 0;
    }

    .feature .before .media--imgBox,
    .feature .after .media--imgBox {
        position: static;
        width: 100%;
    }

    .feature .media--imgOnText {
        width: 100%;
    }

    .feature .arrow {
        margin-top: 24px;
        margin-bottom: 24px;
    }

}

.point {
    padding: 80px 5%;
    background-color: var(--white);
}

.point .content--title {
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}

.point .content--textBox {
    margin-top: 24px;
}

.point .content--text {
    text-align: center;
    font-weight: bold;
}

.point .mediaBox {
    width: 100%;
    margin-top: 48px;
}

.point .mediaBox--inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.point .media {
    background-color: var(--background-color-lightgrey);
    margin-bottom: 120px;
    margin-left: 7.1428571428571vw;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
}

.point .media-rowReverse {
    margin-left: 0;
    margin-right: 7.1428571428571vw;
}

.point .media::after {
    background-color: var(--background-color-lightgrey);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 100vw;
    height: 100%;
    content: "";
}

.point .media-rowReverse::after {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.point .media--index {
    display: block;
    position: absolute;
    top: 20px;
    right: calc( 5vw + 2.8571428571429vw);
    font-size: 13.68rem;
    line-height: 1;
    z-index: 1;
    font-style: italic;
    color: var(--secondary-bland-color);
}

.point .media-rowReverse .media--index {
    left: 4.2857142857143vw;
}

.point .media--body {
    flex-basis: 50%;
    padding: 50px 5vw 60px 5vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.point .media--bodyTop {
}

.point .media--bodyBottom {
}

.point .media--titleBox {
}

.point .media--title {
    color: var(--font-color-darkgrey);
    font-size: 3.2rem;
}

.point .media--textBox {
    margin-top: 32px;
}

.point .media--text {
    color: var(--font-color-darkgrey);
    font-size: 1.5rem;
    margin-top: 2em;
}

.point .media--imgBox {
    flex-basis: 50%;
    transform: translateY(60px);
    line-height: 0;
}

.point .media--imgTitle {
    position: absolute;
    top: -40px;
    right: calc( 5vw + 2.8571428571429vw);
    font-size: 13.68rem;
    font-style: italic;
    line-height: 1;
}

.point .media-rowReverse .media--imgTitle {
    left: 4.2857142857143vw;
}

.point .media--img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .point .media::after {
        width: 4%;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .point {
        margin: 0;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .point .content--title {
        white-space: normal;
    }

    .point .content--titleBorder-vertical {
        height: 40px;
    }

    .point .content--text {
        white-space: normal;
    }

    /* common.css上書き */
    .point .widthFullsizeIgnoreParentElement-spOnly {
        margin-top: 32px;
    }

    .point .widthFullsizeIgnoreParentElement-spOnly:first-of-type {
        margin-top: 0;
    }

    .point .media {
        width: 100%;
        margin-bottom: 0;
        margin-left: 0;
        padding: 24px;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .point .media-rowReverse {
        margin-right: 0;
    }

    .point .media::after,
    .point .media-rowReverse::after {
        width: 0;
        height: 0;
    }

    .point .media--index,
    .point .media-rowReverse .media--index {
        position: static;
        font-size: 7rem;
        z-index: 1;
    }

    .point .media--body {
        flex: initial;
        width: 100%;
        padding: 16px 0;
    }

    .point .media--textBox {
        margin-top: 1em;
    }

    .point .media--text {
        margin-top: 1em;
    }

    .point .media--imgBox {
        flex: initial;
        width: 100%;
        transform: translateY(0);
    }

    .point .media--imgTitle,
    .point .media-rowReverse .media--imgTitle {
        position: static;
        font-size: 7rem;
        z-index: 1;
    }
}


.price {
    padding-top: 48px;
    padding-bottom: 32px;
}