html {
    min-height: 100%;
}

body {
    font-size: 14px;
    font-family: 'KozGoPr6N-Regular';
    height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.site-content {
    -webkit-flex: 1;
    flex: 1;
}

.create-user-main-form {
    padding-bottom: 60px;
}

.create-user-main-form .form-body {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 5px 5px 0px #dfe0e2;
}

.create-user-main-form .form-heading {
    font-family: 'KozGoPr6N-Bold';
    color: #275382;
    font-size: 24px;
}

.create-user-main-form .form-body .main-form {
    padding: 74px 0 64px 0;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.create-user-main-form .main-form label {
    font-family: 'KozGoPr6N-Bold';
    color: #666666;
    margin-bottom: 0px;
}

.create-user-main-form .main-form input {
    height: auto;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    box-shadow: none;
    padding: 12px 12px 12px 60px;
    vertical-align: middle;
}

.create-user-main-form .main-form input::-webkit-input-placeholder {
    color: #999999;
}

.create-user-main-form .main-form input:-ms-input-placeholder {
    color: #999999;
}

.create-user-main-form .main-form input::placeholder {
    color: #999999;
}

.create-user-main-form .main-form .group-input {
    position: relative;
}

.create-user-main-form .main-form .group-input span {
    position: absolute;
    top: 11px;
    left: 11px;
    bottom: 11px;
    right: 8px;
    width: 27px;
}

.create-user-main-form .main-form .group-input span:after {
    position: absolute;
    content: '';
    width: 2px;
    background: #e9e9e9;
    top: -3%;
    bottom: -3%;
    right: -12px;
}

span.ic-user {
    background: url('/images/icon/ic_human.svg') no-repeat;
}

span.ic-password {
    background: url('/images/icon/ic_pass.svg') no-repeat;
}

span.ic-csv {
    background: url('/images/icon/ic_csv.svg') no-repeat;
}

span.ic-mail {
    background: url('/images/icon/ic_mail.svg') no-repeat;
    top: 14px !important;
}

span.ic-mail-yellow {
    background: url('/images/icon/ic_mm_mail.svg') no-repeat;
    top: 11px !important;
}

span.ic-user-yellow {
    background: url('/images/icon/ic_mm_user.svg') no-repeat;
}

span.ic-status-yellow {
    background: url('/images/icon/ic_mm_status.svg') no-repeat;
}

span.ic-plan-yellow {
    background: url('/images/icon/ic_mm_plan.svg') no-repeat;
}

span.ic-company-yellow {
    background: url('/images/icon/ic_id_member.svg') no-repeat;
}

span.ic-department-yellow {
    background: url('/images/icon/ic_id_member.svg') no-repeat;
}

.create-user-main-form .main-form .form-group {
    margin-bottom: 10px;
}

.create-user-main-form .create-user-mail {
    text-align: center;
}

.create-user-main-form .create-user-mail label {
    font-family: 'KozGoPr6N-Regular';
    color: #000;
    font-size: 15.53px;
}

.create-user-main-form .create-user-mail p {
    font-size: 18px;
    color: #305e8e;
    font-family: 'Roboto-Regular';
}

.create-user-main-form button[type="submit"] {
    width: 201px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    font-size: 18px;
    font-family: 'KozGoPr6N-Bold';
    background: #4e90c6;
    border: none;
    border-radius: 6px;
}

.center {
    text-align: center;
}

.create-user-main-form button[type="submit"]:hover {
    background-color: #275382;
}

.create-user-main-form .main-confirm {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding-top: 60px;
    padding-bottom: 95px;
}

.main-confirm .form-confirm {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    position: relative;
    margin-bottom: 10px;
    margin-top: 0;
    min-height: 40px;
}

.main-confirm .form-confirm .title {
    width: 25%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    border-right: 1px solid #d1d1d1;
    align-items: center;
}

.main-confirm .form-confirm .content {
    width: 75%;
    padding-left: 30px;
    padding-right: 20px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    align-items: center;
    background-color: #dbdbdb8c;
}

.main-confirm .status .content {
    background-color: white;
}

.main-confirm .title-order {
    margin-top: 30px;
}

.main-confirm .form-confirm .title img {
    width: 27px;
}

.main-confirm .form-confirm .title span {
    padding-left: 11px;
}

.main-confirm .form-confirm .title p {
    padding-left: 10px;
    font-family: 'KozGoPr6N-Bold';
    color: #275382;
}

.main-confirm .action-button {
    text-align: center;
}

.main-confirm .btn-confirm {
    font-size: 18px;
    font-family: 'KozGoPr6N-Bold';
    background: #4e90c6;
    border: none;
    border-radius: 6px;
    margin-top: 30px !important;
    height: 50px !important;
    width: 157px;
    width: 154px !important;
}

.main-confirm .btn-back {
    color: #275382;
    background-color: #b6e1f1;
    border: none;
    margin-left: 24px;
    padding: 14px 10px;
}

.main-confirm .btn-submit {
    margin-right: 24px !important;
    color: #fff;
}

.main-confirm .btn-back:hover {
    background-color: #275382;
    color: #fff;
}

.confirm-main-form {
    margin-bottom: 88px;
    /*margin-top: 28px;*/
}

.error-main .img {
    width: 200px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.error-main p {
    font-family: 'KozGoPr6N-Regular';
    font-size: 18px;
    color: #575757;
}

.error-contents {
    padding-top: 138px;
}

.error-main a {
    display: inline-block;
    color: #1c7dc6;
    font-family: 'KozGoPr6N-Bold';
    font-size: 18px;
    background-color: #d9eff4;
    padding: 14px 60px;
    text-decoration: none;
    margin-top: 40px;
    border-radius: 5px;
}

.error-main a:hover {
    background-color: #275382;
    color: #fff;
}

.update-main-form {
    margin-top: 0px;
    /*margin-top: 30px;*/
    margin-bottom: 100px;
}

.create-user-main-form.update-main-form .form-body .main-form {
    padding: 109px 0 98px 0;
}

.update-user-confirm .main-confirm {
    padding-top: 141px;
    padding-bottom: 145px;
}

.invite-main-form .form-body .main-form {
    padding: 208px 0 179px 0;
}

.register-user-form .form-body .main-form {
    padding: 125px 0;
}

.invite-main-form button[type="submit"] {
    margin-top: 30px;
    height: 50px;
}

.invite-complete {
    padding-top: 155px !important;
}

.custom-file-input {
    position: relative;
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 52px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    padding-left: 60px;
    padding-top: 13px;
    padding-bottom: 13px;
    color: #999999 !important;
    font-family: 'KozGoPr6N-Regular' !important;
}

.custom-file-label:after {
    content: '選択';
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    display: block;
    height: 35px;
    padding: 9px 27px;
    color: #5194d4;
    background-color: #dce1e5;
    border-radius: 4px;
    cursor: pointer;
}

.invite-csv-form .form-heading h3 {
    margin-top: 24px !important;
    margin-bottom: 13px !important;
}

.long-email-address {
    word-wrap: break-word;
}

.invite-title {
    font-family: 'KozGoPr6N-Medium';
    font-size: 18px;
    color: #999999;
}

.confirm-invite-csv-form {
    padding-top: 42px !important;
    padding-bottom: 60px !important;
}

.group-label-csv {
    margin-bottom: 50px;
}

.confirm-invite-csv-form button[type="submit"] {
    height: 56px !important;
    padding-left: 38px;
    padding-right: 38px;
    width: auto;
}

.invite-csv-mail-group {
    height: 340px;
    overflow-y: auto;
    margin-bottom: 25px;
}

.alert-custom {
    background-color: #f4dce1;
    color: #c1272d;
    font-size: 18px;
    font-family: 'KozGoPr6N-Medium';
    border-radius: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    text-align: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.invite-csv-error-box {
    padding-left: 50px;
    padding-right: 50px;
}

.site-content .top {
    margin-bottom: 28px;
}

.create-user-main-form .form-heading h3 {
    margin-top: 0 !important;
}

.number-max-mail-csv a {
    padding: 14px 80px !important;
}

.update-mailaddress-form {
    padding: 134px 0 180px 0 !important;
}

.help-block-form {
    font-family: 'KozGoPr6N-Regular';
    font-size: 18px;
    color: #56b9df;
    margin-bottom: 45px;
}

.manage-role .header, .manage-role footer {
    background-color: #f2b453 !important;
}

span.ic-mail:after {
    top: -15% !important;
}

.form-control-static {
    word-break: break-word;
}

input::-webkit-input-placeholder {
    line-height: normal !important;
}

.manage-role footer .footer .info_company .item_info_company a, .manage-role footer .footer, .manage-role footer .footer .copyright span {
    color: #fff;
}

.manage-role .create-user-main-form .form-heading {
    color: #736357;
}

.manage-role .create-user-main-form button[type="submit"] {
    background: #db9800;
}

.manager-search-user form input, .manager-search-user form select {
    height: 40px;
    border: 1px solid #a7a7a7;
}

.manager-search-user form select {
    padding-left: 60px;
}

.manager-search-user .title-page {
    color: #736357;
}

.manager-search-user .group-input {
    margin-top: 2px;
}

.manager-search-button {
    padding: 6px 16px;
    margin-bottom: 25px;
    margin-top: 25px;
    background: #db9800;
    border: none;
    font-weight: bold;
}

.manager-search-button img {
    padding-top: 2px;
    padding-bottom: 2px;
}

.list-admin-user-manager .payment-table .payment-table__tr p:first-child {
    max-width: 50px;
    flex: 0 0 50px;
}

.list-admin-user-manager .payment-table .payment-table__tr p:nth-child(2) {
    max-width: 372px;
    flex: 0 0 372px;
}

.list-admin-user-manager .payment-table .payment-table__tr p:nth-child(3),
.list-admin-user-manager .payment-table .payment-table__tr p:nth-child(4),
.list-admin-user-manager .payment-table .payment-table__tr p:nth-child(5) {
    max-width: 123px;
    flex: 0 0 123px;
}

.list-admin-user-manager .payment-table .payment-table__tr p:nth-child(6) {
    max-width: 88px;
}

.list-admin-user-manager.payment-manage .payment-table .payment-table__tr p:last-child {
    flex: 1;
    max-width: none;
}

.list-admin-user-manager .payment-table .payment-table__tbody .payment-table__tr .link-btn {
    background: #e2a776 !important;
}

.manager-search-button:hover {
    background: #f2b453;
}

.list-admin-user-manager .payment-table .payment-table__tbody .payment-table__tr .link-btn:hover {
    background: #f2b453;
}

.payment-table .payment-table__thead .payment-table__tr p a {
    cursor: pointer;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:first-child {
    max-width: 50px;
    flex: 0 0 50px;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(2) {
    max-width: 80px;
    flex: 0 0 80px;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(3) {
    max-width: 215px;
    flex: 0 0 215px;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(4),
.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(5) {
    max-width: 60px;
    flex: 0 0 60px;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(6),
.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(7),
.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(8),
.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(9) {
    max-width: 120px;
    flex: 0 0 120px;
}

.manager-list-user-in-group .payment-table .payment-table__tr p:nth-child(10) {
    max-width: 70px;
    flex: 0 0 70px;
}

.manager-list-user-in-group.payment-manage .payment-table .payment-table__tr p:last-child {
    flex: 1;
    max-width: none;
    justify-content: space-between;
}

.list-admin-user-manager {
    margin-bottom: 40px;
}

.manager-list-user-in-group .title-page {
    color: #736357;
}

#change-user-status-form select {
    border: none;
    box-shadow: none;
    padding-left: 0;
}

#change-user-status-form .btn-back {
    background: #e5c395 !important;
    color: #fff;
}

.update-member-complete a {
    background: #efd7b9;
    color: #894e22;
}

.update-member-complete a:hover {
    background: #f2b453;
}

.manage-role .main-form .group-input span {
    top: 8px;
    left: 9px;
    bottom: 8px;
    right: 8px;
}

.update-member-button .btn-confirm {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px !important;
    width: 180px !important;
}

.update-member-button {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    justify-content: center;
}

.update-member-button span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.update-member-button button[type="submit"] {
    margin-right: 20px;
    margin-left: 0 !important;
}

.error-label {
    background: #f5dce2;
    text-align: center;
    font-size: 18px;
    color: #c43238;
    padding: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-family: 'KozGoPr6N-Medium';
}

.error-label p {
    margin-bottom: 0;
}

.manage-role select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    background: transparent;
    background: url('/images/icon/ic_mm_drop.svg') no-repeat;
    background-position-x: 100%;
    background-size: 3%;
    background-position-y: center;
}

.manage-role .group-input select {
    background-position-x: 99%;
    background-size: 2%;
}

#change-user-status-form .form-confirm .title p {
    color: #736357 !important;
}

.payment-manage .payment-table .payment-table__tr p {
    word-break: break-word;
}

.manage-role .payment-manage .payment-table .payment-table__tbody .payment-table__tr:hover,
.manage-role .payment-manage .payment-table .payment-table__tbody .payment-table__tr:hover p {
    background-color: #efe0d3;
}

.manager-search-button:focus {
    background-color: #f2b453 !important;
}

.payment-invoice-box {
    margin-bottom: 50px;
}

.member_management .payment-table .payment-table__tbody .payment-table__tr p:last-child {
    flex: 1;
}

#create-user-form button[type="submit"] {
    margin-top: 30px !important;
}

#create-user-form {
    padding: 74px 0 100px 0;
}

.image-change-card {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
}

.card-change .btn-confirm {
    padding: 14px 10px;
}

@media screen and (max-width: 1280px) {
    .update-main-form {
        margin-bottom: auto;
    }
}

@media screen and (max-width: 1199px) {
    #create-user-form {
        padding: 74px 0 64px 0;
    }
    .error-contents{
      padding-bottom: 100px;
      padding-top: 100px;
    }
    .update-main-form, .create-user-main-form{
      margin-bottom: 80px;
    }
}

@media screen and (max-width: 1024px) {
    .create-user-main-form .main-confirm {
        width: 620px;
    }
}

@media screen and (max-width: 991px) {
    .create-user-main-form.update-main-form .form-body .main-form {
        padding: 60px 0 70px 0;
    }

    .create-user-main-form .main-confirm {
        width: 85%;
    }

    .form-control-static {
        min-height: unset;
    }

    .invite-main-form .form-body .main-form {
        padding: 150px 0 170px 0;
    }

    label.error {
        text-align: left;
    }
}

@media screen and (max-width: 800px) {
    .create-user-main-form .form-body .main-form {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .update-user-confirm .main-confirm {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    #create-user-confirm {
        padding-top: 80px;
        padding-bottom: 65px;
    }
}

@media screen and (max-width: 640px) {
    .main-confirm .form-confirm .title span {
        padding-left: 6px;
        display: inline-flex;
    }

    .create-user-main-form .main-confirm {
        width: 90%;
    }

    .main-confirm .form-confirm .content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .main-confirm .form-confirm .title p {
        padding-left: 6px;
        font-size: 13px;
    }

    .error-main .img {
        width: 190px;
    }

    .invite-main-form .form-body .main-form {
        padding: 120px 0 140px 0;
    }

    .update-mailaddress-form {
        padding: 75px 0 100px 0 !important;
    }

    .create-user-main-form .create-user-mail {
        text-align: left;
    }
}

@media screen and (max-width: 560px) {
    .invite-csv-error-box {
        padding-left: 25px;
        padding-right: 25px;
    }

    .confirm-invite-csv-form {
        padding-top: 20px !important;
    }

    .confirm-invite-csv-form .form-confirm .title p {
        padding-left: 6px;
        font-size: 11px;
    }

}

@media screen and (max-width: 480px) {
    .create-user-main-form.update-main-form .form-body .main-form {
        padding: 40px 0 50px 0;
    }

    .create-user-main-form .main-form .form-group {
        margin-bottom: 15px;
    }

    .create-user-main-form .main-form input {
        height: auto;
        padding: 10px 12px 10px 60px;
    }

    .create-user-main-form .form-heading h3 {
        font-size: 20px;
    }

    .create-user-main-form button[type="submit"] {
        height: 50px;
    }

    .main-confirm .btn-confirm {
        margin-top: 20px !important;
        height: 46px !important;
        width: 120px !important;
    }

    .main-confirm .btn-back {
        margin-left: 10px;
    }

    .main-confirm .btn-submit {
        margin-right: 10px !important;
    }

    .update-user-confirm .main-confirm {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .main-confirm .form-confirm .title img {
        width: 20px;
    }

    .main-confirm .form-confirm .title {
        width: 37%;
    }

    .main-confirm .form-confirm .content {
        width: 63%;
    }

    .container {
        width: 95%;
    }

    .error-main .img {
        width: 160px;
    }

    .error-main p {
        font-size: 16px;
    }

    .error-contents {
        padding-top: 90px;
    }

    .invite-main-form .form-body .main-form {
        padding: 100px 0 120px 0;
    }

    .custom-file-label {
        height: 42px;
        border: 1px solid #d1d1d1;
        padding-left: 55px;
        padding-top: 9px;
        padding-bottom: 6px;
    }

    .custom-file-label:after {
        content: '選択';
        position: absolute;
        top: 5px;
        right: 3px;
        bottom: 7px;
        height: 28px;
        padding: 5px 13px;
    }

    .create-user-main-form .main-confirm {
        padding-top: 65px;
        padding-bottom: 50px;
    }

    .main-confirm .form-confirm .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .main-confirm .form-confirm {
        min-height: 42px;
    }

    #create-user-confirm {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #create-user-form {
        padding: 50px 0 45px 0;
    }

    .update-main-form {
        margin-bottom: 60px;
    }

    .main-confirm .btn-back {
        padding: 12px 10px;
    }

    .image-change-card {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 70px;
    }
}

@media screen and (max-width: 385px) {
    .main-form .group-input {
        margin-top: 5px;
    }

    .create-user-main-form .main-form label {
        margin-bottom: 0;
    }

    .update-user-confirm .main-confirm {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .main-confirm .btn-confirm {
        width: 100px !important;
    }

    .main-confirm .btn-confirm {
        font-size: 16px;
    }

    .site-content .container {
        width: 100%;
    }

    .confirm-main-form .form-body {
        background: none;
        box-shadow: none;
    }

    .create-user-main-form .main-confirm {
        background: none;
    }

    .create-user-main-form .main-confirm {
        width: 90%;
    }

    .create-user-main-form .main-confirm {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .error-contents {
        padding-top: 50px;
        margin-bottom: 50px;
    }
}