:root {
    --white-01: rgba(255, 255, 255, 1);
    --black: #333333;
    --black-01: rgba(242, 150, 0, 1);
    --black-02: rgba(5, 28, 1, 1);
    --orange-01: rgba(242, 152, 2, 1);
    --gray-01: rgba(244, 244, 244, 1);
    --gray-02: rgba(159, 159, 159, 1);
    --gray-03: rgba(124, 124, 124, 1);
    --gray-04: rgba(201, 201, 201, 1);
    --gray-05: rgba(221, 221, 221, 1);
    --gray-06: rgba(224, 224, 224, 1);
    --gray-07: rgba(188, 188, 188, 1);
    --gray-08: rgba(112, 112, 112, 1);
    --blue-01: rgba(14, 160, 233, 1);
    /* */
    --blue-02: #00A0E9;
    /* #1E72BE */
    --green-01: rgba(141, 194, 31, 1);
    --pink-01: rgba(214, 92, 92, 1);
    --scrollbar-width: 0;
}

/*header*/

header {
    height: 80px;
    width: 100%;
    background: var(--black-01);
    display: flex;
    align-items: center;
}

.header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .header-right {
    text-align: center;
    display: flex;
    align-items: center;
}

header .header-right .item {
    padding: 0 22px 0 22px;
}

header .header-right a {
    color: #333333;
    font-size: 14px;
}

header .header-right a:hover {
    color: #F29600;
}

.header button {
    border: none;
    background: none;
    font-size: 14px;
    display: inline-block;
    line-height: 27px;
}

.icon-user {
    background: url("../../img/icon_user.svg") no-repeat;
    float: left;
    width: 27px;
    height: 27px;
    margin-right: 8px;
}

.logo {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: var(--white-01);
    line-height: 24.5px;
    letter-spacing: 0.05em;
    padding-left: 40px;
}

/*header*/

body {
    background: #FFFFFF !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    margin-bottom: unset !important;
    position: relative;
}

p {
    margin: 0;
}

*,
::after,
::before {
    box-sizing: unset;
}

.main-footer {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 80px;
    background-color: #333333;
    width: 100%;
    bottom: 0;
}

.main-footer-agency {
    height: 80px;
    background-color: #333333;
    width: 100%;
    bottom: 0;
    z-index: 1030;
}

.footer-link,
.footer-link a {
    height: 100%;
    line-height: 80px;
    font-size: 13px;
    font-family: 'Noto Sans CJK JP', sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.footer-link,
.footer-link div {
    display: inline;
}

.footer-left {

}

.footer-right {

}

.footer-left a {
    margin-right: 40px;
}

.main-footer-agency .privacy-policy p {
    opacity: 0.5;
}

section.main-service {
    min-height: calc(100% - 134px - 80px - 80px);
}

section.error.main-service {
    min-height: calc(100% - 80px - 80px - 80px);
}

.error-message {
    margin-top: 80px;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
    text-align: center;
}

.privacy-policy p {
    font-family: 'Noto Sans CJK JP', sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    justify-content: center;
}

.progression {
    margin: 134px auto 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 787px;
}

.progression > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    --step-color: var(--orange-01);
    position: relative;
}

.step-1.step-current,
.step-1.step-prev {
    --step-color: var(--orange-01);
}

.progression > div:not(:last-child):after {
    content: '';
    position: absolute;
    width: calc(100% - 28px - 20px);
    height: 0px;
    top: 14px;
    border-top: 1px dashed var(--step-color);
}

.progression > div:not(.step-prev):after {
    border-top: 1px dashed var(--gray-04);
}

.progression > div.step-1.step-current:after {
    --step-color: var(--orange-01);
}

.progression > div:not(:last-child):after {
    left: calc(50% + 14px + 10px);
}

.progression > div:not(:first-child):before {
    left: -10px;
}

.step-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 8px;
    position: relative;

    font-family: Arial;
    font-size: 17px;
    letter-spacing: 0.05em;
    line-height: 28px;
    text-align: center;
    color: var(--gray-02);
    cursor: pointer;
}

.home-step .step-icon {
    cursor: default;
}

.home-step .step-prev .step-icon,
.step-current .step-icon {
    border: solid 1px var(--orange-01);
}

.step-text {
    font-family: 'Hiragino CNS W3', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 19px;
    text-align: center;
    color: var(--gray-02);
    position: relative;
}

.step-text .step-title {
    font-weight: bold;
}

.break-title {
    display: none;
}

.step-current .step-icon:before {
    background: var(--step-color);
}

.step-icon:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 1px var(--orange-01);
    box-sizing: border-box;
}

.step-prev .step-icon {
    position: relative;
}

.step-prev .step-icon:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 1px var(--orange-01);
    box-sizing: border-box;
    background-color: var(--orange-01);
}

.step-current .step-text {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--black-02);
}

/*progression top agency*/

.progression.progression-agency {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    top: -96px;
    height: 192px;
    margin: 0 auto -90px;
    padding: 40px 90px 35px;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16))
}
.progression.progression-agency.grayout ,
.progression-agency.grayout .progression-step .step-icon {
    background-color: #dedede;
}

.progression.progression-agency .step-text {
    display: block;
}

.progression.progression-agency p {
    display: inline;
}

.progression-agency.progression > div:not(:first-child):before {
    content: '';
    position: absolute;
    height: 0;
    left: 0;
    border: 2px solid var(--step-color);
    width: calc((100% - 77px) / 2);
    top: calc(77px / 2);
}

.progression-agency.progression > div:not(:last-child):after {
    width: calc((100% - 77px) / 2);
    top: calc(77px / 2);
}

.progression-agency.progression > div:not(.step-prev):after,
.progression-agency.progression > div:not(.step-prev):before {
    border: 2px solid var(--gray-04);
}

.progression-agency.progression > div.step-current:before,
.progression-agency.progression > div.step-prev:after {
    border: 2px solid var(--orange-01);
}

.progression-agency.progression > div.progression-step:after {
    left: calc(77px + (100% - 77px) / 2);
}

.progression-agency .progression-step .step-icon {
    border-radius: 6px;
    border: solid 4px #B5B5B5;
    background: #FFFFFF;
    color: #B5B5B5;
    font-family: 'Rounded M+ 1c', sans-serif;
    font-size: 28px;
    font-weight: bold;
    width: 77px;
    height: 77px;
    margin-bottom: 0;
}

.progression-agency .step-prev .step-icon,
.progression-agency .step-current .step-icon {
    background: var(--orange-01);
    border: solid 4px var(--orange-01);
    color: #FFFFFF;
}

.progression-agency .step-icon:before,
.progression-agency .step-prev .step-icon:after {
    display: none;
}

.progression-agency .step-text {
    font-family: 'Rounded M+ 1c', sans-serif;
    color: #B5B5B5;
    font-size: 20px;
    font-weight: bold;
    margin-top: 11px;
}

.progression-agency .step-prev .step-text,
.progression-agency .step-current .step-text {
    color: var(--orange-01);
}

/*progression top agency*/

.container {
    background: #F5F5F5;
    border-radius: 12px;
    margin: 0 auto;
    padding: 80px 103.5px;
    max-width: 980px;
}

.container.service-contract,
.container.certificate-wrapper,
.container.service-tempoppo {
    margin-bottom: 120px;
}

.agency-container {
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
}

.form-title {
    font-family: 'Noto Sans CJK JP', sans-serif;
    font-size: 26px;
    letter-spacing: 0.05em;
    line-height: 35px;
    color: var(--black);
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
}

.description,
.subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    padding-bottom: 60px;
}

.description {
    color: #383839;
}

/* 2 */

/*icon*/

.icon-arrow-down {
    background: url('./img/icon_arrow_down.svg') no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    margin-left: 12px;
}

.icon-arrow-right:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_orange_small.png") no-repeat;
    top: calc((100% - 12px) / 2);
    right: 0;
    width: 7px;
    height: 12px;
    margin-right: 8px;
}

.icon-danger.icon-arrow-right:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_danger_small.svg") no-repeat;
    top: calc((100% - 12px) / 2);
    right: 0;
    width: 7px;
    height: 12px;
    margin-right: 8px;
}

