@charset "UTF-8";

@media (max-width: 992px) {
    .agency-container {
        margin: 0 30px;
        padding: 0;
    }

    header.header-agency .header .header-right .item {
        display: none;
    }

    header.header-agency .header .header-right .icon-menu {
        display: block;
        margin-right: 24px;
    }

    .wrap-confirm-app {
        margin: 0 auto;
    }

    .service-contract .sex {
        width: 34%;
    }

    .service-contract .icon-arrow-custom {
        background-position: center;
        background-position-x: calc(100% - 18px);
        width: 26%;
        margin-right: 12px;
        background-color: #FFFFFF;
    }

    .custom-dropdown {
        width: 26%;
    }

    .custom-dropdown select.icon-arrow-custom {
        width: calc(100% - 12px);
    }

    .service-contract .arrow-left {
        background-position-y: calc(100% - 2px);
        font-size: 14px;
    }

    .service-contract .information {
        width: 46%;
    }

    .service-contract .future-customers {
        font-size: 16px;
    }

    .service-contract .year-of-service {
        width: 31%;
    }

    .service-contract label.occupation-size {
        letter-spacing: -2px;
    }

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

    nav.nav-menu.open {
        transform: translate(0);
    }

    /*nav.nav-menu sp*/

    nav.nav-menu {
        display: revert;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        transition: all .2s;
        transform: translate(100%);
        z-index: 1020;
        background-color: #fff;
        overflow-y: scroll;
        padding: 90px 30px 224px 30px;
    }
}

