.l-mv {
    &::before {
        width: 30.4vw;
        height: 21.3vw;
        background-image: url(../images/ourtown/mv.png);
        top: calc(105px + var(--p80-spa));
        right: var(--p70-spa);
    }
}

.l-main {

    overflow: hidden;

    .intro {
        text-align: center;
        padding-left: 8vw;
        padding-right: 13.7vw;
        padding-bottom: var(--p220-spa);
        position: relative;

        &::before {
            content: "";
            display: block;
            width: 11vw;
            height: 19.7vw;
            background-image: url(../images/ourtown/fs-deco1.png);
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            top: 3vw;
            left: 8vw;
        }

        &::after {
            content: "";
            display: block;
            width: 10.4vw;
            height: 9vw;
            background-image: url(../images/ourtown/fs-deco2.png);
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            bottom: 7vw;
            left: 31vw;
        }

        .wrap {
            margin-bottom: var(--p100-spa);

            .inner {
                margin-bottom: var(--p60-spa);

                p {
                    font-size: var(--14to24);
                    font-weight: var(--fw-700);
                    letter-spacing: var(--lsp-60);
                    margin-bottom: var(--p25-spa);
                }

                h3 {
                    font-size: var(--22to38);
                    font-weight: var(--fw-700);
                    letter-spacing: var(--lsp-60);
                }
            }

            .desc {
                line-height: var(--lh-30);
                width: fit-content;
                margin-left: 17.5vw;
            }

            .map {


                img {
                    width: 100%;
                }
            }
        }
    }

    .area {

        .area-wrap {
            padding-top: var(--p180-spa);
            padding-bottom: var(--p210-spa);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;

            > img {
                position: absolute;
            }

            .inner {
                .ttl {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: var(--p40-spa);
                    margin-bottom: var(--p70-spa);

                    img {
                        width: var(--p70-spa);
                    }

                    h4 {
                        font-size: var(--18to32);
                        font-weight: var(--fw-700);
                        line-height: var(--lh-20);

                        .marker {
                            position: relative;
                            z-index: 10;

                            &::before {
                                content: "";
                                display: block;
                                width: 100%;
                                height: 20px;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                            }
                        }
                    }
                }

                p {
                        line-height: var(--lh-30);
                        font-size: var(--14to18);
                    }
            }
        }

        .area-wrap:nth-child(odd) {
            background-color: var(--l-gray);
            width: 96.8vw;

            .inner {
                padding-left: 50vw;
            }
        }

        .area-wrap:nth-child(even) {
            padding-left: var(--p310-spa);

            .inner {
                padding-right: 50vw;
            }
        }

        .area1 {
            margin-left: auto;
            border-radius: var(--p80-spa) 0 0 var(--p80-spa);
            padding-right: var(--p310-spa);

            .marker {
                &::before {
                    background-color: var(--yellow);
                    z-index: -1;
                }
            }
        }

        .area2 {
            .marker {
                &::before {
                    background-color: var(--green);
                    z-index: -1;
                }
            }
        }

        .area3 {
            margin-right: auto;
            border-radius: 0 var(--p80-spa) var(--p80-spa) 0;
            padding-right: var(--p250-spa);

            .marker {
                &::before {
                    background-color: var(--pink);
                    z-index: -1;
                }
            }
        }

        .area4 {
            .marker {
                &::before {
                    background-color: var(--blue);
                    z-index: -1;
                }
            }
        }

        .area1 > img {
            width: 52vw;
            top: -3vw;
            left: -9vw;
        }

        .area2 > img {
            width: 54.9vw;
            top: -3vw;
            right: -9vw;
        }

        .area3 > img {
            width: 53.4vw;
            top: 3vw;
            left: -10vw;
        }

        .area4 > img {
            width: 50vw;
            top: -3vw;
            right: -4vw;
        }
    }
}

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

    .l-mv {
        &::before {
            width: 45.3vw;
            height: 46.6vw;
            background-image: url(../images/ourtown/mv_sp.png);
            top: calc(60px + 33.3vw);
            right: 0;
        }
    }

    .l-main {

        padding-bottom: var(--p80-spa);

        .intro {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: var(--p120-spa);

            &::before {
                display: none;
            }

            &::after {
                width: 24.5vw;
                height: 21.6vw;
                bottom: -11vw;
                left: auto;
                right: 12vw;
                z-index: 100;
            }

            .wrap {
                padding-left: var(--p25-spa);
                padding-right: var(--p25-spa);
                margin-bottom: var(--p45-spa);

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

                .desc {
                    text-align: left;
                    margin-left: auto;
                }
            }
        }

        .area {
            .area-wrap {
                padding-top: var(--p60-spa);
                padding-bottom: var(--p130-spa);
                padding-right: var(--p25-spa);
                padding-left: var(--p25-spa);
                margin-bottom: 72vw;

                .inner {
                    padding-left: 0;

                    .ttl {
                        flex-direction: column;
                        gap: var(--p15-spa);
                        margin-bottom: var(--p30-spa);

                        img {
                            width: 10.6vw;
                        }

                        h4 {
                            text-align: center;
                        }
                    }
                }
            }

            .area-wrap:nth-child(odd) {
                width: 100%;
                border-radius: var(--p35-spa) 0 0 var(--p35-spa);
                padding-right: var(--p25-spa);

                .inner {
                    padding-left: 0;
                }
            }

            .area-wrap:nth-child(even) {
                width: 100%;
                padding-right: 0;
                padding-left: var(--p25-spa);
                background-color: var(--l-gray);
                border-radius:  0 var(--p35-spa) var(--p35-spa) 0;

                .inner {
                    padding-right: var(--p25-spa);
                }
            }

            .area1 > img {
                width: 107vw;
                left: -9vw;
                top: auto;
                bottom: -80vw;
                z-index: 10;
            }

            .area2 > img {
                width: 112.5vw;
                top: auto;
                right: -15vw;
                bottom: -64vw;
            }

            .area3 > img {
                width: 115.2vw;
                top: auto;
                right: -16vw;
                bottom: -52vw;
            }

            .area4 > img {
                width: 102.4vw;
                top: auto;
                right: -9vw;
                bottom: -81vw;
            }
        }
    }


}