/*-------------------*/

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="time"],
input[type="url"],
input[type="number"] {
    height: 56px;
    font-size: 16px;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
form input[type="time"],
form input[type="url"],
form input[type="number"],
form textarea {
    padding-left: 18px;
    margin-top: 12px;
    border-radius: 2px;
}

form#save-inquiry input[type="text"],
form#save-inquiry input[type="tel"],
form#save-inquiry input[type="email"],
form#save-inquiry input[type="password"],
form#save-inquiry input[type="time"],
form#save-inquiry input[type="url"],
form#save-inquiry input[type="number"],
form#save-inquiry textarea {
    margin-top: 0;
}

.form-group label {
    font-size: 16px;
    padding-top: 40px;
    font-family: 'Noto Sans CJK JP', sans-serif;
}


.form-group textarea {
    height: 190px;
}

.btn-group-step {
    display: flex;
    justify-content: center;
}

.btn-group-step button {
    color: #FFFFFF;
    border-radius: 1px;
    margin-top: 64px;
    height: 50px;
    width: 270px;
    font-size: 14px;
    text-align: center;
    padding: 0;
    border: 0;
}

.btn-group-step button.btn-back {
    border: solid 1px #717171;
    color: #333333;
    margin-right: 40px;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
}

.btn-group-step button.btn-next {
    background: #F29600;
    border-radius: 4px;
}

.service-policy form,
.service-tempoppo form {
    width: 800px;
    margin: 0 auto;
}

.service-policy {
    margin-bottom: 24px;
}

.policy-form-btn .btn-group-step button {
    margin-top: 72px;
}

.policy-element {
    margin-top: 120px;
}

.policy-confirm {
    margin-top: 32px;
    color: #1D242D;
}

.policy-checked-content {
    margin-top: 24px;
}

.policy-form {
    border: 1px solid #707070;
    border-radius: 8px;
}

.policy-content {
    padding: 24px 16px 24px 25px;
}

.policy-content div {
    height: 452px;
    max-height: 500px;
    overflow-y: scroll;
    line-height: 28px;
    color: #222222;
    padding-right: 37px;
    letter-spacing: 0.45px;
}

.policy-content div::-webkit-scrollbar {
    width: 8px;
}

.text-indent-policy {
    text-indent: 5px;
}

.grap-policy {
    margin-top: 32px;
}

.policy-content div::-webkit-scrollbar-track {
    background: #E3E3E3;
    border-radius: 8px;
}

.policy-content div::-webkit-scrollbar-thumb {
    background: #F29600;
    border-radius: 8px;
}

.checked-confirm {
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.checked-confirm-label {
    opacity: 0.5;
}

.checked-confirm-label.active {
    opacity: 1;
}

.policy-confirm .policy-checked-content {
    align-items: center;
    justify-content: center;
}

.progression-sp {
    display: none;
}

/*header fix*/

header.header-agency {
    background: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16))
}

header.header-agency .header .header-right .icon-menu {
    display: none;
}

header.header-agency .header,
header.header-agency .header .header-right,
header.header-agency .header .item {
    height: 100%;
    line-height: 80px;
}

header.header-agency .header .header-right .header-user {
    margin-left: 23px;
    padding-left: 40px;
    padding-right: 62px;
    border-left: solid 1px #E8E8E8;
    cursor: pointer;
}

header.header-agency .header .header-right .header-user button:after {
    display: none;
}

header.header-agency .header .header-right .header-user:hover,
header.header-agency .header .header-right .header-user:focus,
header.header-agency .header .header-right .header-user:focus-visible {
    background-color: #FCFCFC;
    border-bottom-right-radius: 10px;
}

header.header-agency .header .header-right .header-user button:active .icon-user,
header.header-agency .header .header-right .header-user button:hover .icon-user,
header.header-agency .header .header-right .header-user button:focus .icon-user,
header.header-agency .header .header-right .header-user button:focus-visible .icon-user {
    opacity: 0.8;
    color: #EE9300;
}

header.header-agency .header .header-right .header-user button:active span,
header.header-agency .header .header-right .header-user button:hover span,
header.header-agency .header .header-right .header-user button:focus span,
header.header-agency .header .header-right .header-user button:focus-visible span {
    color: #EE9300;
}

header.header-agency .header .header-right .header-user button:active .icon-arrow-down,
header.header-agency .header .header-right .header-user button:hover .icon-arrow-down,
header.header-agency .header .header-right .header-user button:focus .icon-arrow-down,
header.header-agency .header .header-right .header-user button:focus-visible .icon-arrow-down {
    background: url('./img/icon_arrow_down_active.svg') no-repeat;
}

header.header-agency .header .header-right .header-user .dropdown-menu {
    width: 208px;
    top: 23px !important;
    padding: 4px;
    transform: translate3d(calc(100vw - 213px - var(--scrollbar-width)), 60px, 0px) !important;
}

.dropdown-menu .dropdown-item {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-family: 'Noto Sans CJK JP', sans-serif;
    padding: 0 0 0 12px;
    box-sizing: border-box;
}

.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover {
    background-color: #E8E8E8;
    color: #333333;
    border-radius: 4px;
}

.dropdown-menu .dropdown-item.logout {
    color: #DD450D;
}

.header-banner {
    position: relative;
    height: 335px;
    background-color: #F29600;
    margin: 0 auto;
    padding: 136px 0 136px 0;
    font-family: 'Rounded M+ 1c', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
}

.header-banner.payment-banner {
    height: 405px;
}

.header-banner .banner-text {
    position: relative;
    margin-left: 30px;
}

.header-banner .banner-text:before {
    content: '';
    background: url("./img/banner_icon.svg") no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    top: calc((100% - 22px) / 2);
    left: -30px;
}

.header-banner .date-info {
    font-family: 'Noto Sans CJK JP', sans-serif;
    font-size: 14px;
    margin-left: 30px;
    margin-right: 8px;
}


/*important-news*/

.important-news {
    background-color: #FFEFEF;
    max-height: 410px;
    margin-top: 76px;
    margin-bottom: 80px;
    padding: 40px 75px;
}

.common-news.news-top {
    margin-top: 136px;
}

.common-news.news-top.payment-top,
.important-news.payment-top {
    margin-top: 79px;
}

.important-news .user-name-tmp,
.important-news .user-name {
    height: 36px;
    display: inline-block;
}

.important-news .user-name-tmp:before {
    bottom: 6px;
}

.payment-block .payment-title,
.important-news .news-title {
    position: relative;
    font-family: "Rounded M+ 1c", sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #333333;
}

.payment-name-tmp:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    bottom: 12px;
    left: 0;
    background-color: #F29600;
    opacity: 50%;
}

.payment-block .payment-name,
.important-news .news-name {
    position: relative;
}

.important-news .news-name:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    bottom: 5px;
    left: 0;
    background-color: #F29600;
    opacity: 50%;
}

.important-news .news-description {
    margin-left: 10px;
    font-size: 18px;
}

.important-news .text-important {
    color: #DD450D;
}

hr {
    border-top: 1px solid #333333;
    margin: 24px 0;
}

hr.news-break {
    border-top: 1px dashed #B5B5B5;
}

.news-item {
    position: relative;
}

.news-item:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_orange.svg") no-repeat;
    top: calc((100% - 14px) / 2);
    right: 0;
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.notification.news-item:after {
    background: url("./img/icon_arrow_right.svg") no-repeat;
}

.notification.empty-news:after,
.news-item.empty-news:after {
    background: none;
}

.news-item .news-date {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    color: #666666;
    font-weight: 200;
    margin-bottom: 8px;
}