@media (max-width: 900px) {
    /*box info*/

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

    .box-info {
        height: 254px;
        top: -127px;
        flex-flow: row wrap;
        padding: 24px 24px 32px 24px;
    }

    .box-info .payment-time,
    .box-info .payment-price {
        width: 100%;
    }

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

    .payment-price {
        width: 267px;
        height: 60px;
        font-size: 34px;
        padding-top: 5px;
        padding-right: 15px;
        padding-bottom: 7px;
        text-align: right;
        line-height: calc(100% - 5px - 7px);
    }

    .payment-price p {
        line-height: 45px;
        letter-spacing: 2.25px;
    }

    .payment-price span.currency-price {
        font-size: 19px;
        margin-left: 11px;
        bottom: 4px;
    }

    .current-time {
        margin-bottom: 15px;
    }

    .current-time div {
        max-width: 200px;
        font-size: 20px;
    }

    .label-sub {
        position: absolute;
        top: calc((100% - 28px) / 2);
        right: 0;
        width: 72px;
        font-size: 13px;
    }

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

    /*box info*/

    #modal-media-libraries .modal-dialog {
        max-width: 90%;
    }

    .header-banner.payment-detail-banner {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .logo {
        padding-left: 24px;
        font-size: 15px;
        line-height: 20px;
    }

    .container {
        padding: 48px 24px;
        margin-top: 32px;
        margin-bottom: 80px;
        max-width: calc(100% - 48px);
    }

    .service-tempoppo {
        margin-top: 16px;
    }

    .form-title {
        font-size: 20px;
        margin-bottom: 32px;
    }

    input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="time"], input[type="url"], input[type="number"] {
        height: 48px;
        font-size: 15px;
        margin-top: 8px;
    }

    .account-edit input[type="text"],
    .account-edit input[type="tel"],
    .account-edit input[type="email"],
    .account-edit input[type="password"],
    .account-edit input[type="time"],
    .account-edit input[type="url"],
    .account-edit input[type="number"],
    .account-edit textarea {
        margin-top: 8px;
    }

    .break-title {
        display: inline;
    }

    .form-group label {
        font-size: 15px;
    }

    header {
        height: 56px;
    }

    header.form-step {
        height: 64px;
    }

    header.header-agency .header, header.header-agency .header .header-right, header.header-agency .header .item {
        line-height: 56px;
    }

    .header-banner {
        height: 230px;
        padding: 87px 0;
        font-size: 20px;
        font-family: 'Rounded M+ 1c', sans-serif;
    }

    .header-banner.payment-detail-banner {
        padding: 87px 0;
        height: 288px;
    }

    .c-payment.a-history .header-banner.payment-detail-banner,
    .c-payment.a-history .header-banner {
        height: 340px;
    }

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

    .policy-content div {
        padding-right: 16px;
    }

    .header-banner .date-info {
        font-weight: normal;
    }

    /*progression*/
    .progression {
        display: none;
    }

    .progression.progression-agency {
        display: flex;
        padding: 24px;
        height: 138px;
        top: -69px;
    }

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

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

    .progression-agency.progression>div:not(.step-prev):after {
        left: calc(45px + (100% - 45px) / 2);
        border: 1px solid var(--gray-04);
    }

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

    .progression-agency.progression>div:not(:first-child):before {
        right: calc(45px + (100% - 45px) / 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(45px + (100% - 45px) / 2);
    }

    .progression-agency .progression-step .step-icon {
        border: solid 2px #B5B5B5;
        font-size: 19px;
        width: 45px;
        height: 45px;
    }

    .progression-agency .progression-step .step-text {
        font-size: 13px;
        font-weight: normal;
        max-width: 65px;
        font-family: 'Rounded M+ 1c', sans-serif;
    }

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

    .btn-group-step button {
        width: 100%;
        box-sizing: border-box;
    }

    .btn-group-step {
        flex-direction: column-reverse;
    }

    .progression-right {
        font-size: 16px;
        font-weight: bold;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .progression-info {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }

    .progression-circle {
        max-width: 80px;
        margin-right: 24px;
    }

    .progression-circle:before {
        content: '';
        position: absolute;
        top: 0;
        left: -50%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.03);
        pointer-events: none;
        z-index: 1;
    }

    .progression-agency .step-text {
        margin-top: 7px;
    }

    /*progression*/


    .percent {
        position: relative;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        z-index: 1000;
    }

    .percent .number {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        text-align: center;
    }

    .percent .number span {
        color: var(--orange-01);
        font-weight: bold;
        font-size: 14px;
    }

    .contact-method {
        flex-direction: column;
        gap: 10px;
    }

    .text {
        position: relative;
        color: #777;
        margin-top: 20px;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: 0.5s;
    }

    svg {
        position: relative;
        width: 150px;
        height: 150px;
        z-index: 1000;
    }

    svg circle {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #E0E0E0;
        stroke-width: 10;
        stroke-linecap: round;
        transform: translate(5px, 5px);
    }

    svg circle:nth-child(2) {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
    }

    .progression-circle:nth-child(1) svg circle:nth-child(2) {
        stroke-dashoffset: calc(220 - (220 * 25) / 100);
        stroke: var(--orange-01);
    }

    .progression-right {
        width: calc(100% - 102px);
        height: 72px;
        background-color: #FFFFFF;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progression-sp {
        display: block;
        margin: 32px auto;
        padding: 12px 24px;
        max-width: calc(100% - 48px);
        background: #F5F5F5;
        border-radius: 12px;
    }

    .progression-sp img {
        width: 75px;
    }

    /*important-news*/

    .important-news {
        margin-top: 132px;
        padding: 32px 24px;
        margin-bottom: 64px;
    }

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

    .important-news .news-title {
        font-size: 18px;
        font-family: 'Rounded M+ 1c', sans-serif;
    }
    .important-news .news-description {
        font-size: 15px;
    }

    .news-item .news-date,
    .news-item .news-info {
        margin-bottom: 6px;
    }

    .news-new {
        width: 52px;
        font-size: 12px;
        margin-left: 20px;
    }

    .important-news .user-name-tmp, .important-news .user-name {
        height: 30px;
    }

    .user-name, .user-name-tmp {
        font-size: 18px;
        font-weight: bold;
        letter-spacing: unset;
    }

    .user-notification {
        font-size: 15px;
        font-weight: bold;
    }

    .user-notification label {
        display: inline;
    }

    hr {
        margin: 16px 0;
    }

    .common-news {
        margin-bottom: 80px;
    }

    .news-all {
        margin-top: 32px;
    }

    .wrap-title .news-name {
        font-size: 20px;
    }

    .news-all button {
        font-size: 14px;
        width: 240px;
    }

    .wrap-confirm-app .confirm-content {
        flex-flow: row wrap;
        gap: 17px;
    }
    .wrap-confirm-app {
        padding: 55px 0 61px;

    }

    .wrap-confirm-app .menu-item {
        width: calc((100% - 17px) / 2);
        padding-top: 22px;
        padding-bottom: 22px;
        border-radius: 8px;
    }

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

    .wrap-title:before {
        background: url("./img/news_icon_small.png") no-repeat;
        width: 18px;
        height: 18px;
    }

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

    .wrap-confirm-app .menu-item .menu-text {
        font-size: 14px;
    }

    .wrap-confirm-app .menu-item .menu-icon {
        height: 54px;
    }

    .wrap-confirm-app .menu-item .menu-icon img {
        width: 52px;
        object-fit: contain;
    }

    .wrap-confirm-app .menu-item .menu-text {
        margin-top: 12px;
    }

    /*policy-form*/

    .service-policy {
        max-width: calc(100% - 48px);
    }

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

    .service-policy form,
    .service-tempoppo form {
        width: 100%;
    }

    .service-policy {
        padding-bottom: 0;
    }

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

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

    .policy-confirm p{
        word-wrap: break-word;
        text-align: start;
    }

    .policy-confirm .policy-checked-content {
        margin-top: 16px;
        align-items: flex-start;
        justify-content: center;
    }

    .policy-confirm .policy-checked-content input[type="checkbox"] {
        position: relative;
    }

    .policy-confirm {
        margin-top: 24px;
    }

    .policy-content div {
        line-height: 26px;
    }

    .checked-confirm-label {
        word-break: break-all;
        text-align: start;
    }

    .footer-left {
        width: 100%;
        margin-left: revert;
        margin-top: 32px;
    }

    .footer-right {
        width: 100%;
        margin-right: revert;
    }

    .main-footer-agency {
        height: revert;
    }

    .main-footer-agency .agency-container {
        flex-flow: row wrap;
    }

    .footer-link, .footer-link a {
        text-align: center;
        margin-right: 0;
        line-height: 20px;
    }

    .footer-link div {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .footer-right div.footer-link {
        padding-top: 24px;
        margin-bottom: 40px;
    }

    .footer-right div.footer-link.privacy-policy a {
        font-size: 10px;
    }

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

    /*payment-info*/

    .payment-group,
    .no-payment-gr {
        flex-flow: row wrap;
        height: revert;
        max-height: 392px;
    }

    .payment-item {
        flex-flow: row wrap;
    }

    .payment-item .payment-info,
    .payment-item .payment-right {
        width: 100%;
    }


    .payment-group .payment-block,
    .no-payment-gr .payment-block {
        width: 100%;
        margin-bottom: 32px;
        max-height: 392px;
    }

    .header-banner.payment-banner {
        height: 780px;
        padding: 87px 0;
        font-size: 20px;
    }

    .payment-group {
        top: -620px;
    }

    .no-payment-gr {
        top: -205px;
    }

    /*payment-info*/

    /*payment pass*/

    .payment-past {
        margin-top: 220px;
        text-align: center;
    }

    .no-payment-past {
        margin-top: 10px;
        text-align: center;
    }

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

    .payment-status {
        width: 72px;
        height: 23px;
        font-size: 13px;
    }

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

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

    .btn-agency button {
        font-size: 14px;
    }

    /*payment pass*/


    /*notice*/

    .notice {
        height: 88px;
    }

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

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

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

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

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

    /*notice*/

    nav.nav-menu div,
    nav.nav-menu a {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
    }

    /*nav.nav-menu sp*/

    .service-contract .radio-block,
    .service-tempoppo .radio-block {
        width: 100%
    }

    .step-detail {
        padding: 48px 0;
    }

    .service-contract .radio-styled,
    .service-tempoppo .radio-styled {
        height: 48px;
        margin-bottom: 0;
    }

    .service-tempoppo .last-wrap {
        margin-left: 0;
    }

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

    .find-address {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .service-contract .btn-search-address,
    .service-tempoppo .btn-search-address {
        width: 180px;
        height: 36px;
        margin-top: 16px;
        border-radius: 4px;
        margin-left: unset;
    }

    .address-group,
    .service-tempoppo .address-group {
        display: block;
    }

    .service-contract .post_code {
        max-width: none
    }

    .service-contract .address-group {
        display: unset;
        justify-content: unset;
    }

    .service-contract .icon-arrow-custom,
    .service-tempoppo .icon-arrow-custom {
        background: url(img/arrow_select_sp.svg) no-repeat;
        background-position: center;
        background-position-x: calc(100% - 18px);
        width: 26%;
        margin-right: 12px;
        background-color: #FFFFFF;
    }

    .custom-dropdown select.icon-arrow-custom {
        width: calc(100% - 12px);
    }

    .custom-dropdown {
        height: 48px;
    }

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

    .service-contract .icon-arrow-custom-date,
    .service-tempoppo .icon-arrow-custom-date {
        background-position-x: calc(100% - 10px);
    }

    select.form-control.select-none.show-error.icon-arrow-custom.year {
        flex: 2;
    }

    .service-contract .btn-more-tenants {
        width: 100%;
    }

    .service-contract .annual-income,
    .service-tempoppo .capital,
    .service-tempoppo .tunorver,
    .service-tempoppo .number-employee {
        width: 185px;
        margin-top: 12px;
    }

    .service-tempoppo .capital {
        width: 185px;
        margin-top: 12px;
    }

    .service-contract .sex,
    .service-tempoppo .sex {
        width: 100%;
        height: 48px;
    }

    .service-contract .icon-arrow-custom,
    .service-tempoppo .icon-arrow-custom {
        font-size: 15px;
        background-color: #FFFFFF;
        height: 48px;
    }

    .column-reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .btn-service {
        margin: 32px 0 0 0;
        gap: 0;
    }

    .btn-service > * {
        margin: 8px 0;
    }

    .btn-group-step button.btn-back {
        margin-bottom: 0px;
        margin-top: 16px;
    }

    .btn-group-step button {
        margin-top: 40px;
    }

    .service-contract label, .service-contract p {
        font-size: 15px;
    }



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

    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 {
        font-size: 15px;
    }

    .service-contract .future-customers {
        font-size: 16px;
    }

    .service-contract .arrow-left, .service-policy .arrow-left, .service-guarantor .arrow-left {
        background-position-x: calc(100% - 97%);
        background-position-y: calc(100% - 2px);
        font-size: 14px;
    }

    .service-contract .age {
        height: 48px;
    }

    .service-contract label.label-sex {
        margin-top: 13px;
    }

    .input-right {
        width: 100%;
    }

    .form-account {
        padding: 28px 24px 54px;
    }

    .agency-user .form-row {
        margin-bottom: 20px;
    }

    .service-contract-input .news-all,
    .form-account .news-all {
        margin-top: 40px;
        flex-direction: column-reverse;
        height: revert;
    }

    .service-contract-input .news-all button,
    .form-account .news-all button {
        margin-bottom: 12px;
        height: 40px;
    }

    .btn-gray {
        margin-right: revert;
    }

    /*box-info*/

    .payment-header {
        display: none;
    }

    .payment-body {
        padding-top: 15px;
        padding-bottom: 16px;
    }

    .payment-history .common-news > div:nth-child(3) {
        border-top: solid 1px #333333;
    }

    .cell {
        flex-flow: row wrap;
    }

    .cell div {
        margin: auto 0;
    }

    .cell .payment-item-date {
        width: 100%;
    }

    .cell .payment-item-detail {
        width: calc(100% - 150px);
    }

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

    .cell .payment-item-price {
        margin: 0;
        min-width: revert;
        width: 150px;
        padding-right: revert;
        display: flex;
        align-items: end;
        text-align: right;
    }

    .cell .payment-item-price span {
        width: 100%;
    }

    .payment-detail .cell .payment-item-price span {
        width: 100%;
        margin-right: 23px;
    }

    .payment-icon:after {
        top: revert;
        bottom: 4px;
        margin-right: 6px;
    }

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

    /*box-info*/

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

    .lb-form-row {
        font-size: 14px;
        line-height: 40px;
    }

    .form-account input {
        height: 40px;
        border-radius: 2px;
    }

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

    .service-contract .year-of-service {
        margin-right: 12px;
        width: 31%;
    }

    /* Guarantor form  */

    .service-guarantor {
        padding: 8px 24px 120px 24px;
    }

    .title-service-guarantor, .title-service-tempoppo {
        margin-bottom: 24px;
        margin-top: 8px;
    }


    .title-information {
        text-align: center;
    }
    .container.service-contract,
    .container.service-tempoppo,
    .containt.service-guarantor {
        margin-bottom: 80px;
    }

    .service-agreement {
        font-size: 14px;
        padding: 64px 24px;
    }

    .service-verify {
        padding-bottom: 8px;
    }

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

    .information-verify {
        margin-bottom: 10px;
    }

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

    .service-complete {
        padding: 64px 48px;
    }

    .service-agreement .title-detail,
    .service-guarantor .title-detail,
    .service-tempoppo .title-detail  {
        padding: 11px 10px;
    }

    .service-agreement .title-value,
    .service-guarantor .title-value,
    .service-tempoppo .title-value {
        padding: 12px;
    }

    .service-agreement .information-agreement,
    .service-tempoppo .information-agreement  {
        text-align: left;
    }

    .service-agreement .check-info,
    .service-tempoppo .check-info {
        margin-top: 64px;
        margin-bottom: 35px;
    }

    .service-agreement .detail-contract,
    .service-tempoppo .detail-contract{
        margin-bottom: 24px;
        font-size: 20px;
    }

    .service-agreement .information-agreement,
    .service-tempoppo .information-tempoppo {
        margin-top: 33px;
        margin-bottom: 40px;
    }

    .service-agreement .title-service-agreement,
    .service-tempoppo .title-service-tempoppo,
    .service-guarantor .title-service-guarantor
    {
        font-size: 20px;
    }

    .c-service_contract .breadcrumbs {
        display: none;
    }

    .wrap-title.top-page {
        margin-top: 112px;
    }

    .service-contract-input {
        padding-bottom: 64px;
        margin-bottom: 80px;
    }

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

    .contract-progression .line {
        width: 47px;
    }

    .contract-progression .contract-step .text {
        margin-top: 0;
    }

    .service-contract-input h4 {
        letter-spacing: 0.56px;
        line-height: 24px;
        padding: 24px 24px 64px 24px;
        text-align: left;
    }

    .row-input {
        margin-bottom: 40px;
    }

    .row-left {
        width: 100%;
        margin-right: 24px;
        margin-left: 24px;
        margin-bottom: 12px;
        text-align: left;
    }

    .row-right {
        width: 100%;
        margin-right: 24px;
        margin-left: 24px;
        text-align: left;
        max-width: 100%;
    }

    .row-input input {
        margin-top: 0;
    }

    .row-right textarea {
        width: 100%;
        height: 200px;
    }

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

    .service-contract-input h3 {
        margin-left: 24px;
    }

    .service-contract-input hr {
        margin-left: 24px;
        margin-right: 24px;
    }

    .service-contract-input  .text-area {
        font-size: 14px;
    }

    .service-contract-input .row-step3 h4 {
        padding-bottom: 0;
        text-align: center;
    }

    .service-contract-input .row-step3 .news-all button {
        margin-bottom: 0;
    }

    .breadcrumbs {
        display: none;
    }

    .account-info .row-right {
        margin-left: 0;
        margin-right: 0;
    }

    .account-info .row-left{
        margin-bottom: 0;
    }

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

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

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

    .account-edit .row-input .row-right input, a {
       margin-top: 12px;
    }

    .service-contract-input hr {
        margin-bottom: 15px;
    }

    .form-cancel .row-input.has-input .row-left {
        margin-bottom: 0;
        line-height: normal;
    }

    .form-cancel .row-input.vacating-reason-input .row-left {
        margin-bottom: 0;
        line-height: normal;
    }

    .account-info {
        padding-top: 110px;
    }

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

    .account-info .btn-custom {
        width: 120px;
        margin-top: 7px;
    }

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

    .modal-custom .modal-dialog {
        max-width: 315px;
        margin: auto;
    }

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

    .modal-custom .modal-header {
        padding-bottom: 0;
    }

    .modal-custom .modal-header h3 {
        margin-top: 30px;
        margin-bottom: 0;
        font-size: 18px;
        letter-spacing: 0.56px;
    }

    .modal-custom .modal-footer {
        margin-bottom: 40px;
    }

    .icon-eye {
        width: 16px;
        height: 16px;
        top: 18px;
    }

    .icon-eye.close {
        top: 15px;
    }

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

    .check-contact-us div {
        margin: 0 24px;
    }

    /* step6,step7 */
    .service-agreement.step6 .title-service-agreement {
        font-size: 20px;
        margin-top: 8px;
    }

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

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

    .service-agreement .title-agreement-success {
        font-size: 24px;
        margin-top: 8px;
    }

    .error-message {
        font-size: 24px;
        margin-top: 64px;
    }

    .service-agreement .info-agreement-success {
        margin-top: 33px;
        margin-bottom: 8px;
    }

    .column-rps {
        flex-direction: column;
    }

    .column-rps .input-two-block {
        width: 100%;
    }

    .column-rps .radio-two-block {
        width: 100%;
    }

    /* end step 6 */
    .btn-service button {
        width: 100%;
    }

    /*certificate-table*/

    .certificate-table .show {
        display: none;
    }

    .certificate-table tr td {
        padding: 0;
        display: none;
    }

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

    .info-business-up-btn {
        margin-top: 10px;
        display: block;
    }

    .certificate-table tr td.border-bottom-left-radius {
        display: revert;
        text-align: center;
        font: normal normal bold 17px/26px 'Noto Sans CJK JP', sans-serif;
        letter-spacing: 1.36px;
        color: #333333;
        opacity: 1;
        background: none;
        padding-bottom: 24px;
    }

    .certificate-table tr td.show-student:nth-child(1) {
        text-align: center;
    }

    .certificate-table tr td.show-student:nth-child(2) {
        margin-top: 20px;
        font-size: 14px;
        display: block;
    }

    .certificate-table tr td.show-student:nth-child(3) {
        font-size: 14px;
        font-weight: unset;
    }

    .certificate-table tr td.show-student {
        display: block;
        text-align: left;
        font: normal normal bold 17px/26px 'Noto Sans CJK JP', sans-serif;
        letter-spacing: 1.36px;
        color: #333333;
        opacity: 1;
        background: none;
    }

    .certificate-list {
        display: revert;
    }

    .upload-border {
        width: 100%;
    }

    .group-upload {
        flex-wrap: wrap;
    }

    .file-selected {
        line-height: 40px;
        max-width: unset;
    }

    .upload-title {
        font-size: 17px;
    }

    .certificate-upload .upload-order {
        font-size: 15px;
    }

    .certificate-upload {
        font-size: 14px;
    }

    /*certificate-table*/


    .modal-custom .modal-footer {
        flex-direction: column-reverse;
    }

    .agency-user-login .login-content {
        width: 500px;
        padding: 40px 50px 50px;
    }

    .agency-container.service-contract-listing {
        padding-top: 112px;
    }

    /*request money*/

    .request-money {
        margin-top: 48px;
        margin-bottom: 64px;
    }

    .no-request-money {
        margin-top: 225px;
        margin-bottom: 64px;
    }

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

    .transfer-account {
        margin-top: 32px;
        background-color: #F9F9F9;
        border-radius: 8px;
        padding: 24px 24px 40px 24px;
    }

    .transfer-account-item.display-flex-between {
        flex-flow: row wrap;
        gap: 4px;
    }

    .transfer-account-item .transfer-account-text,
    .transfer-account-item .transfer-account-label {
        width: 100%;
    }

    .transfer-account-item div {
        display: revert;
    }

    .money-description {
        margin-top: 12px;
    }

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

    .verify-success-none {
        margin: 32px;
    }

    /*request money*/
    #modal-media-libraries .modal-content {
        width: 100%;
        height: unset;
    }

    #modal-media-libraries .file-area .file-dummy {
        width: 100%;
    }

    #modal-media-libraries .btn {
        width: 180px;
        height: 36px;
    }

    #modal-media-libraries .btn-publish {
        font-size: 12px;
    }

    #modal-media-libraries .file-dummy .title {
        color: #383839;
        font-size: 14px;
    }

    #modal-media-libraries .file-dummy .or {
        font-size: 12px;
    }

    #modal-media-libraries .modal-custom .modal-dialog {
        width: 90%;
    }

    #modal-media-libraries .modal-content {
        width: 100%;
        height: unset;
    }

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

    /*validate*/

    p.error, p.custom-error {
        font-size: 12px;
    }

    /*validate*/

    .contact-group .custom-radio {
        width: 100%;
    }

    .contact-group {
        flex-flow: wrap;
        gap: 10px;
    }

    .payment-history.payment-detail {
        margin-top: 112px;
    }

    .box-info .payment-time {
        padding-bottom: 24px;
    }

    #modal-media-libraries .modal-body {
        padding: 0 24px 40px  24px;
    }

    #modal-media-libraries.modal-custom .modal-header {
        justify-content: end;
        padding: 12px 12px 12px 12px;
    }

    #modal-media-libraries .file-area .file-dummy {
        height: 160px;
    }

    .notification .news-title .user-name {
        line-height: 20px;
    }

    .information-verify {
        text-align: left;
        letter-spacing: 0.56px;
    }

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

    .form-verify .password input{
        padding-right: 45px;
    }

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

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

