.l-bg__wrap {
    position: relative;
    background-image: url(../images/common/common-bg_pc.png);
    background-position: right top;
    background-size: 66.1vw 40vw;
    background-repeat: no-repeat;

    .mv {
        position: relative;
        height: 40vw;

        h2 {
            position: absolute;
            z-index: 100;
            top: 20.8vw;
            left: var(--p310-spa);
            font-size: var(--16to28);
            font-weight: var(--fw-700);
            letter-spacing: var(--lsp-80);

            img {
                margin-bottom: var(--p50-spa);
            }
        }

        > img {
            position: absolute;
        }
    }
}

/* 1420px */
.l-wide {
    width: 73.9vw;
    margin-left: auto;
    margin-right: auto;
}

/* 1300px */
.m-wide {
    width: 67.7vw;
    margin-left: auto;
    margin-right: auto;
}

/* 1100px */
.s-wide {
    width: 57.3vw;
    margin-left: auto;
    margin-right: auto;
}

.l-main {
    padding-top: var(--p150-spa);

    /* 波共通 */
    .bl-bg__common,.ye-bg__common {
        padding-top: 12.5vw;
        position: relative;
        
        &::before {
            content: "";
            display: block;
            width: 100%;
            height: 13.5vw;
            background-repeat: no-repeat;
            background-size: 100% 13.5vw;
            position: absolute;
            top: 1px;
            left: 0;
        }

        .container {
                padding-bottom: 19.8vw;
                position: relative;
            }

    }

    /* 青い波 */
    .bl-bg__common {
        &::before {
            background-image: url(../images/common/blue-wave1_pc.png);
        }
    }

    /* 黄色い波 */
    .ye-bg__common {

        &::before {
            background-color: var(--yellow);
            -webkit-mask-image:url("../images/common/yellow-wave1_pc.svg");
            -webkit-mask-repeat:no-repeat;
            -webkit-mask-size:100% 100%;
            mask-image:url("../images/common/yellow-wave1_pc.svg");
            mask-repeat:no-repeat;
            mask-size:100% 100%;
        }

    }

    /* 波共通2 */
    .bl-bg__common2 {
        padding-top: 5.2vw;
        position: relative;
        
        &::before {
            content: "";
            display: block;
            width: 100%;
            height: 5.2vw;
            background-repeat: no-repeat;
            background-size: 100% 5.2vw;
            position: absolute;
            top: 1px;
            left: 0;
        }

        .container {
                padding-top: var(--p180-spa);
                position: relative;
        }
    }

    .bl-bg__common2 {
        &::before {
            background-image: url(../images/common/blue-wave2_pc.png);
        }

        .container {
            background-color: var(--l-blue);
        }
    }


    /* bread */
    .bread {
        padding-top: 9.1vw;
        padding-bottom: 9.9vw;
        padding-left: var(--p310-spa);
        padding-right: var(--p310-spa);

        ul {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: var(--p25-spa);

            li,a {
                font-size: var(--11to16);
                letter-spacing: var(--lsp-40);
                color: var(--gray);
                font-weight: var(--fw-700);
            }

            .triangle {
                span {
                    content: "";
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-top: 8.5px solid transparent;
                    border-bottom: 8.5px solid  transparent;
                    border-left: 15px solid var(--gray);
                }
            }

            .current {
                color: var(--black);
            }
        }
    }
}


@media screen and (max-width:768px) {

    .l-bg__wrap {
        background-image: url(../images/common/common-bg_sp.png);
        background-size: 93.3vw 98.6vw;

        .mv {
            height: 112vw;

            h2 {
                top: 34.6vw;
                left: var(--p25-spa);

                img {
                    margin-bottom: var(--p30-spa);
                }
            }
        }
    }

    .l-main {
        padding-top: var(--p60-spa);

        /* 波共通1 */
        .bl-bg__common,.ye-bg__common {
        padding-top: var(--p60-spa);
        
        &::before {
            content: "";
            display: block;
            width: 100%;
            height: var(--p60-spa);
            background-size: 100% var(--p60-spa);
        }

        .container {
                padding-bottom: 30.8vw;
            }

        }

        .bl-bg__common {
            &::before {
                background-image: url(../images/common/blue-wave1_sp.png);
            }
        }

        .ye-bg__common {
        &::before {
            -webkit-mask-image:url("../images/common/yellow-wave1_sp.svg");
            mask-image:url("../images/common/yellow-wave1_sp.svg");
        }

        }

        /* 波共通2 */
        .bl-bg__common2 {
        padding-top: 10.6vw;
        position: relative;
        
        &::before {
            content: "";
            display: block;
            width: 100%;
            height: 10.6vw;
            background-repeat: no-repeat;
            background-size: 100% 10.6vw;
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            padding-top: var(--p70-spa);
            position: relative;
        }
    }

    .bl-bg__common2 {
        &::before {
            background-image: url(../images/common/blue-wave2_sp.png);
        }
    }



        /* bread */
        .bread {
        padding-top: 26.6vw;
        padding-bottom: var(--p80-spa);
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);

        ul {
            gap: var(--p15-spa);

            .triangle {
                span {
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 7px solid var(--gray);
                }
            }
        }
    }
    }

    .l-wide {
        width: 100%;
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
    }

    .m-wide {
        width: 100%;
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
    }

    .s-wide {
        width: 100%;
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
    }

}