.news-item .news-info {
    font-size: 14px;
    color: #333333;
    padding-right: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.new-item .new-info .new-info-font {
    font-family: 'Noto Sans CJK JP', sans-serif;
}

.news-item:hover {
    opacity: .5;
}

.news-item.empty-news:hover {
    opacity: 1;
}

.news-all {
    height: 40px;
    color: #FFFFFF;
}

.news-all button {
    width: 248px;
    height: 100%;
    background-color: #F29600;
    border-radius: 20px;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    letter-spacing: 1.12px;
    font-weight: bold;
    box-sizing: border-box;
    -webkit-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.btn-custom:hover,
.btn-custom:active,
.news-all button:hover,
.news-all button:active {
    background-color: #FFFFFF;
    border: solid 1px #F29600;
    color: #F29600;
    -webkit-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.news-all button.btn-back:hover,
.news-all button.btn-back:active {
    background-color: #FFFFFF;
    border: solid 1px #717171;
    color: #717171;
    -webkit-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.btn-custom {
    position: relative;
    display: inline-block;
    width: 248px;
    height: 40px;
    background-color: #F29600;
    border-radius: 20px;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    letter-spacing: 1.12px;
    font-weight: bold;
    box-sizing: border-box;
    -webkit-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.btn-custom:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_default.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    right: 0;
    width: 7px;
    height: 11px;
    margin-right: 16px;
}

.btn-custom:hover::after,
.btn-custom:active::after,
.btn-custom:focus::after,
.btn-custom:focus-visible::after {
    background: url("./img/icon_arrow_right_orange2.svg") no-repeat;
}

.news-all .btn-news {
    position: relative;
}

.news-all .btn-detail-payment {
    width: 100%;
}

.news-all .btn-news:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_default.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    right: 0;
    width: 7px;
    height: 11px;
    margin-right: 16px;
}

.news-all .btn-news:hover::after,
.news-all .btn-news:active::after,
.news-all .btn-news:focus::after,
.news-all .btn-news:focus-visible::after {
    background: url("./img/icon_arrow_right_orange2.svg") no-repeat;
}

/*common news*/

.common-news {
    margin-bottom: 120px;
    background-color: #FFFFFF;
}

.news-new {
    display: inline-block;
    font-size: 13px;
    color: #FFFFFF;
    width: 64px;
    height: 18px;
    background-color: #0A4FA2;
    border-radius: 2px;
    margin-left: 24px;
    text-align: center;
    line-height: 20px;
    vertical-align: top;
    margin-top: 0px;
}
.emptyContent {
    margin: 100px auto;
    text-align: center;        
}

/*wrap title*/
.wrap-title {
    position: relative;
    font-family: "Rounded M+ 1c", sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #333333;
}

.wrap-title .news-name {
    margin-left: 34px;
}

.wrap-title:before {
    position: absolute;
    content: '';
    background: url("./img/news_icon.svg") no-repeat;
    left: 0;
    bottom: calc((100% - 22px) / 2);
    width: 22px;
    height: 22px;
}

.wrap-title:after {
    background: url("./img/icon_arrow_right_orange.svg") no-repeat;
}

/*wrap title*/

/*confirmation and application*/

.wrap-confirm-app {
    background-color: #F9F9F9;
    padding: 80px 0;
    margin: 0 auto;
}

.wrap-confirm-app .confirm-content {
    margin-top: 40px;
}

.wrap-confirm-app .menu-item .menu-icon {
    height: 81px;
    display: flex;
    justify-content: center;
}

.wrap-confirm-app .menu-item .menu-icon img {
    object-fit: none;
}

.wrap-confirm-app .menu-item .menu-text {
    margin-top: 23px;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Noto Sans CJK JP', sans-serif;
    color: #F29600;
}

.wrap-confirm-app .menu-item {
    background-color: #FFFFFF;
    width: calc((100% - 24px * 3) / 4);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
    text-align: center;
    padding-top: 32px;
    padding-bottom: 22px;
    border-radius: 8px;
}

.wrap-confirm-app .menu-item:hover {
    background-color: #F29600;
    color: #FFFFFF;
}

.wrap-confirm-app .menu-item:hover .menu-text {
    color: #FFFFFF;
}

.wrap-confirm-app .menu-item:hover > .menu-icon > .img-default,
.wrap-confirm-app .menu-item > .menu-icon > .img-white {
    display: none;
}

.wrap-confirm-app .menu-item .img-default,
.wrap-confirm-app .menu-item:hover > .menu-icon > .img-white {
    display: inline;
}

/*confirmation and application*/


/*payment-info*/

.payment-group,
.no-payment-gr {
    position: absolute;
    width: 100%;
    top: -166px;
    height: 332px;
    margin: 0 auto;
}

.payment-group .payment-block,
.no-payment-gr .payment-block {
    background-color: #FFFFFF;
    width: calc((100% - 32px) / 2);
    height: 100%;
    padding: 11px 32px 32px;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16))
}

.payment-group hr,
.no-payment-gr hr {
    margin: 16px 0;
}

.payment-item {
    font-size: 15px;
    flex-wrap: wrap;
}

.payment-item .payment-info {
    color: #666666;
    width: 35%;
}

.payment-item .payment-right {
    color: #333333;
    width: 65%;
    text-align: right;
}

.payment-item .notice-message {
    font-size: 9px;
    color: #666;
    text-align: right;
    width: 100%;
}


.payment-block .payment-name-tmp {
    position: relative;
    line-height: 54px;
}

.payment-block .payment-name,
.payment-block .payment-name-tmp {
    height: 54px;
    display: inline-block;
}

.payment-block .payment-name-tmp .month,
.payment-block .payment-name .month {
    font-size: 36px;
}

.payment-block .payment-name-tmp .month-text,
.payment-block .payment-name .month-text {
    font-size: 24px;
}

.payment-block .payment-name {
    position: absolute;
    left: 0;
    line-height: 54px;
}

.payment-block .payment-description {
    font-size: 18px;
}

.payment-group .payment-block hr:nth-child(2) {
    margin-top: 0px !important;
}

.payment-time {
    width: 430px;
}
@media (max-width: 768px){
    .payment-time {
        width: 100%;
    }
}
.payment-status {
    display: inline-block;
    color: #FFFFFF;
    width: 88px;
    height: 24px;
    background-color: #0A4FA2;
    border-radius: 2px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    float: right;
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
}

.payment-status.payment-status-disable {
    background-color: #868583;
}

/*payment-info*/

/*button agency*/

.btn-agency {
    height: 40px;
    color: #FFFFFF;
}

.btn-agency button {
    width: 248px;
    height: 100%;
    background-color: #F29600;
    border-radius: 20px;
    border: none;
    color: #FFFFFF;
    line-height: 40px;
    font-weight: bold;
    box-sizing: border-box;
}

.btn-agency button {
    position: relative;
}

.btn-agency button:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_default.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    right: 0;
    width: 7px;
    height: 11px;
    margin-right: 16px;
}

.btn-payment-top {
    margin: 32px 0;
}

/*button agency*/

/*payment pass*/

.payment-past,
.no-payment-past {
    margin-top: 183px;
    text-align: right;
}

.payment-past.no-payment-group,
.no-payment-past.no-payment-group {
    margin-top: 48px;
    text-align: right;
}

.payment-past a,
.no-payment-past a {
    position: relative;
    font-size: 14px;
    padding-right: 22px;
    padding-left: 10px;
    color: #0A4FA2;
    border-bottom: solid 1px #0A4FA2;
    width: 190px;

}

.payment-past a:hover,
.no-payment-past a:hover {
    text-decoration: none;

}

.payment-past a:after,
.no-payment-past a:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_blue.png") no-repeat;
    top: calc((100% - 10px) / 2);
    right: 0;
    width: 10px;
    height: 10px;
}

/*payment pass*/


/*notice*/

.notice {
    background-color: #DD450D;
    position: absolute;
    height: 122px;
    top: 0;
    width: 100%;
    vertical-align: middle;
    font-family: 'Noto Sans CJK JP', sans-serif;
}

.notice p {
    margin-top: 80px;
    font-size: 15px;
    height: 42px;
    line-height: 42px;
}

.header-banner.has-notice,
.header-banner.no-has-notice {
    padding-top: 178px;
}

.header-banner.payment-banner.has-notice,
.header-banner.payment-banner.no-has-notice {
    height: 447px;
}

.header-banner.payment-banner.not-payment-has-notice {
    height: 310px;
}

/*notice*/


.line-gray {
    border-top: 1px solid #E8E8E8;
}

.user-info {
    margin-top: 34px;
}

nav.nav-menu {
    display: none;
}

.service-contract .btn-search-address,
.service-tempoppo .btn-search-address {
    color: #FFFFFF;
    display: flex;
    width: 180px;
    height: 56px;
    background-color: #333333;
    border-radius: 2px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    margin-left: 8px;
    box-sizing: border-box;
}

.service-contract .icon-arrow-custom,
.service-tempoppo .icon-arrow-custom {
    background: url(img/arrow_select.svg) no-repeat;
    background-position-x: calc(100% - 18px);
    background-position-y: 22px;
    box-sizing: border-box;
    height: 56px;
    width: 189px;
    background-color: #FFFFFF;
    float: right;
    margin-right: 12px;
    margin-top: 12px;
    border-radius: 2px;
}