@media (max-width: 576px) {
    .service-contract-listing .news-item {
        display: inline-block;
        width: 100%;
    }

    .form-contact .row-step3 h4.notify label {
        display: inline;
    }

    .logo {
        max-width: 292px;
    }

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

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

    .news-detail .news-title {
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 1.44px;
    }

    .news-detail .news-description {
        margin-bottom: 48px;
    }

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

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

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

    .service-contract-input .row-step3 h4 {
        text-align: left;
    }

    select.select-custom {
        background-size: 4%;
    }

    .select-custom {
        line-height: 48px;
    }

    .paginator .btn {
        padding: 0;
    }

    .paginator .btn a {
        height: 35px;
        width: 35px;
        line-height: 35px;
    }

    .agency-user-login .login-content {
        width: 315px;
        padding: 40px 30px 50px;
    }
    .agency-user-login .login-content .row-input input {
        width: 265px;
    }

    .agency-user-login .login-content h1 {
        margin-bottom: 8px;
        font-size: 20px;
    }

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

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

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

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

    .agency-user-login .login-content .logo {
        background-size: contain;
        margin-bottom: 32px;
        width: 122px;
        height: 48px;
    }

    .agency-user-login section:after {
        content: '';
        background: url("img/bg_login_sp.png") 0% 35% no-repeat;
    }

    .agency-user-login.a-formforgotpassword section:after {
        background-position: 0% 38%;
    }

    .agency-user-login .login-content h3 {
        text-align: left;
        font-size: 13px;
        letter-spacing: 1.12px;
        line-height: 21px;
        margin-top: 16px;
    }

    .agency-user-login .login-content h3 label {
        display: inline;
    }

    .agency-user-login .login-content.reset-password-complete h3 {
        margin-bottom: 32px;
        text-align: center;
    }

    .agency-user-login .login-content.reset-password .row-input {
        margin-bottom: 32px;
    }

    .agency-user-login .privacy-policy a {
        font-size: 10px;
        letter-spacing: 0.8px;
        opacity: 0.5;
    }

    .agency-user-login section {
        min-height: 440px;
    }

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

    .header-left img {
        height: 38px;
    }

    .document-complete-text,
    .guarantor-complete-text {
        word-break: keep-all;
    }
}

@media (max-width: 375px) {
    .service-agreement .title-detail,
    .service-guarantor .title-detail,
    .service-tempoppo .title-detail {
        width: 107px;
        padding-left: 11px;
        padding-right: 10px;
    }

    .service-agreement .title-value,
    .service-guarantor .title-value,
    .service-tempoppo .title-value {
        width: 218px;
    }

    .service-tempoppo .address-rps {
        display: block;
    }

    .service-tempoppo .address-rps .radio-two-block {
        width: 100%;
    }

    #modal-media-libraries .file-area .file-dummy {
        padding: 16px 12px;
    }

    .column-rps .radio-two-block {
        width: 100%;
    }
}