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

.l-main {
    .m-wide {
        h3 {
            font-size: var(--20to38);
            font-weight: var(--fw-700);
            padding-left: var(--p30-spa);
            border-left: 5px solid var(--yellow);
        }
    }

    /* greet */
    .greet {
        padding-bottom: var(--p200-spa);
        position: relative;

        &::before {
            content: "";
            display: block;
            width: 10.5vw;
            height: 17.1vw;
            background-image: url(../images/company/greet-deco.png);
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            bottom: -1vw;
            left: -2vw;
        }

        .wrap {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--p100-spa);

            div {
                width: 38vw;

                p {
                    line-height: var(--lh-22);
                    margin-bottom: var(--p40-spa);
                    font-size: var(--14to18);
                }
            }
        }
    }

    /* conpany */
    .company {
        background-color: var(--l-gray);
        border-radius: var(--p80-spa) 0 0 var(--p80-spa);
        padding-top: var(--p180-spa);
        padding-bottom: var(--p200-spa);
        width: 96.8vw;
        margin-left: auto;

        .m-wide {

            margin: 0 0 0 18.2vw;

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

            .lists {
                dl {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    padding-top: var(--p50-spa);
                    padding-bottom: var(--p50-spa);
                    border-bottom: 1px solid var(--d-gray);
                    position: relative;

                        &::before {
                            content: "";
                            display: block;
                            width: 13.5vw;
                            height: 1px;
                            background-color: var(--navy);
                            position: absolute;
                            left: 0;
                            bottom: 0;
                        }

                    dt {
                        width: 13.5vw;
                        max-width: 260px;
                    }

                    dd {
                        width: 41.6vw;
                        max-width: 800px;
                        padding-left: 2vw;

                        a {
                            text-decoration: underline;
                            transition: 0.3s;

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



                    .columns {
                        line-height: var(--lh-20);
                    }
                }

                .tel {
                        dd {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                        }
                    }
            }
        }
    }

    /* accsess */
    .access {
        padding-top: var(--p180-spa);
        padding-bottom: var(--p200-spa);
        position: relative;

        &::before {
            content: "";
            display: block;
            width: 24.4vw;
            height: 15.6vw;
            background-image: url(../images/company/access-deco.png);
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            right: -11vw;
            top: -3.5vw;
        }

        .wrap {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--p100-spa);

            .inner {
                margin-bottom: var(--p100-spa);
                font-weight: var(--fw-700);

                .desc {
                    margin-bottom: var(--p40-spa);
                    line-height: var(--lh-22);
                    font-size: var(--16to24);
                }

                .caption {
                    font-size: var(--14to20);
                    font-weight: var(--fw-500);
                }
            }
        }

        .map {
            margin-bottom: var(--p40-spa);
            border-radius: var(--p40-spa);
            overflow-y: hidden;
            height: 33.8vw;
            position: relative;
            padding-top: 75%;

            iframe {
                width: 100%;
                height: calc(100% + (150px * 2));
                position: absolute;
                top: -150px;
                left: 0;
            }
        }

        address {
            p {
                font-size: var(--12to18);
                letter-spacing: var(--lsp-30);
                padding-left: 27px;
                position: relative;

                &::before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: var(--yellow);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
        }
    }

    .history {
        background-color: var(--l-gray);
        padding-top: var(--p180-spa);
        padding-bottom: var(--p200-spa);
        position: relative;
        width: 96.8%;
        margin-right: auto;
        border-radius: 0 var(--p80-spa) 0 0 ;

        &::before {
            content: "";
            display: block;
            width: 20.2vw;
            height: 27.9vw;
            background-image: url(../images/company/history-deco1.png);
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            right: var(--p180-spa);
            top: -5.2vw;
        }

        .m-wide {

            margin: 0 0 0 21.3vw;

            h3 {
                margin-bottom: var(--p80-spa);
            }

            .wrap {
                ul {
                    li {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: var(--p100-spa);

                        .year {
                            font-size: var(--22to42);
                            font-family: var(--ff-mont);
                            font-weight: var(--fw-700);
                            letter-spacing: var(--lsp-45);
                            width: 5.4vw;
                            margin-right: var(--p60-spa);
                        }

                        .dots {
                            display: block;
                            width: 15px;
                            height: 15px;
                            background-color: var(--navy);
                            border-radius: 50%;
                            position: relative;
                            margin-right: var(--p80-spa);

                            &::before {
                                content: "";
                                display: block;
                                width: 1px;
                                height: 7vw;
                                background-color: var(--navy);
                                position: absolute;
                                top: 15px;
                                left: 50%;
                            }
                        }

                        .month {
                            background-color: var(--navy);
                            color: #fff;
                            border-radius: 50px;
                            padding: var(--p10-spa);
                            font-size: var(--12to18);
                            text-align: center;
                            width: 7.3vw;
                            margin-right: var(--p40-spa);
                        }

                        .desc {
                            font-size: var(--12to18);
                            width: 34.3vw;
                            max-width: 660px;
                            line-height: var(--lh-22);
                        }
                    }

                    .columns {
                        align-items: flex-start;

                        .year,.month,.desc {
                            margin-top: -0.8vw;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1100px) {
    .l-main {
        .history {
            .m-wide {
                .wrap {
                    ul {
                        li {
                            .month {
                                width: 9.3vw;
                            }

                            .desc {
                                width: 40.3vw;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .l-mv {
        &::before {
            width: 44.8vw;
            height: 45.3vw;
            top: calc(60px + var(--p130-spa));
            right: var(--p20-spa);
        }
    }

    .l-main {

        .m-wide {
            width: 86.5vw;

            h3 {
                padding-left: var(--p15-spa);
            }
        }

        .greet {
            padding-bottom: var(--p120-spa);

            &::before {
                width: 25.8vw;
                height: 42.6vw;
                bottom: -22vw;
                left: auto;
                right: 2vw;
            }

            .wrap {
                flex-direction: column;
                gap: 0;

                h3 {
                    margin-bottom: var(--p40-spa);
                }

                div {
                    width: 100%;

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


            }
        }

        .company {
            padding-top: var(--p100-spa);
            padding-bottom: var(--p120-spa);
            border-radius: var(--p35-spa) 0 0 var(--p35-spa);
            width: 100%;

            .m-wide {

                margin: 0;
                width: 100%;
                padding: 0 var(--p25-spa);

                h3 {
                    margin-bottom: var(--p40-spa);
                }

                .lists {
                    dl {
                        padding-top: var(--p30-spa);
                        padding-bottom: var(--p30-spa);
                        flex-direction: column;

                        &::before {
                            display: none;
                        }

                        dt {
                            width: 100%;
                            margin-bottom: var(--p15-spa);
                        }

                        dd {
                            width: 100%;
                            padding-left: 0;
                        }
                    }
                }
            }
        }

        .access {
            padding-top: var(--p100-spa);
            padding-bottom: var(--p120-spa);

            &::before {
                width: 70.9vw;
                height: 45.3vw;
                right: 7vw;
                top: -22.5vw;
            }
            
            .wrap {
                flex-direction: column;
                gap: 0;

                h3 {
                    margin-bottom: var(--p40-spa);
                }

                .inner {

                    margin-bottom: var(--p50-spa);

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

            }

            .map {
                height: 58.6vw;
                border-radius: 0;
                margin-bottom: var(--p25-spa);
                position: relative;
                width: 97vw;
                left: 50%;
                transform: translateX(-50%);
            }

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

        .history {
            padding-top: var(--p100-spa);
            padding-bottom: var(--p150-spa);
            border-radius: 0 var(--p35-spa) 0 0;
            width: 100%;

            &::before {
                width: 40vw;
                height: 45.3vw;
                background-image: url(../images/company/history-deco1_sp.png);
                right: var(--p25-spa);
                top: -18.2vw;
            }

            .m-wide {

                margin: 0 auto;

                h3 {
                    margin-bottom: var(--p40-spa);
                }

                .wrap {
                    ul {
                        li {
                            position: relative;
                            align-items: flex-start;
                            margin-bottom: 0;
                            padding-bottom: var(--p40-spa);

                            .year {
                                width: 14.4vw;
                                margin-right: var(--p20-spa);
                            }

                            .dots {
                                margin-right: var(--p20-spa);
                                position: static;
                                width: 8px;
                                height: 8px;

                                &::before {
                                    height: 100%;
                                    top: 1vw;
                                    left: calc(8px + 18.8vw);
                                }
                            }

                            .month {
                                width: var(--p90-spa);
                                padding: 5px;
                                margin-bottom: var(--p15-spa);
                            }

                            .desc {
                                width: 59.7vw;
                            }
                        }

                        .columns {
                            padding-bottom: var(--p10-spa);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:390px) {
    .l-main {
        .history {
            .m-wide {
                .wrap {
                    ul {
                        li {
                            .dots {

                                &::before {
                                    height: 100%;
                                    top: 1vw;
                                    left: calc(8px + 18.5vw);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}