.custom-dropdown {
    max-height: 200px;
    position: relative;
    height: 56px;
    z-index: 100;
    margin-bottom: 12px;
}

.custom-dropdown select {
    min-height: 56px;
}

.custom-dropdown select option {
    width: 100%;
    margin-left: -10px;
    padding: 0 10px;
}

textarea::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="time"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
.form-group textarea::placeholder {
    color: #ADADAD;
}

.label-required {
    color: #FFFFFF;
    background-color: #F29600;
    width: 44px;
    height: 22px;
    text-align: center;
    border-radius: 2px;
    font-size: 14px;
    justify-content: center;
    display: inline-flex;
    margin-left: 8px;
}

.service-contract .address-group,
.service-tempoppo .address-group {
    display: flex;
    justify-content: space-between;
}

.service-contract .arrow-left,
.service-policy .arrow-left,
.service-guarantor .arrow-left,
.service-tempoppo .arrow-right {
    background: url(img/arrow_left.svg) no-repeat;
    background-position: left;
    background-position-x: calc(100% - 243px);
}

.service-contract .arrow-right,
.service-policy .arrow-right,
.service-agreement .arrow-right,
.service-guarantor .arrow-right,
.service-tempoppo .arrow-right {
    background: url(img/arrow_right.svg) no-repeat;
    background-position: right;
    background-position-x: calc(100% - 18px);
}

.end-task-text p:first-child {
    margin-bottom: 32px;
}

.information-contractor {
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 17px;
}

.information-verify {
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-bottom: 36px;
    margin-top: 24px;
    letter-spacing: 1.12px;
    line-height: 1.8;
}

.text-verify {
    text-align: center;
}

.form-verify label {
    padding-top: 20px;
}

.form-verify .password {
    margin-top: 12px;
}

.form-verify:last-child {
    margin-bottom: 32px;
}

.form-verify .password input {
    border: none;
    padding-left: 18px;
}

.form-verify .password input:placeholder-shown {
    text-overflow: hidden;
}

.service-contract-verify .btn-service {
    margin-top: 44px;
}

.form-verify .password .icon-eye.close {
    height: 20px;
    width: 20px;
    top: 18px;
    right: 22px;
}

.form-verify .password .icon-eye {
    top: 20px;
    right: 22px;
}

.service-contract .age,
.service-tempoppo .age {
    width: 189px;
    height: 56px;
}

.service-contract .text-left,
.service-tempoppo .text-left {
    margin-top: 25px;
    margin-left: 12px;
}

.service-contract .text-right,
.service-tempoppo .text-right {
    margin-top: 25px;
    margin-right: 12px;
}

.service-contract .sex,
.service-tempoppo .sex {
    width: 250px;
    height: 56px;
    background-color: white;
    margin-top: 12px;
    border-radius: 2px;
}

.service-contract .radio-styled,
.service-tempoppo .radio-styled {
    margin-bottom: 8px;
    height: 56px;
    background-color: white;
    margin-top: 12px;
    border-radius: 2px;
}

.service-contract .radio-two-block,
.service-tempoppo .radio-two-block {
    width: calc((100% - 35px) / 2)
}

.service-contract .input-two-block,
.service-tempoppo .input-two-block {
    width: calc((100% - 16px) / 2)
}

.radio-styled .item input[type="radio"]:checked, .radio-styled .item input[type="radio"]:not(:checked) {
    position: absolute;
    left: -99999px;
}

.radio-styled .item input[type="radio"]:checked + label,
.radio-styled .item input[type="radio"]:not(:checked) + label {
    padding-left: 30px;
    font-size: 15px;
}

.radio-styled .item input[type="radio"]:checked + label,
.radio-styled .item input[type="radio"]:not(:checked) + label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: #333333;
    word-break: break-all;
}

.radio-styled .item input[type="radio"]:checked + label:before {
    border: 1px solid var(--blue-01);
    top: -3px;
}

.radio-styled .item input[type="radio"]:checked + label:before,
.radio-styled .item input[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: transparent;
    border: solid 1px black;
}

.radio-styled .item input[type="radio"]:checked + label:after {
    background: var(--orange-01);
}

.radio-styled .item input[type="radio"]:checked + label:after {
    border: 1px solid var(--orange-01);
    top: 3px;
    left: 6px;
}

.radio-styled .item input[type="radio"]:checked + label:after,
.radio-styled .item input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 4px;
    left: 3px;
    border-radius: 100%;
    box-sizing: border-box;
}

.service-contract label.label-text,
.service-tempoppo label.label-text {
    margin-top: 16px;
    margin-left: 12px;
    padding-top: 0;
}

.service-contract label.title-label,
.service-tempoppo label.title-label {
    margin-top: 0;
    padding-top: 24px;
}

.service-contract .contact-type,
.service-contract .female,
.service-contract .text-yen,
.service-tempoppo .female,
.service-tempoppo .last-wrap {
    margin-left: 12px;
}

.service-contract .icon-arrow-custom.address,
.service-contract .icon-arrow-custom.address-kana,
.service-tempoppo .icon-arrow-custom.address,
.service-tempoppo .icon-arrow-custom.address-kana {
    float: none;
    width: 100%;
}

.service-contract .radio-block,
.service-tempoppo .radio-block {
    width: calc((100% - 12px * 2) / 3);
}

