/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
.body-header {
    margin: 0;
    padding: 0;
    height: 71px;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.body-content,
.body-footer {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {*/
    /*max-width: 280px;*/
    /*max-width: 304px;
}*/

input,
select {
    /*max-width: 280px;*/
    max-width: 304px;
}

body {
    /*padding-top: 40px;*/
    padding-top: 71px;
    /*padding-bottom: 40px;*/
    background-color: #fff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /*font-family: 'メイリオ',Meiryo,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
}

/*#spinner {
    display: none;
}

body.busy .spinner {
    display: block !important;
}*/

ul#caution {
    background: whitesmoke;
    padding: 0 0.5em;
    position: relative;
}

ul li#caution {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 1.5em;
    border-bottom: 2px solid white;
    /*list-style-type: none !important;*/
    list-style: none;
}

    ul li#caution::before {
        position: absolute;
        left: 0.5em;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: '\f00c';
        color: #668ad8;
    }

    ul li#caution:last-of-type {
        border-bottom: none; /*最後の線だけ消す*/
    }

.field-icon {
    color: #555;
    float: right;
    margin-right: 15px;
    /*margin-top: -27px;*/
    margin-top: -30px;
    position: relative;
    z-index: 2;
}


/*********/
/* Login */
/*********/

.form-signin {
    /*max-width: 300px;*/
    max-width: 334px;
    padding: 15px;
    margin: 0 auto;
}

    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }

    .form-signin .form-control {
        position: relative;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
    }

    .form-signin .form-control:focus {
        z-index: 2;
    }

    .form-signin input.username {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input.password {
        margin-bottom: 0px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .form-signin .field-icon {
        /*margin-top: -32px;*/
        margin-top: -35px;
    }

    .form-signin .form-btn {
        margin-top: 10px;
    }

/********/
/* Root */
/********/

:root {
    --form-max-width: 500px;
    --form-padding: 15px;
    --form-margin: 0 auto;

    --form-dl-max-width: 500px;
    --form-dl-padding-bottom: 20px;
    --form-dl-margin: 0 auto;

    --form-dl-dt-width: 50%;

    --form-dl-dd-margin-left: 50%;
    --form-dl-dd-padding-left: 20px;

    --form-h4-margin-bottom: 0px;
    --form-h4-padding-top: 4px;
    --form-h4-padding-left: 6px;
    --form-h4-padding-bottom: 2px;
    --form-h4-background: whitesmoke;

    --form-hr-margin-top: 0px;
    --form-hr-width: 100%;

    --form-subform-margin-left: 4px;

    --footer-margin: 10px;
    --footer-text-align: right;
}

/***********/
/* Setting */
/***********/

.form-setting {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-setting .row {
        /*max-width: 300px;*/
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

        @media (min-width: 768px) {
            .form-setting .row dt {
                /*width: 240px;*/
                width: var(--form-dl-dt-width);
            }

            .form-setting .row dd {
                /*width: 240px;*/
                /*margin-left: 260px;*/
                /*padding-left: 20px;
                margin: 0 auto;*/
                /*margin-left: var(--form-dl-dd-margin-left);*/
                padding-left: var(--form-dl-dd-padding-left);
            }
        }

    .form-setting h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-setting hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-setting .setting-user {
        margin-left: var(--form-subform-margin-left);
    }

    .form-setting .setting-service {
        margin-left: var(--form-subform-margin-left);
    }

/*******/
/* FTP */
/*******/

.form-ftp {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-ftp .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

    .form-ftp h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-ftp hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-ftp .ftp-info {
        margin-left: var(--form-subform-margin-left);
    }

.footer-ftp {
    margin: var(--footer-margin);
    /*text-align: var(--footer-text-align);*/
}

    .footer-ftp .back{
        text-align: var(--footer-text-align);
    }


/********/
/* User */
/********/

.form-user {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-user .row {
        /*max-width: 300px;*/
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

    @media (min-width: 768px) {
        .form-user .row dt {
            width: 25%;
        }

        .form-user .row dd {
            padding-left: var(--form-dl-dd-padding-left);
        }
    }

    .form-user h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-user hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-user .user-info {
        margin-left: var(--form-subform-margin-left);
    }

        .form-user .user-info dd {
            width: 304px;
        }

.footer-user {
    /*margin: 15px;*/
    margin: var(--footer-margin);
    /*text-align: var(--footer-text-align);*/
}

    .footer-user .back {
        text-align: var(--footer-text-align);
    }

/*************/
/* Container */
/*************/

.form-container {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-container .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

        @media (min-width: 768px) {
            .form-container .row dt {
                width: var(--form-dl-dt-width);
            }

            .form-container .row dd {
                /*margin-left: var(--form-dl-dd-margin-left);*/
                padding-left: var(--form-dl-dd-padding-left);
            }
        }

    .form-container h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-container hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-container .container-info {
        margin-left: var(--form-subform-margin-left);
    }

.footer-container {
    /*margin: 15px;*/
    margin: var(--footer-margin);
    /*text-align: var(--footer-text-align);*/
}

    .footer-container .back {
        text-align: var(--footer-text-align);
    }

/**********/
/* Domain */
/**********/

.form-domain {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-domain .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

    .form-domain h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-domain hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-domain .domain-info {
        margin-left: var(--form-subform-margin-left);
    }

.footer-domain {
    /*margin: 15px;*/
    margin: var(--footer-margin);
    /*text-align: var(--footer-text-align);*/
}

    .footer-domain .back {
        text-align: var(--footer-text-align);
    }

/*********/
/* MySQL */
/*********/

.form-mysql {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-mysql .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

    @media (min-width: 768px) {
        .form-mysql .row dt {
            /*width: 240px;*/
            width: var(--form-dl-dt-width);
        }

        .form-mysql .row dd {
            /*width: 240px;*/
            /*margin-left: 260px;*/
            /*padding-left: 20px;
                    margin: 0 auto;*/
            padding-left: var(--form-dl-dd-padding-left);
        }
    }   

    .form-mysql h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-mysql hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-mysql .mysql-info {
        margin-left: var(--form-subform-margin-left);
        margin-right: var(--form-subform-margin-left);
    }

.footer-mysql {
    margin: var(--footer-margin);
}

    .footer-mysql .back {
        text-align: var(--footer-text-align);
    }

/*******/
/* WEB */
/*******/

.form-web {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-web #ChangeTarget {
        padding-bottom: var(--form-dl-padding-bottom);
    }

    .form-web .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

        @media (min-width: 768px) {
            .form-web .row dt {
                width: var(--form-dl-dt-width);
            }

            .form-web .row dd {
                /*padding-left: var(--form-dl-dd-padding-left);*/
            }
        }

    .form-web h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-web hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

    .form-web .web-info {
        margin-left: var(--form-subform-margin-left);
        margin-right: var(--form-subform-margin-left);
    }

    .footer-web {
        margin: var(--footer-margin);
    }

    .footer-web .back {
        text-align: var(--footer-text-align);
    }

/*hr {
    max-width: 350px;
    width: 100%;
    text-align: left;
    margin-left: 0px;
}*/

/*hr.left{
    margin-left: 0;
	margin-right: auto;
}*/

/******/
/* WP */
/******/

.form-wp {
    max-width: var(--form-max-width);
    padding: var(--form-padding);
    margin: var(--form-margin);
}

    .form-wp .row {
        max-width: var(--form-dl-max-width);
        padding-bottom: var(--form-dl-padding-bottom);
        margin: var(--form-dl-margin);
    }

        @media (min-width: 768px) {
            .form-wp .row dt {
                width: var(--form-dl-dt-width);
            }

            .form-wp .row dd {
                /*margin-left: var(--form-dl-dd-margin-left);*/
                padding-left: var(--form-dl-dd-padding-left);
            }
        }

    @media (min-width: 768px) {
        .form-wp .dl-setup dt {
            width: 30%;
        }

        .form-wp .dl-setup dd {
            /*margin-left: 30%;*/
            padding-left: var(--form-dl-dd-padding-left);
        }
    }

    .form-wp h4 {
        margin-bottom: var(--form-h4-margin-bottom);
        padding-top: var(--form-h4-padding-top);
        padding-left: var(--form-h4-padding-left);
        padding-bottom: var(--form-h4-padding-bottom);
        background: var(--form-h4-background);
    }

    .form-wp hr {
        margin-top: var(--form-hr-margin-top);
        width: var(--form-hr-width);
    }

.footer-wp {
    margin: var(--footer-margin);
}

    .footer-wp .back {
        text-align: var(--footer-text-align);
    }