.l-mv {
    &::before {
        width: 28.8vw;
        height: 24.5vw;
        background-image: url(../images/about/mv.png);
        top: calc(105px + var(--p80-spa));
        right: var(--p120-spa);
    }
}

.l-main {
    .plans {
        .number {
            background-color: var(--navy);
            border-radius: 50%;
            color: #fff;
            display: block;
            text-align: center;
            font-family: var(--ff-mont);
            letter-spacing: var(--lsp-100);
        }


        .intro {
            padding-bottom: var(--p200-spa);
            .wrap {
                margin-bottom: var(--p60-spa);
                text-align: center;

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

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

            .desc {
                line-height: var(--lh-30);
                text-align: center;
                margin-bottom: var(--p100-spa);
            }

            .plans-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--p40-spa);

                .inner {
                    background-color: var(--l-gray);
                    border-radius: var(--p35-spa);
                    width: 32.8vw;

                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: var(--p35-spa);
                        padding: var(--p45-spa) 20px;
                        transition: 0.3s;

                        &:hover {
                            transition: 0.3s;
                            opacity: 0.7;
                        }

                        .number {
                        width: 2.9vw;
                        height: 2.9vw;
                        max-width: 55px;
                        max-height: 55px;
                        line-height: 2.9vw;
                        font-size: var(--14to18);
                    }

                    p {
                        font-size: var(--12to18);
                        font-weight: var(--fw-700);
                        line-height: var(--lh-20);

                        .bigger {
                            font-size: var(--16to24);
                        }
                    }
                    }
                    
                }
            }

        }

        .plans-ttl {
            background-color: var(--l-gray);
            padding-top: var(--p120-spa);
            padding-bottom: var(--p180-spa);
            text-align: center;
            border-radius: var(--p80-spa) 0 0 var(--p80-spa);
            width: 96.8vw;
            margin-left: auto;
            position: relative;

            .number {
                width: var(--p70-spa);
                height: var(--p70-spa);
                max-width: 70px;
                max-height: 70px;
                line-height: var(--p70-spa);
                font-size: var(--14to22);
                margin-left: auto;
                margin-right: auto;
                margin-bottom: var(--p50-spa);
            }

            h4 {
                font-size: var(--20to32);
                letter-spacing: var(--lsp-60);
                margin-bottom: var(--p60-spa);
                font-weight: var(--fw-700);
            }

            p {
                line-height: var(--lh-30);
            }

        }

        .plans-1::before, 
        .plans-1::after, 
        .plans-2::before, 
        .plans-2::after {
            content: "";
            display: block;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
        }

        .plans-1::before {
            width: 19.5vw;
            height: 20.3vw;
            background-image: url(../images/about/plan01-doco1.png);
            left: 8vw;
            top: -5vw;
        }

        .plans-1::after {
            width: 15.7vw;
            height: 13.5vw;
            background-image: url(../images/about/plan01-doco2.png);
            right: 8vw;
            bottom: -3vw;
        }

        .plans-2::before {
            width: 16.1vw;
            height: 15.6vw;
            background-image: url(../images/about/plan02-doco1.png);
            left: 8vw;
            top: -5vw;
        }

        .plans-2::after {
            width: 17vw;
            height: 15vw;
            background-image: url(../images/about/plan02-doco2.png);
            right: 8vw;
            bottom: -3vw;
        }

        .building-wrap {
            padding-bottom: var(--p220-spa);

            .inner {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                padding-top: var(--p200-spa);
                scroll-margin-top: -105px;

                &:first-child {
                    padding-top: var(--p180-spa);
                    scroll-margin-top: -105px;
                }

                .gallery {

                    .main-viewport {
                        position: relative;
                        width: 31.2vw;
                        height: 36.4vw;
                        overflow: visible;
                        margin-bottom: var(--p40-spa);

                        .main-frame {
                            width: 100%;
                            height: 100%;
                            border-radius: var(--p35-spa);
                            overflow: hidden;
                            cursor: pointer;

                            .slider-track {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                transition: transform 0.35s ease;

                                .slide {
                                    flex: 0 0 100%;
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                    user-select: none;
                                    -webkit-user-drag: none;
                                    background-color: var(--l-gray);
                                }
                            }
                        }

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            display: block;
                        }

                        .nav-btn{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            display: none;
                            border: none;
                            background: none;
                            padding: 0;
                            cursor: pointer;
                            width: 10vw;
                            height: 10vw;

                                img {
                                    width: 100%;
                                    height: auto;
                                    display: block;
                                }
                        }

                        .nav-btn.prev{ left: 8px; }
                        
                        .nav-btn.next{ right: 8px; }

                        .nav-btn:active{ transform: translateY(-50%) scale(0.96); }

                    }

                    .thumbs {
                        width: calc(7vw * 4 + 1vw * 3);
                        display: grid;
                        grid-template-columns: repeat(4, 7vw);
                        gap: 1vw;

                        li {
                            position: relative;
                            width: 7vw;
                            height: 8.2vw;
                            border-radius: 10px;
                            overflow: hidden;
                            cursor: pointer;
                            background-color: var(--l-gray);

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                                display: block;
                            }
                        }

                        li.active {
                            &::after {
                                content: "";
                                position: absolute;
                                inset: 0;
                                background: rgba(25, 45, 90, 0.6);
                            }
                        }
                    }
                }


                .texts {
                    width: 32vw;

                    h5 {
                        font-size: var(--18to32);
                        line-height: var(--lh-20);
                        font-weight: var(--fw-700);
                        letter-spacing: var(--lsp-60);
                        padding-bottom: var(--p50-spa);
                        margin-bottom: var(--p60-spa);
                        position: relative;

                        &::before {
                            content: "";
                            display: block;
                            width: var(--p60-spa);
                            height: 5px;
                            background-color: var(--yellow);
                            position: absolute;
                            bottom: 0;
                            left: 0;
                        }
                    }

                    .catch {
                        font-size: var(--16to22);
                        line-height: var(--lh-22);
                        font-weight: var(--fw-700);
                        margin-bottom: var(--p50-spa);
                    }

                    .desc {
                        line-height: var(--lh-22);
                        margin-bottom: var(--p80-spa);
                    }

                    img {
                        margin-left: auto;
                        margin-right: auto;
                    }
                }
            }

            #lyon .texts img {
                width: 8.9vw;
            }

            #ginzak2 .texts img {
                width: 7.4vw;
            }

            #gold .texts img {
                width: 10.7vw;
            }

            #iwatoku .texts img {
                width: 12.9vw;
            }

            #tangocho .texts img {
                width: 8.3vw;
            }

            #viva .texts img {
                width: 10vw;
            }
        }

        .building-wrap__1 {
            .inner:nth-child(even) {
                flex-direction: row-reverse;
            }
        }

        .building-wrap__2 {
            .inner:nth-child(odd) {
                flex-direction: row-reverse;
            }
        }

    }
}


    /* モーダル */
    .img-modal{
        position: fixed;
        inset: 0;
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 9999;
    }

    .img-modal.is-open { 
        opacity: 1;
        pointer-events: auto;
    }

    .img-modal__backdrop{
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.8);
    }

    .img-modal__content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .img-modal__img{
        width: 40vw;
        height: 46.8vw;
        display: block;
        border-radius: var(--p35-spa);
        object-fit: contain;
    }

    .img-modal__close{
        position: fixed;
        top: 40px;
        right: 60px;
        width: 31px;
        height: 31px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .img-modal__close::before,
    .img-modal__close::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 31px;
        height: 3px;
        background: #fff;
        transform-origin: center;
    }

    .img-modal__close::before{ transform: translate(-50%,-50%) rotate(45deg); }

    .img-modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }

    /* モーダル中はスクロール無効化 */
    body.modal-open{ overflow: hidden; }



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

    .l-mv {

        &::before {
            background-image: url(../images/about/mv_sp.png);
            width: 49.8vw;
            height: 44vw;
            top: calc(60px + 30.6vw);
            right: 0; 
        }
    }

    .l-main {
        .plans {

            .intro {

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

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

                    p {
                        margin-bottom: var(--p15-spa);
                    }
                }

                .desc {
                    text-align: left;
                    margin-bottom: var(--p40-spa);
                }

                .plans-btn {
                    flex-direction: column;
                    gap: var(--p20-spa);

                    .inner {
                        width: 100%;
                        border-radius: var(--p20-spa);

                        a {
                            padding: var(--p20-spa);
                            justify-content: flex-start;
                            gap: var(--p20-spa);
                            transition: 0;

                            &:hover {
                                transition: 0;
                                opacity: 1;
                            }

                            .number {
                                width: 10vw;
                                height: 10vw;
                                line-height: 10vw;
                            }
                        }
                    }
                }
            }

            .plans-ttl {
                padding-top: var(--p60-spa);
                padding-bottom: var(--p120-spa);
                padding-left: var(--p25-spa);
                padding-right: var(--p25-spa);
                border-radius: var(--p35-spa) 0 0 var(--p35-spa);
                width: 100%;

                .number {
                    width: 10vw;
                    height: 10vw;
                    line-height: 10vw;
                    margin-bottom: var(--p20-spa);
                }

                h4 {
                    line-height: var(--lh-22);
                    margin-bottom: var(--p30-spa);
                }

                p {
                    text-align: left;
                }
            }

            .plans-1::before {
                width: 35.7vw;
                height: 37.3vw;
                top: -22vw;
            }

            .plans-1::after {
                width: 40.2vw;
                height: 34.6vw;
                right: 6vw;
                bottom: -12vw;
            }

            .plans-2::before {
                width: 26.6vw;
                height: 38.6vw;
                left: 7vw;
                top: -23vw;
                background-image: url(../images/about/plan02-doco1_sp.png);
            }

            .plans-2::after {
                width: 39.5vw;
                height: 34.7vw;
                right: 5vw;
                bottom: -15vw;
            }

            .plans-ttl.plans-2 {
                border-radius: 0 var(--p35-spa) var(--p35-spa) 0;
            }

            .building-wrap {
                /* padding-top: var(--p100-spa); */

                .inner {
                    flex-direction: column;
                    margin-bottom: var(--p60-spa);
                    padding-bottom: var(--p60-spa);
                    border-bottom: 1px solid var(--d-gray);
                    padding-top: 0;
                    scroll-margin-top: -60px;

                    &:first-child {
                        padding-top: var(--p100-spa);
                        scroll-margin-top: -60px;
                    }


                    &:last-child {
                        border-bottom: none;
                    }

                    h5 {
                        font-size: var(--18to32);
                        font-weight: var(--fw-700);
                        line-height: var(--lh-20);
                        letter-spacing: var(--lsp-60);
                        margin-bottom: var(--p30-spa);
                    }

                    .gallery {
                        width: 100%;
                        margin-bottom: var(--p45-spa);

                        .main-viewport {
                            width: 73.3vw;
                            height: 85.3vw;
                            margin: 0 auto;

                            .nav-btn {
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                width: var(--p40-spa);
                                height: var(--p40-spa);
                                border: none;
                                background: none;
                                cursor: pointer;
                            }

                            .nav-btn.prev { left: -4vw; }
                            
                            .nav-btn.next { right: -4vw; }
                        }

                        .pager-dots {
                            display: flex;
                            justify-content: center;
                            gap: 4vw;

                            li {
                                 width: 6px;
                                    height: 6px;
                                    border-radius: 50%;
                                    margin-top: var(--p25-spa);
                                    background: var(--d-gray);
                                    cursor: pointer;
                            }

                            li.is-active {
                                background-color: var(--navy);
                            }
                        }

                        .thumbs {
                            display: none;
                        }
                    }

                    .texts {
                        width: 100%;

                        .catch {
                            margin-bottom: var(--p20-spa);
                        }

                        .desc {
                            margin-bottom: var(--p40-spa);
                            line-height: var(--lh-30);
                        }

                    }
                }

                #lyon .texts img {
                    width: 26.1vw;
                }

                #ginzak2 .texts img {
                    width: 21.6vw;
                }

                #gold .texts img  {
                    width: 31.2vw;
                }

                #iwatoku .texts img {
                    width: 37.3vw;
                }

                #tangocho .texts img {
                    width: 24.2vw;
                }

                #viva .texts img {
                    width: 29vw;
                }

            }

            .building-wrap__1 {
                .inner:nth-child(even) {
                    flex-direction: column;
                }
            }

            .building-wrap__2 {
                .inner:nth-child(odd) {
                    flex-direction: column;
                }
            }
        }
    }

    .img-modal { 
        display: none !important;
    }


}