.service-contract .btn-more-tenants {
    border: solid 1px #F29600;
    color: #F29600;
    width: 177px;
    padding: 0;
    height: 50px;
    margin-top: 15px;
    font-size: 14px;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.color-dashed {
    color: #C9C9C9;
}

.service-contract span.distance-between {
    width: 35px;
}

.service-contract .annual-income,
.service-tempoppo .annual-income {
    width: 213px;
}

.service-contract .note-info-school {
    margin-top: 40px;
    margin-left: -10px;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1.6px;
}

.service-contract .future-customers {
    margin-top: 0;
    margin-left: -10px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: normal;
}

.service-contract .form-title {
    margin-bottom: 16px;
}

.service-contract .information-company {
    margin-top: 10px;
    font-size: 14px;
    color: #333333;
}

.service-contract .info-employee,
.service-tempoppo .info-business {
    font-size: 14px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 16px;
}

.service-agreement,
.service-guarantor {
    margin: 0 auto;
    padding: 120px 80px;
    max-width: 960px;
    font-size: 14px;
}

.service-complete {
    padding: 0px 80px;
}

.service-tempoppo {
    margin: 0 auto;
    padding: 80px;
    max-width: 960px;
    font-size: 14px;
}

.index-tempoppo {
    max-width: 800px;
}

.certificate-table .pd-td-tempoppo {
    padding: 14px 10px 16px 12px;
}

.service-agreement .title-service-agreement,
.service-guarantor .title-service-guarantor,
.service-tempoppo .title-service-tempoppo {
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: #333333;
}

.title-service-guarantor,
.title-service-tempoppo {
    margin-bottom: 41px;
}

.service-agreement .information-agreement,
.service-tempoppo .information-tempoppo {
    text-align: center;
    margin-top: 17px;
    margin-bottom: 54px;
    font-size: 14px;
}

.service-contract .information-agreement{
    text-align: center;
    margin-top: 17px;
    margin-bottom: 54px;
    font-size: 14px;
}

.service-agreement .title-detail,
.service-guarantor .title-detail,
.service-tempoppo .title-detail {
    background-color: #909090;
    width: 160px;
    color: #FFFFFF;
    padding: 14px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-agreement .title-value,
.service-guarantor .title-value,
.service-tempoppo .title-value {
    width: calc(100% - 162px);
    margin-left: 2px;
    background-color: #F5F5F5;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    word-break: break-all;
}

.service-agreement .detail-contract,
.service-tempoppo .detail-contract {
    font-size: 26px;
    font-weight: bold;
    margin-top: 80px;
    margin-bottom: 41px;
    text-align: center;
}

.service-agreement .detail-agreement,
.service-guarantor .detail-guarantor,
.service-tempoppo .detail-tempoppo {
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 20px;
}

.title-value.show-housemate {
    display: block;
}

.service-agreement .text-required,
.service-tempoppo .text-required {
    font-size: 14px;
    color: #ED2E15;
    margin-top: 37px;
    letter-spacing: 0.7px;
}

.service-agreement .bd-radius div:first-child,
.service-tempoppo .bd-radius div:first-child {
    border-radius: 4px 0px 0px 4px;
}

.service-agreement .bd-radius div:last-child,
.service-tempoppo .bd-radius div:last-child {
    border-top-right-radius: 4px;
}

.bd-top div:first-child {
    border-top-left-radius: 4px;
}

.bd-top div:last-child {
    border-top-right-radius: 4px;
}

.bd-bottom div:first-child {
    border-bottom-left-radius: 4px;
}

.bd-bottom div:last-child {
    border-bottom-right-radius: 4px;
}

.service-agreement .check-info,
.service-tempoppo .check-info {
    margin-top: 80px;
    font-size: 14px;
    margin-bottom: 40px;
    text-align: center;
}

.service-tempoppo .capital,
.service-tempoppo .tunorver,
.service-tempoppo .number-employee {
    width: 271px;
    height: 56px;
}

.step1-tempoppo {
    margin-bottom: 120px;
}

.service-contract .temporary-staff {
    font-size: 20px;
    color: #333333;
    margin-top: 60px;
    margin-bottom: 16px;
}

/* News */
.news-listing {
    padding-top: 130px !important;
}

.news-listing .news-item:after {
    background: url("./img/icon_arrow_right_orange.svg") no-repeat;
}

.service-contract-listing .news-item:after {
    display: none;
}

.news-listing.notification .news-item:after {
    background: url("./img/icon_arrow_right.svg") no-repeat;
}

.news-listing.notification .news-item.empty-news:after,
.news-listing .news-item.empty-news:after {
    background: none;
}

.news-listing .paginator {
    margin-top: 48px;
}

.payment-history .news-all .btn-news:after,
.news-detail .news-all .btn-news:after {
    content: unset;
}

.payment-history .icon-arrow-right:after,
.news-detail .icon-arrow-right:after {
    content: unset;
}

.news-detail .news-all .btn-news:after {
    content: unset;
}

.payment-history .news-all span,
.news-detail .news-all span {
    color: #F29600;
    font-size: 12px;
    margin-top: 4px;
}

.payment-history .news-all a,
.news-detail .news-all a {
    margin-top: 6px;
    cursor: pointer;
    text-decoration: unset;
}

.payment-history .news-all.display-flex-center,
.news-detail .news-all.display-flex-center {
    margin-top: -40px;
}

.news-detail .common-news {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.news-detail .news-title {
    font-size: 20px;
    font-weight: bold;
    padding-top: 16px;
    letter-spacing: 1.6px;
    line-height: 29px;
}

.news-detail .news-description {
    margin-bottom: 80px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.12px;
}

.news-detail hr {
    margin-top: 24px;
    margin-bottom: 32px;
}

.news-detail .news-new {
    margin-top: 4px;
    line-height: 18px;
}

.news-detail .news-description img {
    margin-top: 62px;
    margin-bottom: 56px;
    width: 100%;
}

.news-detail.notification .common-news {
    max-width: initial;
}

.notification .news-new,
.news-new.bg-red {
    background-color: #DD450D;
}

.user-name,
.user-name-tmp {
    color: #333333;
    font-size: 24px;
    letter-spacing: 1.2px;
}

.user-notification {
    color: #333333;
    font-size: 18px;
    letter-spacing: 0.9px;
}

.user-notification label {
    color: #DD450D;
    cursor: default;
}

.notification .news-title {
    font-weight: bold;
    position: relative;
}

.user-name-tmp {
    color: #fff;
    position: relative;
}

.user-name {
    position: absolute;
    left: 0;
}

.user-name-tmp:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    bottom: 5px;
    left: 0;
    background-color: #F29600;
    opacity: 50%;
}

.news-listing.notification {
    padding-top: 90px !important;
}

.news-detail {
    padding-top: 40px;
}

/* News */

/* Service contract input */
.service-contract-input,
.service-tempoppo-input {
    position: relative;
    background: #f9f9f9;
    padding-bottom: 80px;
    margin-bottom: 120px;
}

.form-cancel .row-input.has-input .row-left {
    line-height: 48px;
}

.contract-progression {
    display: flex;
    justify-content: center;
    padding-top: 72px;
}

.contract-progression .contract-step {
    width: 48px;
    text-align: center;
    color: #B5B5B5;
}

.contract-progression .contract-step .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.19px;
    line-height: 28px;
    text-align: center;
    color: #B5B5B5;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 2px;
    border: solid 2px #B5B5B5;
    background: #FFFFFF;
    font-family: 'Rounded M+ 1c', sans-serif;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 0;
}

.contract-progression .contract-step.current .icon {
    background: var(--orange-01);
    border: solid 2px var(--orange-01);
    color: #FFFFFF;
}

.contract-progression .line {
    width: 80px;
    height: 2px;
    border: 1px solid #b5b5b5;
    margin-top: 23px;
}

.contract-progression .line.active {
    border: 1px solid #F29600;
}

.contract-progression .contract-step .text {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.28px;
    line-height: 23px;
    padding-top: 6px;
    color: #B5B5B5;
}

.contract-progression .contract-step.current .text {
    color: var(--orange-01);
}

.top-page {
    margin-bottom: 24px;
    margin-top: 60px;
}

.wrap-title.top-page {
    letter-spacing: 2.24px;
    line-height: 29px;
}

.service-contract-input h4 {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 28px;
    padding-top: 32px;
    padding-bottom: 72px;
    text-align: center;
}

.service-contract-input h4 span {
    color: #DD450D;
}

.service-contract-input .row-step3 h4 {
    padding-bottom: 56px;
}

.service-contract-input .row-step3 .news-all .btn-news:after {
    content: unset;
}

.row-input {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.row-left {
    width: 102px;
    margin-left: 90px;
    margin-right: 48px;
    text-align: right;
    color: #666666;
}

.row-left span.label {
    width: 42px;
    display: inline-block;
    margin-left: 6px;
}

.row-step1 .row-left {
    width: 154px;
    margin-right: 24px;
}

.row-right {
    max-width: 603px;
}

.row-right {
    word-break: break-all;
}

.row-right textarea {
    width: 569px;
    height: 169px;
    box-shadow: inset 1px 1px 3px #00000029;
    border-radius: 2px;
    outline: none;
    border: none;
    margin-top: 0px;
}

.service-contract-input h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 29px;
    letter-spacing: 0.9px;
    margin-left: 64px;
}

.service-contract-input hr {
    margin: 16px 64px 32px 64px;
}

.row-input input[type="text"],
.row-input input[type="password"] {
    width: 569px;
    height: 48px;
    box-shadow: inset 1px 1px 3px #00000029;
    border-radius: 2px;
    border: none;
    outline: none;
}

.row-input.has-input .row-left {
    margin-top: 9px;
}

p.error, p.custom-error {
    color: #DD450D;
    font-size: 13px;
    letter-spacing: 0.6px;
    line-height: 17px;
    margin-top: 8px;
}

.service-contract-listing {
    padding-top: 55px;
}

.service-contract-listing .news-item {
    display: flex;
}

.service-contract-listing .news-new {
    background-color: #F29600;
    margin-left: 0;
}

.service-contract-listing .news-item .news-info {
    line-height: 16px;
}

.service-contract-listing .news-item label {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 20px;
    color: #0A4FA2;
    text-decoration: underline;
}

/* Service contract input */

/* pagination */
.paginator {
    text-align: center;
}

.paginator .btn {
    font-size: 18px;
    line-height: 24px;
    color: #333333;
    padding: 0;
}

.paginator .btn a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: none;
}

.paginator .btn a:hover,
.paginator .btn.active a {
    background-color: #F29600;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: none;
}

/* pagination */

/* breadcrumbs */
.breadcrumbs nav {
    display: block;
}

.breadcrumbs {
    padding-top: 80px;
}

.breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '';
    background: url('./img/icon_arrow_right_gray.svg') no-repeat;
    width: 5px;
    height: 10px;
    margin-left: 12px;
    margin-top: 9px;
    padding-right: 16px;
}

.breadcrumbs .breadcrumb {
    background: none;
    padding: 16px 40px;
    display: inline-block;
}

.breadcrumb li {
    float: left;
}

.breadcrumb li:last-child {
    float: none;
    display: inline;
}

.breadcrumbs .breadcrumb span {
    font-size: 14px;
    color: #F29600;
}

.breadcrumbs .breadcrumb a span {
    font-size: 14px;
    color: #666666;
}

