.l-mv {
    &::before {
        width: 29.1vw;
        height: 23.4vw;
        background-image: url(../images/contact/mv.png);
        top: calc(105px + var(--p40-spa));
        right: var(--p120-spa);
    }
}

.l-main {
    
    .intro {
        p {
            text-align: center;
            font-size: var(--14to20);
            line-height: var(--lh-26);
            margin-bottom: var(--p120-spa);
        }
    }

    .form {

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

        .contact-form {
            display:block;

            .form-row {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: var(--p100-spa);
                margin-bottom: var(--p80-spa);

                .form-label-wrap {
                    display:flex;
                    align-items:center;
                    justify-content: flex-start;
                    gap: var(--p50-spa);
                    width: 23.6%;
                }

                label {
                font-weight: var(--fw-700);
                width: 48%;
                line-height: 1.4;
            }

            .badge {
                font-weight: var(--fw-700);
                font-size: var(--12to14);
                color: #fff;
                background-color: var(--navy);
                padding: 7px;
                width: var(--p80-spa);
                text-align: center;
                border-radius: var(--p20-spa);
            }

            .form-control {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: var(--p20-spa);
                width: 67.2%;

                input,textarea {
                    width:100%;
                    max-width:100%;
                    padding: var(--p20-spa) var(--p30-spa);
                    border-radius: var(--p10-spa);
                    background-color: var(--l-gray);
                    font-size: var(--16to20);
                    line-height:1.6;
                }

                input::placeholder,
                textarea::placeholder {
                    color: var(--d-gray);
                    font-weight: var(--fw-500);
                }

                .note {
                    width: 18.2vw;
                }

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

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

                        input {
                        width: var(--p310-spa);
                    }

                    }

                }

                .form-note {
                    font-size: var(--12to16);
                }
            }
            
            }

            .field--textarea {
                align-items: flex-start;
                margin-bottom: var(--p120-spa);
            }

            .form-actions {

                .form-btn {
                    width: 20.8vw;
                    text-align: center;
                    border-radius: var(--p100-spa);
                    cursor: pointer;
                    position: relative;
                    transition: 0.3s;

                    &::before {
                        content: "";
                        display: block;
                        width: 30px;
                        height: 30px;
                        background-size: contain;
                        background-repeat: no-repeat;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: 0.3s;
                    }

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

                    input {
                        font-size: var(--14to20);
                        letter-spacing: var(--lsp-100);
                        font-weight: var(--fw-700);
                        padding: var(--p35-spa);
                        display: block;
                        width: 100%;
                    }
                }

                .next-btn,.submit-btn {
                    background-color: var(--navy);

                    &::before {
                        background-image: url(../images/common/btn-ico_white.svg);
                        right: var(--p40-spa);
                    }

                    &:hover::before {
                        right: var(--p35-spa);
                        transition: 0.3s;
                    }

                    input {
                        color: #fff;
                    }
                }

                .next-btn {
                    margin-left: auto;
                    margin-right: auto;
                }

                .prev-btn {
                    background-color: var(--l-gray);

                    &::before {
                        background-image: url(../images/common/btn-ico.svg);
                        left: var(--p40-spa);
                        transform: translateY(-50%) rotateZ(180deg);
                    }

                    &:hover::before {
                        left: var(--p35-spa);
                        transition: 0.3s;
                    }
                    
                    input {
                        color: var(--navy);
                    }
                }

                
            }

            .form-btn__wrap {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--p60-spa);
            }

            /* 確認画面 */
            .formTable {
                margin-bottom: var(--p120-spa);
                width: 100%;

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

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

                        th {
                            width: 23.5%;
                            font-weight: var(--fw-700);
                            font-size: var(--14to18);
                        }

                        td {
                            width: 76.5%;
                            padding-left: 1em;
                            line-height: 1.6;
                        }
                    }
                }
            }
            
        }
    }
}


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

    .l-mv {
        &::before {
            width: 53vw;
            height: 42.6vw;
            background-image: url(../images/contact/mv.png);
            top: calc(60px + var(--p100-spa));
            right: var(--p15-spa);
        }
    }

    .l-main {
    
    .intro {
        p {
            text-align: left;
            margin-bottom: var(--p60-spa);
        }
    }

    .form {

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

        .contact-form {

            .form-row {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--p25-spa);
                margin-bottom: var(--p50-spa);

                .form-label-wrap {
                    gap: var(--p20-spa);
                    width: 100%;
                }

                label {
                width: fit-content;
            }

            .badge {
                padding: 5px;
                line-height: 1.5;
                width: 16vw;
            }

            .form-control {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--p20-spa);
                width: 100%;

                input,textarea {
                    padding: var(--p20-spa);
                }

                .note {
                    width: 100%;
                }

                .split {
                    flex-direction: column;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    gap: var(--p20-spa);

                    span {

                        input {
                            width: 77vw;
                        }
                    }

                }
            }
            
            }

            .field--textarea {
                align-items: flex-start;
                margin-bottom: var(--p60-spa);
            }

            .form-actions {

                .form-btn {
                    width: 66.5vw;
                    transition: 0;

                    &::before {
                        width: var(--p20-spa);
                        height: var(--p20-spa);
                    }

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

                    &:hover::before {
                        transition: 0s;
                    }

                    input {
                        padding: var(--p20-spa);
                    }

                }

                .next-btn,.submit-btn {
                    &:hover::before {
                        right: var(--p40-spa);
                    }
                }

                .next-btn {
                    margin: auto;
                }

                .prev-btn {

                    &::before {
                        left: var(--p25-spa);
                    }

                    &:hover::before {
                        left: var(--p25-spa);
                    }
                }
            }

            .form-btn__wrap {
                flex-direction: column;
                gap: var(--p30-spa);
            }

            /* 確認画面 */
            .formTable {
                margin-bottom: var(--p60-spa);

                tbody {

                        tr {
                            padding-top: var(--p30-spa);
                            padding-bottom: var(--p30-spa);
                            flex-direction: column;

                            &::before {
                                display: none;
                            }

                            &:first-child {
                                padding-top: 0;
                            }

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

                            td {
                                padding-left: 0;
                            }
                        }

                    }
            }
            
        }
    }
}

}