/* breadcrumbs */

.btn-arrow-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: solid 1px var(--orange-01);
}

.btn-arrow-circle::before {
    content: '';
    width: 7px;
    height: 11px;
    margin-left: 10px;
    margin-top: 7px;
    padding-right: 10px;
    position: absolute;
}

.btn-arrow-circle.icon-arrow-left::before {
    background: url('./img/icon_arrow_left_orange.svg') no-repeat;
}

.btn-arrow-circle.icon-arrow-right::before {
    background: url('./img/icon_arrow_right_orange2.svg') no-repeat;
}

.btn-arrow-circle:hover {
    background-color: var(--orange-01);
}

.btn-arrow-circle.icon-arrow-right:hover::before {
    background: url('./img/icon_arrow_right_default.svg') no-repeat;
}

.btn-arrow-circle.icon-arrow-left:hover::before {
    background: url('./img/icon_arrow_left_default.svg') no-repeat;
}

/*box info*/

.box-info {
    padding: 20px 40px;
    background-color: #FFFFFF;
    position: absolute;
    width: 100%;
    top: -60px;
    height: 120px;
    margin: 0 auto;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
}

.payment-price {
    color: #333333;
    width: 335px;
    height: 80px;
    border-radius: 8px;
    box-shadow: inset 1px 1px 3px #00000029;
    background-color: #F5F5F5;
    font-size: 45px;
    font-weight: bold;
    padding: 6px 20px 9px 0px;
    text-align: right;
    line-height: calc(100% - 6px - 9px);
    position: relative;
}

.payment-price p {
    line-height: 65px;
    letter-spacing: 2.25px;
    margin-right: 28px;
}

.payment-price span.currency-price {
    font-size: 25px;
    font-weight: normal;
    margin-left: 8px;
    position: absolute;
    right: 20px;
    bottom: 0px;
}

.current-time {
    color: #333333;
    font-size: 22px;
    font-weight: bold;
    font-family: "Rounded M+ 1c", sans-serif;
    letter-spacing: 1.1px;
    margin-top: 10px;
}

.label-sub {
    position: absolute;
    top: 0;
    right: -104px;
}

.label-sub.status-disable {
    background-color: #868583;
}

.payment-date-range {
    font-size: 15px;
    color: #333333;
    display: block;
    margin-top: 8px;
    letter-spacing: 0.75px;
}

.payment-date-range div {
    display: inline;
}

.label-sub {
    display: inline-block;
    font-size: 15px;
    color: #FFFFFF;
    width: 88px;
    height: 24px;
    background-color: #0A4FA2;
    border-radius: 2px;
    margin-left: 16px;
    text-align: center;
    line-height: 24px;
    vertical-align: top;
    margin-top: 5px;
}

.payment-history {
    margin-top: 140px;
}

.payment-history .wrap-title {
    margin-bottom: 25px;
}

.payment-header {
    background-color: #0A4FA2;
    border-radius: 2px;
    color: #FFFFFF;
    font-size: 14px;
    height: 38px;
    letter-spacing: 1.12px;
}

.cell {
    height: 100%;
}

.cell div {
    margin: auto 25px;
}

.cell .payment-item-date {
    min-width: 110px;
}

.cell .payment-item-price {
    margin: auto 0;
    padding-right: 90px;
    min-width: 230px;
    text-align: left;
}

.cell .payment-item-detail {
    width: calc(100% - 110px - 90px - 90px - 25px * 5);
}

.cell .payment-item-detail div {
    margin: 0;
    display: inline;
}

.payment-body .payment-item-date {
    font-family: 'Vazirmatn', sans-serif;
    color: #666666;
}

.payment-body {
    color: #333333;
    border-bottom: solid 1px #B5B5B5;
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 27px;
    letter-spacing: 1.12px;
}

.payment-body > div:hover {
    opacity: .5;
}

.payment-body .payment-item-detail {
    font-family: 'Noto Sans CJK JP', sans-serif;
}

.payment-history .news-all {
    margin-top: 48px;
}

.payment-icon {
    position: relative;
    margin-right: 23px;
}

.payment-icon:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_orange.svg") no-repeat;
    top: calc((100% - 14px) / 2);
    right: 0;
    width: 14px;
    height: 14px;
    margin-right: 12px;
}

.payment-detail .paginator {
    margin-top: 40px;
}

/*box info*/

/*certificate*/

.certificate-wrapper {
    padding-left: 115px;
    padding-right: 115px;
}

.certificate-table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
    margin-top: 40px;
}

.certificate-table th,
.certificate-table td {
    border: none;
    background: #FFFFFF;
    line-height: 24px;
    font-size: 14px;
}

.certificate-table tr th:first-child {
    width: 181px;
}

.certificate-table tr th {
    width: 282px;
}

.certificate-table th {
    padding: 14px 12px;
    background-color: #909090;
    color: #FFFFFF;
    font-weight: normal;
}

.certificate-table td {
    padding: 14px 16px 16px 16px;
    vertical-align: middle;
}

.certificate-upload {
    margin-top: 60px;
}

.upload-title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
}

.upload-file {
    margin-top: 24px;
}

#modal-media-libraries .upload-file {
    margin-top: 0;
}

.upload-order {
    font-size: 16px;
    margin-bottom: 12px;
}

.btn-outline-upload {
    color: #0A4FA2;
    border: solid 1px #0A4FA2;
    border-radius: 2px;
    width: 140px;
    height: 40px;
    position: relative;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #FFFFFF;
    padding-right: 26px;
    text-align: right;
    margin-right: 24px;
}

label.btn-outline-upload {
    line-height: 36px;
}

.group-upload {
    display: flex;
}

.upload-border {
    width: 140px;
    margin-right: 24px;
}

.group-upload input[type=file] {
    display: none;
}

.btn-outline-upload:before {
    position: absolute;
    content: '';
    background: url("./img/icon_plus_blue.svg") no-repeat;
    top: calc((100% - 20px) / 2);
    left: 0;
    width: 14px;
    height: 20px;
    margin-left: 22px;
}

.file-selected {
    display: inline;
    line-height: 40px;
    max-width: calc(100% - 180px);
    padding-right: 26px;
}

.file-selected.exists-file {
    color: #1E72BE;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-selected.exists-file span {
    position: absolute;
    content: '';
    background: url("./img/icon_delete.svg") no-repeat;
    top: calc((100% - 18px) / 2);
    width: 18px;
    height: 18px;
    margin-left: 8px;
    cursor: pointer;
    right: 0;
}

.btn-del-prospective-tenant-selected {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: #DD460E;
    margin-left: 46px;
    line-height: 20px;
    cursor: pointer;
}

.btn-del-prospective-tenant-selected:hover {
    text-decoration: underline;
}

.btn-del-prospective-tenant-selected span {
    position: absolute;
    content: '';
    background: url("./img/icon_delete.svg") no-repeat;
    top: 0px;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    cursor: pointer;
    left: -30px;
}

.file-selected.exists-file span:hover {
    opacity: .7;
}

.upload-rule {
    font-size: 14px;
    margin-top: 32px;
    color: #333333;
}

.upload-rule p {
    margin-bottom: 8px;
}

.btn-service {
    gap: 40px;
    margin-top: 64px;
}

.btn-service button {
    border: solid 1px #717171;
    color: #333333;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    height: 50px;
    width: 270px;
    text-align: center;
    padding: 0;
}

.btn-service .btn-back:after {
    background: url("./img/arrow_left.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    left: 0;
    width: 8px;
    height: 13px;
    margin-left: 16px;
}

.btn-service .btn-complete,
.btn-service .btn-next {
    background-color: #F29600;
    color: #FFFFFF;
    border: none;
    position: relative;
}

.btn-service .btn-next:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_right_default.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    right: 0;
    width: 8px;
    height: 13px;
    margin-right: 16px;
}

.certificate {
    margin-top: 24px;
}

.certificate-list {
    display: none;
    font-size: 14px;
    color: #333333;
}

.certificate-list dl {
    margin-bottom: 8px;
}

.certificate-list dd {
    margin-bottom: 40px;
}

.certificate-list dt {
    background-color: #909090;
    padding: 14px 16px;
    border-radius: 4px;
    width: 100%;
    height: 48px;
    color: #FFFFFF;
}

.info-business-up-btn {
    display: none;
}

.info-business-below-btn {
    display: block;
}

.accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    float: right;
}

.accordion-icon, .accordion-icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.accordion-icon span:nth-of-type(1) {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}

.accordion-icon span:nth-of-type(2) {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

dt.active .accordion-icon span:nth-of-type(2) {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.accordion-icon span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    right: 0;
    top: 10px;
}

.cert-block {
    margin-top: 24px;
}

.cert-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.certificate-list-2 .cert-title-2 {
    font-size: 17px;
    margin-bottom: 24px;
}

.certificate-list-2 {
    margin-top: 80px;
}

.certificate-list-2 {
    font-size: 14px;
}

/*certificate*/

/*account setting*/

.bg-gray {
    background-color: #F9F9F9;
}

.form-account {
    padding: 42px 48px;
    border-radius: 8px;
}

.form-account input {
    height: 48px;
    width: 100%;
    box-shadow: inset 1px 1px 3px #00000029;
}

.lb-form-row {
    min-width: 150px;
    font-size: 15px;
    line-height: 48px;
}

.lb-form-row-input {
    margin-top: 12px;
}

.input-right {
    width: calc(100% - 150px);
}

.radio-right {
    line-height: 48px;
}

.agency-user .radio-styled .item input[type="radio"]:checked + label:before,
.agency-user .radio-styled .item input[type="radio"]:not(:checked) + label:before {
    width: 20px;
    height: 20px;
    top: 12px;
}

.agency-user .radio-styled .item input[type="radio"]:checked + label:after {
    top: 16px;
    left: 4px;
}

.agency-user .radio-styled:first-child {
    margin-right: 38px;
}

.agency-user .form-row {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}

.btn-gray {
    background-color: #868583;
    margin-right: 24px;
}

.btn-back {
    position: relative;
}

.btn-gray.btn-back {
    background-color: #868583;
}

.btn-back:after {
    position: absolute;
    content: '';
    background: url("./img/icon_arrow_left_default.svg") no-repeat;
    top: calc((100% - 11px) / 2);
    left: 0;
    width: 7px;
    height: 11px;
    margin-left: 16px;
}

.btn-back:hover::after {
    background: url("./img/icon_arrow_left_gray.svg") no-repeat;
}

.form-account .news-all {
    margin-top: 48px;
}

.form-account .radio-styled .item input[type="radio"]:checked + label,
.form-account .radio-styled .item input[type="radio"]:not(:checked) + label {
    font-size: 16px;
}

.account-info .row-input {
    font-size: 15px;
    letter-spacing: 0.75px;
    line-height: 29px;
    border-bottom: 1px dashed #E5E5E5;
    margin-bottom: 15px;
}

.account-info .row-input.last {
    border: none;
    margin-bottom: 0;
}

.account-info .row-input.edit {
    border: none;
}

.account-info .row-input.last .row-right {
    margin-bottom: 0;
}

.account-info .row-left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    width: 200px;
}
.account-info .row-left span.label-required {
    display: inline;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: bold;
}
.account-info .row-right {
    margin-bottom: 15px;
    max-width: 600px;
}

.account-info .wrap-title {
    margin-bottom: 24px;
}

.account-info .wrap-title.other {
    margin-top: 80px;
}

.account-info h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 29px;
    letter-spacing: 0.9px;
}

.account-info h3.emergency-contact {
    margin-top: 64px;
}

.account-info hr {
    margin: 16px 0px;
}

.account-info .btn-custom {
    float: right;
    width: 138px;
    height: 32px;
}

.account-edit .row-left {
    margin-top: 12px;
}

.account-edit .label-input {
    line-height: 48px;
}

.account-edit hr {
    margin: 16px 0px 22px 0px;
}

.account-edit .row-input input[type="text"],
.account-edit .row-input input[type="password"] {
    width: 600px;
}

.account-edit .notify {
    font-size: 15px;
    letter-spacing: 0.75px;
    line-height: 29px;
    color: #666666;
    margin-top: 24px;
}

.account-edit .form-account {
    padding-bottom: 80px;
}

.change-password-group .password {
    position: relative;
}

.icon-eye {
    content: '';
    background: url(./img/icon-eye.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 15px;
    cursor: pointer;
    right: 15px;
}

.icon-eye.close {
    background: url(./img/icon-eye-close.png) no-repeat;
    background-size: contain;
    top: 12px;
}

a.select-custom {
    background: url(img/arrow_select.svg) #fff center no-repeat;
    background-position-x: calc(100% - 15px);
    background-size: 5%;
    box-sizing: border-box;
    height: 48px;
    width: 220px;
    padding: 14px 73px 13px 16px;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 1px 1px 3px #00000029;
    border-radius: 8px;
}

a.select-custom:hover {
    color: #666666;
    text-decoration: none;
}

.modal-custom .modal-dialog {
    max-width: 900px;
}

.modal-custom .modal-body {
    text-align: center;
}

#modal-media-libraries .modal-body {
    padding: 0 32px 86px 32px;
}

#modal-media-libraries .modal-body .form-group {
    padding-bottom: 0;
    margin-bottom: 0;
}

#modal-media-libraries.modal-custom .modal-header {
    justify-content: end;
    padding: 25px 25px 32px 25px;
    line-height: 15px;
}

.btn-close {
    cursor: pointer;
}

.modal-custom .modal-content {
    background: #FFFFFF;
    box-shadow: 0px 2px 6px #00000029;
    border-radius: 8px;
}

.modal-custom .modal-footer {
    margin-bottom: 70px;
    justify-content: center;
    border: none;
}

.modal-custom .modal-header {
    border: none;
    justify-content: center;
}

.modal-custom .modal-header h3 {
    margin-top: 80px;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1.92px;
    line-height: 29px;
}

.modal-custom .modal-content {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 28px;
}

#modal-confirm-back .btn-custom:after {
    content: unset;
}

/*account setting*/

/*form contact*/
.form-contact .row-step1 .row-left {
    width: 176px;
}

.form-contact .row-step2 .row-left {
    width: 137px;
}

.form-contact .row-left {
    margin-left: 56px;
}

.check-contact-us {
    text-align: center;
    margin-bottom: 48px;
}

.check-contact-us div a {
    color: #0A4FA2;
    text-decoration: underline;
}

.check-contact-us div {
    font-size: 16px;
    letter-spacing: 1.28px;
    color: #333333;
}

.check-contact-us .custom-checkbox {
    display: flex;
}

.form-contact .row-step3 h4.notify label {
    width: 100%;
}

/*form contact*/

/* Tempoppo */
.tempoppo-progression {
    width: 908px;
}

/* Tempoppo */

.datepicker-group {
    position: relative;
}

.row-input .datepicker-group input {
    width: 196px;
    height: 48px;
    box-shadow: 1px 1px 3px #00000029;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 15px;
    letter-spacing: 1.2px;
}

.datepicker-group::after {
    content: '';
    background: url('./img/calendar_icon.png') no-repeat;
    width: 20px;
    height: 21px;
    margin-left: -36px;
    display: inline-block;
    position: absolute;
    bottom: 14px;
    cursor: pointer;
}

.label-required.bg-blue {
    color: #fff;
    background: #0A4FA2;
    line-height: 22px;
}

input[type="text"].datepicker::placeholder {
    color: #333333;
}

.news-all .btn-news.btn-back:after {
    content: unset;
}

.custom-radio {
    position: relative;
    line-height: 22px;
}

.custom-radio input[type="radio"] {
    visibility: hidden;
}

.custom-radio input[type="radio"] + label {
    padding-left: 15px;
}

.custom-radio input[type="radio"] + label:before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: solid 1px #000;
}

.custom-radio input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--orange-01);
}

.row-input .custom-radio {
    margin-right: 24px;
}

.custom-checkbox {
    position: relative;
    line-height: 20px;
}

/* step6,step7 */

.service-agreement.step6,
.service-agreement.step7 {
    padding-top: 0;
}

.service-agreement .detail-agreement.step6 {
    margin-top: 41px;
}

.service-agreement .button-step6 {
    margin-top: 80px;
}

.service-agreement .button-step6 button {
    margin-top: 0px;
}

.service-agreement .title-agreement-success {
    font-size: 26px;
    font-weight: bold;
    color: #333333;
    text-align: center;
}

.service-agreement .info-agreement-success {
    color: #352A2A;
    font-size: 14px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 8px;
}

/* end step 6 */

.custom-checkbox input[type="checkbox"] {
    visibility: hidden;
}

.custom-checkbox input[type="checkbox"] + label {
    padding-left: 15px;
}

.custom-checkbox input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #666666;
    border-radius: 1px;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
    background: #f29600;
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
    background: url("img/tick_white.png") no-repeat;
    content: '';
    position: absolute;
    display: inline-block;
    top: 6px;
    left: 4px;
    width: 14px;
    height: 14px;
}

/* service-agreement-gaku */
.service-contract.gaku .information-contractor {
    color: #ED2E15;
}

/* end service-agreement-gaku */

/* login */
.agency-user-login section {
    height: 100%;
    min-height: 550px;
}

.agency-user-login section:after {
    content: '';
    background: url("img/bg_login.png") center no-repeat;
    background-size: 100%;
    filter: blur(10px);
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0px;
}

.agency-user-login .main-footer {
    position: fixed;
    bottom: 0;
}

.agency-user-login .wrapper {
    height: calc(100% - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.agency-user-login .login-content .logo {
    background: url("img/logo_header.svg") center no-repeat;
    background-size: contain;
    width: 106px;
    height: 42px;
    margin: auto;
    margin-bottom: 24px;
}

.agency-user-login .login-content p {
    text-align: center;
}

.agency-user-login .login-content.reset-password p {
    text-align: revert;
}

.agency-user-login.scale-form-login .wrapper {
    transform: scale(0.7);
}

.agency-user-login .login-content h1 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1.76px;
    line-height: 32px;
    color: #333333;
    text-align: center;
    margin-bottom: 12px;
}

.agency-user-login .login-content .row-input {
    margin-top: 8px;
    margin-bottom: 30px;
}

.agency-user-login .login-content h3 a,
.agency-user-login .login-content .row-input a {
    color: #0A4FA2;
    text-decoration: underline;
}

.agency-user-login .login-content h3 a:hover,
.agency-user-login .login-content .row-input a:hover {
    opacity: 0.5;
}

.agency-user-login .login-content .row-input label {
    margin-top: 16px;
    margin-bottom: 10px;
}

.agency-user-login .login-content .row-input input {
    width: 400px;
    height: 40px;
    margin-top: 0;
}

.agency-user-login .login-content .row-input .icon-eye {
    width: 20px;
    height: 20px;
    top: 12px
}

.agency-user-login .login-content .row-input .icon-eye.close {
    top: 9px
}

.agency-user-login .login-content {
    width: 648px;
    padding: 48px 124px 56px;
    background: #F9F9F9;
    box-shadow: 0px 2px 6px #00000029;
    border-radius: 8px;
}

.agency-user-login .login-content h3 {
    font-size: 14px;
    text-align: center;
    letter-spacing: 1.12px;
    line-height: 24px;
    color: #333333;
    margin-top: 24px;
    margin-bottom: 24px;
}

.agency-user-login .login-content.reset-password-complete h3 {
    margin-bottom: 40px;
}

.agency-user-login .login-content.forgot-password-complete h3 {
    margin-bottom: 8px;
}

.agency-user-login .login-content h3 label {
    width: 100%;
}

.agency-user-login .privacy-policy p {
    letter-spacing: 0.96px;
    line-height: 30px;
    opacity: 0.5;
}

/* login */

/*request money*/

.request-money,
.no-request-money {
    margin-top: 56px;
    margin-bottom: 120px;
}

.request-money.no-payment-group,
.no-request-money.no-payment-group {
    margin-top: 24px;
    margin-bottom: 120px;
}

.request-money .wrap-title:before,
.no-request-money .wrap-title:before {
    background: url("./img/news_icon_red.svg") no-repeat;
}

.money-description {
    font-family: "Noto Sans CJK JP", sans-serif;
    font-size: 14px;
    margin-top: 24px;
    letter-spacing: 0.7px;
}

.transfer-account {
    margin-top: 32px;
    background-color: #F9F9F9;
    border-radius: 8px;
    padding: 42px 74px 48px 76px;
}

.transfer-account .title {
    font-family: "Rounded M+ 1c", sans-serif;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

.transfer-account > div:nth-child(2) {
    border-top: solid 1px #333333;
}

.transfer-account > div:last-child {
    border-bottom: solid 1px #333333;
}

.transfer-account .transfer-account-item {
    border-bottom: dashed 1px #E5E5E5;
    padding-top: 16px;
    padding-bottom: 16px;
}

.transfer-account-item div {
    height: 20px;
    line-height: 20px;
    display: inline;
}

.transfer-account-item .transfer-account-label {
    width: 111px;
    font-size: 14px;
    color: #666666;
}

.transfer-account-item .transfer-account-text {
    width: calc(100% - 10px - 111px);
    font-size: 15px;
    color: #333333;
}

/*request money*/

/* document */

.title-explain {
    font-size: 14px;
    margin-bottom: 4.5px;
    margin-top: 6px;
}

.document-label {
    font-weight: 500;
}

.service-contract .title-rule {
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-bottom: 28px;
    margin-top: 15px;
}

.upload-rule-document {
    margin-bottom: 64px;
}

/*step4*/

.title-value-file {
    color: #1E72BE;
}

.is-payment {
    position: absolute;
    top: 0;
    color: #FFFFFF;
}

.is-payment.breadcrumbs a {
    transition: none;
}

.is-payment.breadcrumbs .breadcrumb span,
.is-payment.breadcrumbs .breadcrumb a span {
    color: #FFFFFF;
}

.is-payment.breadcrumbs .breadcrumb a:hover {
    text-decoration-color: #FFFFFF;
    transition: none;
}

.is-payment.breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    background: url(./img/icon_arrow_right_default.svg) no-repeat;
    width: 7px;
    height: 11px;
}

.header-banner.payment-detail-banner {
    padding-top: 172px;
    height: 339px;
}

/* start upload file */
#modal-media-libraries {
    margin-top: 0;
}

.modal-dialog {
    margin: 0 auto;
}

.modal-document {
    padding-top: 99px;
}

#modal-media-libraries .modal-content {
    width: 100%;
    height: 355px;
    background-color: #F2F2F2;
}

#modal-media-libraries input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 999;
}

#modal-media-libraries input, textarea, select {
    box-shadow: none;
    outline: none;
}

#modal-media-libraries .file-area .file-dummy {
    padding: 25px;
    border: 3px dashed #CECECE;
    border-radius: 1px;
    text-align: center;
    transition: background 0.3s ease-in-out;
    height: 200px;
    width: 100%;
}

#modal-media-libraries .file-area {
    line-height: 0;
}


#modal-media-libraries .file-dummy .title {
    color: #383839;
    font-size: 18px;
    line-height: 20px;
}

#modal-media-libraries .file-dummy .or {
    font-size: 14px;
    line-height: 15px;
    margin-top: 16px;
}

#modal-media-libraries .btn-publish-all {
    height: 40px;
    padding: 0;
}

#modal-media-libraries .btn-publish {
    background: linear-gradient(to right, #1e72be 0%, #1d73bf 0%, #2ea6df 100%);
    width: 147px;
    height: 32px;
    font-size: 14px;
    color: white;
    padding: 0;
}

#modal-media-libraries .btn {
    display: inline;
    margin-top: 16px;
    background: #F29600;
    border-radius: 2px;
    width: 200px;
    height: 56px;
}

#modal-media-libraries .upload-file input {
    height: 200px;
}

/* end upload file */

.gap-column {
    gap: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.upload-order {
    cursor: default;
}

.btn-upload-media {
    cursor: pointer;
}

button.btn-submit:hover,
button.btn-next:hover,
.btn-outline-upload:hover {
    opacity: 0.7;
}

.service-guarantor-progression {
    width: 299px;
}

.service-document-progression {
    width: 292px;
}

.external-link {
    width: fit-content;
    position: relative;
}

.external-link::after {
    content: " ";
    width: 12px;
    height: 12px;
    position: absolute;
    background: url("./img/external_link_icon.svg") no-repeat;
    bottom: 3px;
    right: -18px;
}

.required-success {
    color: #ED2E15;
    text-align: center;
    font-size: 14px;
}

.certificate-table tr td.show-student:nth-child(2) {
    display: none;
}

.service-agreement.verify-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.verify-success-none {
    margin: 134px auto 80px
}

.title-value-block {
    display: block !important;
}