*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html{
    font-size: 9px;
    overflow-x: hidden;
}
html.yoko{
    font-size: 9px;
}
@media screen and (min-width:768px) and (max-width:1020px){
    html{
        font-size: 1vw;
    }
    html.yoko{
        font-size: 1vw;
    }
}
@media (max-width: 767px){
    html{
        font-size: 1.5vw;

    }
    html.yoko{
        font-size: 2vh;
    }
}

body{
    width: 100%;
    min-height: 100vh;
    color: #333;
    background-color: #fff;
    font-family: 'GenJyuuGothic';
    font-weight: 600;
}

.main {
    width: 100%;
    max-width: 1020px;
    min-height: 100vh;
    margin: 0 auto;

}
.main.forgot,
.main.complete,
.main.register,
.main.login,
.main.top{
    padding-top: 10rem;
}
.hidden {
    display: none !important;
}

h1.title {
    color: #FF5858;
    font-weight: bold;
    font-size: 4.2rem;
    text-align: center;
}
h1.toptitle{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
h1.toptitle>div{
    width: 30%;
    text-align: left;
}
h1.toptitle>div:first-of-type{
    width: 40%;
}
@media screen and (min-width: 768px){
    h1.toptitle>div:first-of-type{
        width: 30%;
    }
}
h1.toptitle>div>img{
    width: 100%;
    object-fit: contain;
}
.title-black {
    color: #333 !important;
}

.simple-text {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #FF5858;
    font-weight: 600;
}
.main.complete .simple-text {
    font-size: 2.3rem;

}
@media screen and (min-width: 768px) and (max-width: 1020px){
    .main.complete .simple-text {
        font-size: 2.3rem;
    }
}
@media screen and (max-width: 768px){
    .main.complete .simple-text {
        font-size: 2.8rem;
    }
}
.simple-text-2 {
    font-size: 18px;
    line-height: 30px;
    text-align: left;
    color: #333;
}


.btn {
    font-size: 2.7rem;
    padding: 2.5rem 6rem 2rem 6rem;
    position: relative;
    background-color: #ffc4c4;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

.btn::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 10px;
    right: 10px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    opacity: 0.5;
}
.btn:disabled{
    background-color: #B4B4B4;
    color: #fff;
}


.form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.form-group .wrap {
    flex-wrap: wrap;
}

.form-group	.column {
    flex-direction: column;
}


.form-group	.select-wrapper {
    position: relative;
    width: 100%;

}
.form-group select {
    width: 100%;
    border: 1px solid #ff5858;
    display: block;
}

.form-group .select-wrapper::after {
    content: " ";
    position: absolute;
    right: 1.5rem;
    top: 5rem;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.form-group	.textarea {
    width: 100%;
    border: 1px solid #ff5858;
    border-radius: 10px;
    display: block;
}

.form-group	.checkbox-wrapper {
    display: flex;

}

.form-group	.checkbox-label {
    cursor: pointer;
    word-break: keep-all;
}

.form-group	.half {
    width: 48%;
}

.form-group	.third {
    width: 32%;
}
.form-group .sex {
    width: 30%;
}

.form-group .toggle-password {
    width: 23%;
    padding: 2.4rem 2.5rem;
}


.form-group .forth {
    width: 24%;
}

.form-group .two-thirds {
        width: 66.67%;
    }
.form-group .password{
    width: 73%;
}

.form-group .note {
    margin-top: 2rem;
    border: 1px solid #FF5858;
    background-color: #FFE5E5;
    border-radius: 10px;
    color: #333;
    line-height: 1.5;
    padding: 5rem;
}
.form-group .note li {
    list-style-position: inside;
    position: relative;
    font-size: 2.8rem;
    line-height: 1.8;
    margin-bottom: 3rem;

}
.form-group .note li::before {
    content: "⚫︎";
    position: absolute;
    transform: translateX(-100%);
}

.form-group .note .error-message {
    width: 100%;

    color: #ff5858;
    display: flex;
    display: flex;
    justify-content: space-around;
}
.form-group input ,
.form-group select{
    position: relative;
    width: 100%;
    border: 1px solid #ff5858;
    padding: 2rem 1.5rem;
    font-size: 2.8rem;
    border-radius: 1.5rem;

    display: block;

}

.form-group select {
    width: 100%;
}

.form-message {
    font-size: 18px;
    color: #ff5858;
    display: flex;
    margin: auto;

}
.form-message.failed {
    color: #333;
}

.preview-container {
    width: 26rem;
    height: 26rem;
    border: 1px solid #ff5858;
    border-radius: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-align: center;

}
.preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 150px;
}


.pos-center {
    margin-right: auto;
    margin-left: auto;
}

.align-start {
    justify-content: flex-start;
    align-items: flex-start;
}

.align-center {
    justify-content: center;
    align-items: center;
}

.align-end {
    justify-content: flex-end;
    align-items: flex-end;
}

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

.label {
    display: block;
}
.radio+label{
    background-color: #FFEFF0;
}
.radio:checked+label {
    background-color: #ff5858;
    color: #fff;
}

/*
margin
*/
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.mb-5 {
    margin-bottom: 40px;
}

.mb-6 {
    margin-bottom: 48px;
}

.mb-8 {
    margin-bottom: 64px;
}

.mx-2 {
    margin-left: 8px;
    margin-right: 8px;
}
.chat-status__label{
    width: 50%;
    font-size: 18px;
    padding:13px 0;
    border: 1px solid #ff5858;
    background-color: #FFE5E5;
    border-radius: 10px;
    text-align: center;
}
.chat-status__text{
    width: 50%;
    text-align: center;
    font-size: 18px;
}

.message-wrapper{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 24px;
}
.message-wrapper-other{
    flex-direction: row-reverse;
}
.message-wrapper-self .message-content{
    background-color: #FFE6E6;
}
.message-content{
    width: 70%;
    padding: 16px;
    background-color: #FFF9B5;
    border-radius: 10px;
    margin:0 16px;
}
.message-user{
    width:20%;
}
.message-user img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.chat-menu{
    position:relative;
    padding: 14px 0;
    text-align: center;
    color:white;
    margin-bottom: 48px;
    &::before{
        content:"";
        position:absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background-color: #B4B4B4;
        z-index: -1;
    }
}
.chat-message-input-wrapper{
    position:relative;
    padding-bottom: 80px;
    &::before{
        content:"";
        position:absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background-color:#EFEFEF;
        z-index: -2;
    }
}
.chat-message-input-title{
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}
.chat-message-input-textarea{
    width: 100%;
    height: 365px;
    border: 1px solid #ff5858;
    border-radius: 10px;
    padding: 12px 10px;
    display: block;
    margin-bottom: 32px;
    background-color: #fff;
}
#chat-message-apo, #apo-day-weekday{
    display: none;
}


.apo-day-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.apo-day-wrapper.apo-day{
    width: 23%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 200px;
    border: 1px solid #ff5858;
    background-color:#FFE5E5;
}
.apo-day-wrapper.apo-day-time{
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .apo-checkbox{
        width: 32%;
        margin-bottom: 8px;
    }
}

.apo-day-time{
    display: flex;
    flex-wrap: wrap;
}
.apo-day-time-message{
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
    border: 1px solid #ff5858;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    &.end{
        background-color: #FF5858;
        color: #fff;
    }
}
a[class*="anchor"] {
    font-size: 20px !important;
    color: #4db0ed !important;
    text-decoration: underline !important;
    word-break: break-all !important;
}

main.top .btn{
    margin: 0 auto;
    margin-top: 5rem;
}
main.top>.btn:first-of-type{
    margin-top: 10rem;
}

main.login{
    margin-top: 10rem;
}
main.login .info-message{
    margin-top: 2rem;
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}
main.register form,
main.login form{
    margin-top: 8rem;
    padding: 0 3.5rem;
}
main.forgot .selecttype{
    margin: 0 auto;
    margin-top: 7rem;
}
main.forgot .selecttype label>p,
main.register .selecttype label>p,
main.login .selecttype label>p{
    font-size: 2.2rem;
    white-space: nowrap;
}
main.register .confitext{
    margin-top: 6rem;
    font-size: 2.1rem;
    color: #FF4848;
    text-align: center;
}
main.forgot label, main.register label.zip{
    margin-top: 2rem;

}
main.forogot .selecttype label>p:first-of-type,
main.register .selecttype label>p:first-of-type,
main.login .selecttype label>p:first-of-type{
    font-size: 3rem;
}
main.forgot .selecttype label>p:last-of-type{
    font-weight: 500;
}
main.register .selecttype label.btn,
main.login .selecttype label.btn{
    padding: 1rem 2rem;
}
main.forgot .selecttype label.btn{
    padding: 1.3rem 2rem 1rem 2rem;

}
main.login label.password,
main.login label.mail{
    margin-top: 6rem;
    font-size: 2.8rem;
}
main.login .form-group.password,
main.login .form-group.mail{
    margin-top: 1.5rem;
}
main.login [type=submit]{
    margin-top: 4rem;
    padding: 2.5rem 3rem 2.2rem 3rem;
}
main.login .bottomlink{
    display: block;
    text-align: center;
    margin-top: 5rem;
    color: #2BA1EA;
    text-decoration: underline;
    font-size: 2.8rem;

}
main.login .error-message{
    margin-top: .5rem;
    font-size: 2.4rem;
}
.main.register{
    padding-bottom: 20rem;
}
main.forgot label,
main.register label{
    font-size: 2.8rem;
    margin-top: 6rem;
}
main.register .selecttype label.btn{
    margin-top: 2rem;
}
main.register .form-group.sex label{
    margin-top: 1.5rem;
    padding: 2.5rem 2rem;
}

.btn.auth{
    padding: 2.5rem 3rem 2.2rem 3rem;
}
.btn.sendpassword{
    padding: 2.3rem 3rem 2rem 3rem;
    font-size: 3rem;
}
.labelwrap{
    line-height: 1.5;
}
main.register .form-group.password{
    margin-top: 1.5rem;
}
main.register select{
    margin-top: 1.5rem;
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    font-size: 2.8rem;
}
main.register select[readonly]{
    background-color: #ccc;
    border: #b4b4b4
}
main.register .show_comprofile .btn{
    padding: 2.5rem 3rem 2.2rem 3rem;
    margin-top: 1.5rem;
}
main.register textarea{
    line-height: 1.5;
    font-size: 2.8rem;
    padding: 5rem 3rem;
}
main.register .course span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #333;
    border-radius: 100vh;
    font-size: 2rem;
    width: 3rem;
    height: 3rem;
    margin-left: 1rem;
    text-align: center;
}
.btn.imgupload{
    padding: 2.5rem 3rem 2.2rem 3rem;
    margin-top: 1.5rem;
}
.w-20{
    width: 20%;
}
.w-20-i{
    width: 20% !important;
}
.w-30{
    width: 30%;
}
.w-30-i{
    width: 30% !important;
}
.w-40{
    width: 40%;
}
.w-40-i{
    width: 40% !important;
}
.w-50{
    width: 50%;
}
.w-50-i{
    width: 50% !important;
}
.w-60{
    width: 60%;
}
.w-60-i{
    width: 60% !important;
}
.w-65{
    width: 65%;
}
.w-65-i{
    width: 65% !important;
}
.w-70{
    width: 70%;
}
.w-70-i{
    width: 70% !important;
}
.w-75{
    width: 75%;
}
.w-75-i{
    width: 75% !important;
}
.w-80{
    width: 80%;
}
.m0a{
    margin: 0 auto;
}
.mt-1_5{
    margin-top: 1.5rem;
}
.mt-1_5_i{
    margin-top: 1.5rem !important;
}
.mt-2{
    margin-top: 2rem;
}
.mt-3{
    margin-top: 3rem;
}
.mt-3_i{
    margin-top: 3rem !important;
}
.mt-4{
    margin-top: 4rem;
}
.mt-5{
    margin-top: 5rem;
}
.mt-6{
    margin-top: 6rem;
}
.mt-8{
    margin-top: 8rem;
}
.mt-10{
    margin-top: 10rem;
}
.license-form-group-remove{
    padding: 2.3rem 4rem 2rem 4rem;

}

.hdn{
    display: none !important;
}
.prearea{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 2rem;
}
.prelabel{
    display: flex;
    align-items: center;
    width:20%;
    height: 5rem;
    font-size: 2.8rem;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.prelabel.checked{
    font-weight: 900;
}
.prelabel::before{
    content: "◻︎";
    display: inline-block;
    margin-right: .5rem;
    margin-top: -1rem;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
    font-size: 4rem;

}
.prelabel.checked::before{
    content: "☑︎";
    margin-top: -2rem;
    margin-right: .4rem;
}
#course_info_modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;

}
#course_info_modal>div{
    width: 90%;
    max-width: 1020px;
    height: 85vh;
    background-color: #fff;
    border-radius: 10px;
    position: relative;

}

#course_info_modal>div::after {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #fff transparent;
    border-width: 20px 10px 0 10px;
    bottom: -20px;
    left: 30%;
    margin-left: -10px;

}

#course_info_modal>div>p{
    color: #ff5858;
    font-size: 2.9rem;
    padding: 2.5rem 0 0 2rem;
    height: 5%;


}
#course_info_modal>div>div{
    width: 95%;
    height: 85%;
    overflow-y: scroll;
    font-size: 2.8rem;
    margin: 0 2.5%;

}
#course_info_modal>div>div>div{
    line-height: 1.5;
    padding-left: 4rem;
    margin-top: 2rem;
}
#course_info_modal>div>div>div>span{
    position: relative;
    left: -4rem;
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 2rem;
    margin-top: 4rem;
}
#course_info_modal .close{
    color: #fff;
    background-color: #B4B4B4;
    display: block;
    margin: 0 auto;
    margin-top: 2.5%;
}
@media screen and (min-width:768px) and (max-height: 1050px){
    #course_info_modal>div>p{
        height: 10%;
    }
    #course_info_modal>div>div{
        height: 75%;
    }

}
@media screen and (min-width:768px) and (max-height: 700px){
    #course_info_modal>div>div{
        height: 70%;
    }
}
@media screen and (max-width: 767px){
    #course_info_modal>div>p{
        height: 10%;
    }
    #course_info_modal .close{
        margin-top: 5%;
    }
    #course_info_modal>div>div{
        height: 75%;
    
    }
}
body.modal-open .main,
html.modal-open ,
body.modal-open {
        overflow: hidden;
}
#confirm-email-message{
    white-space: nowrap;

}
.error-message{
    font-size: 2.8rem;
    color: #ff5858;
    text-align: left;
    margin-top: 1rem;
}
main.complete .btn{
    margin-top: 5rem;
    padding: 2.2rem 3rem 2rem 3rem;
    width: 85%;
}
main.contract{
    padding-top: 10rem;
    padding: 10rem 3rem;

}
main.contract .simple-text{
    margin-top: 4rem;
}
main.contract .popupbtn{
    font-weight: 500;
    margin-top: 4rem;
}
main.contract .btn{
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 4rem;
    width: 90%;
}
main.contract .btn.return:last-of-type{
    background-color: #B4B4B4;
    color: #fff;
}
.header .terms-modal,
main.contract .terms-modal,
.contract-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.header .terms-modal{
    z-index: 200;

}

.header .terms-modal table,
main.contract .terms-modal table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.header .terms-modal table tr th,
.header .terms-modal table tr td,
main.contract .terms-modal table tr th,
main.contract .terms-modal table tr td{
    padding: 1rem 2rem;
    border: 1px solid #363636;
}
.header .end-register-modal,
.end-register-modal{
    position: relative;
    background-color: #fff;
    max-width: 1020px;
    height: 90%;
    width: 90%;
    margin-top: 10%;
    border-radius: 3vw;
    margin: 0 auto;
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.header .end-register-modal>div,
.end-register-modal>div{
    width: 100%;
    height: 100%;
    position: relative;
}
.header .terms-content,
.contract-content,
main.contract .terms-content{
    width: 90%;
    height: 80%;
    overflow-y: scroll;
    margin: 0 auto;
    border: 1px solid #ff5858;
    border-radius: 3vw;
    padding: 3rem;
}
.header .terms-content>div,
.contract-content>div,
main.contract .terms-content>div{
        font-size: 2.5rem;
    font-weight: normal;
    line-height: 1.8;
    margin-top: 2rem;
}
.header .terms-modal .lists,
.contract-modal .lists,
main.contract .lists{
    list-style: none;
    padding-left: 0;
}
.header .terms-modal .lists>li,
.contract-modal .lists>li,
main.contract .lists>li{
    position: relative;
    padding-left: 5rem;
}
.header .terms-modal  .lists>li::before,
.contract-modal .lists>li::before,
main.contract .lists>li::before{
    position: absolute;
    left: 0;
}



.header .terms-modal .list1,
.contract-modal .list1,
main.contract .list1{
    counter-reset: list-counter;
}
.header .terms-modal .list2,
.contract-modal .list2,
main.contract .list2{
    counter-reset: list-counter2;
}
.header .terms-modal .list3,
.contract-modal .list3,
main.contract .list3{
    counter-reset: list-counter3;
}
.header .terms-modal .list4,
.contract-modal .list4,
main.contract .list4{
    counter-reset: list-counter4;
}
.header .terms-modal .list5,
.contract-modal .list5,
main.contract .list5{
    counter-reset: list-counter5;
}

.header .terms-modal .list6,
.contract-modal .list6,
main.contract .list6{
    counter-reset: list-counter6;
}
.header .terms-modal .list7,
.contract-modal .list7,
main.contract .list7{
    counter-reset: list-counter7;
}
.header .terms-modal .list8,
.contract-modal .list8,
main.contract .list8{
    counter-reset: list-counter8;
}
.header .terms-modal .list9,
.contract-modal .list9,
main.contract .list9{
    counter-reset: list-counter9;
}
.header .terms-modal .list10,
.contract-modal .list10,
main.contract .list10{
    counter-reset: list-counter10;
}
.header .terms-modal .list11,
.contract-modal .list11,
main.contract .list11{
    counter-reset: list-counter11;
}
.header .terms-modal .list12,
.contract-modal .list12,
main.contract .list12{
    counter-reset: list-counter12;
}
.header .terms-modal .list13,
.contract-modal .list13,
main.contract .list13{
    counter-reset: list-counter13;
}
.header .terms-modal .list14,
.contract-modal .list14,
main.contract .list14{
    counter-reset: list-counter14;
}
.contract-modal .list15,
main.contract .list15{
    counter-reset: list-counter15;
}
.contract-modal .list16,
main.contract .list16{
    counter-reset: list-counter16;
}
.contract-modal .list17,
main.contract .list17{
    counter-reset: list-counter17;
}
.contract-modal .list18,
main.contract .list18{
    counter-reset: list-counter18;
}
.contract-modal .list19,
main.contract .list19{
    counter-reset: list-counter19;
}
.contract-modal .list20,
main.contract .list20{
    counter-reset: list-counter20;
}
.contract-modal .list21,
main.contract .list21{
    counter-reset: list-counter21;
}
.contract-modal .list22,
main.contract .list22{
    counter-reset: list-counter22;
}
.contract-modal .list23,
main.contract .list23{
    counter-reset: list-counter23;
}
.contract-modal .list24,
main.contract .list24{
    counter-reset: list-counter24;
}
.contract-modal .list25,
main.contract .list25{
    counter-reset: list-counter25;
}
.contract-modal .list26,
main.contract .list26{
    counter-reset: list-counter26;
}
.contract-modal .list27,
main.contract .list27{
    counter-reset: list-counter27;
}
.contract-modal .list28,
main.contract .list28{
    counter-reset: list-counter28;
}
.contract-modal .list29,
main.contract .list29{
    counter-reset: list-counter29;
}
.contract-modal .list30,
main.contract .list30{
    counter-reset: list-counter30;
}
.contract-modal .list31,
main.contract .list31{
    counter-reset: list-counter31;
}
.contract-modal .lists>li,
main.contract .lists>li{
    position: relative;

}
.header .terms-modal .list1>li,
.contract-modal .list1>li,
main.contract .list1>li{
    counter-increment: list-counter;
    padding-left: 5rem;
}
.header .terms-modal .list1>li::before,
.contract-modal .list1>li::before,
main.contract .list1>li::before{
    content: "(" counter(list-counter) ") ";
}
.header .terms-modal .list2>li,
.contract-modal .list2>li,
main.contract .list2>li{
    counter-increment: list-counter2;
    padding-left: 4rem;
}
.header .terms-modal .list2>li::before,
.contract-modal .list2>li::before,
main.contract .list2>li::before{
    content: counter(list-counter2) ".";
}
.header .terms-modal .list3>li,
.contract-modal .list3>li,
main.contract .list3>li{
    counter-increment: list-counter3;
    padding-left: 4rem;
}
.header .terms-modal .list3>li::before,
.contract-modal .list3>li::before,
main.contract .list3>li::before{
    content:  counter(list-counter3) ".";
}
.header .terms-modal .list4>li,
.contract-modal .list4>li,
main.contract .list4>li{
    counter-increment: list-counter4;
    padding-left: 5rem;
}
.header .terms-modal .list4>li::before,
.contract-modal .list4>li::before,
main.contract .list4>li::before{
    content:  "(" counter(list-counter4) ") ";
}
.header .terms-modal .list5>li,
.contract-modal .list5>li,
main.contract .list5>li{
    counter-increment: list-counter5;
    padding-left: 5rem;
}
.header .terms-modal .list5>li::before,
.contract-modal .list5>li::before,
main.contract .list5>li::before{
    content:  "(" counter(list-counter5) ") ";
}

.header .terms-modal .list6>li,
.contract-modal .list6>li,
main.contract .list6>li{
    counter-increment: list-counter6;
    padding-left: 5rem;
}
.header .terms-modal .list6>li::before,
.contract-modal .list6>li::before,
main.contract .list6>li::before{
    content:  "(" counter(list-counter6) ") ";
}
.header .terms-modal .list7>li,
.contract-modal .list7>li,
main.contract .list7>li{
    counter-increment: list-counter7;
}
.header .terms-modal .list7>li::before,
.contract-modal .list7>li::before,
main.contract .list7>li::before{
    content:  counter(list-counter7) ".";
}
.header .terms-modal .list8>li,
.contract-modal .list8>li,
main.contract .list8>li{
    counter-increment: list-counter8;
}
.header .terms-modal .list8>li::before,
.contract-modal .list8>li::before,
main.contract .list8>li::before{
    content:  "(" counter(list-counter8) ")";
}
.header .terms-modal .list9>li,
.contract-modal .list9>li,
main.contract .list9>li{
    counter-increment: list-counter9;
}
.header .terms-modal .list9>li::before,
.contract-modal .list9>li::before,
main.contract .list9>li::before{
    content:  "(" counter(list-counter9) ")";
}
.header .terms-modal .list10>li,
.contract-modal .list10>li,
main.contract .list10>li{
    counter-increment: list-counter10;
}
.header .terms-modal .list10>li::before,
.contract-modal .list10>li::before,
main.contract .list10>li::before{
    content:  "(" counter(list-counter10) ")";
}
.header .terms-modal .list11>li,
.contract-modal .list11>li,
main.contract .list11>li{
    counter-increment: list-counter11;
}
.header .terms-modal .list11>li::before,
.contract-modal .list11>li::before,
main.contract .list11>li::before{
    content:  "(" counter(list-counter11) ")";
}
.header .terms-modal .list12>li,
main.contract .list12>li{
    counter-increment: list-counter12;
}
.header .terms-modal .list12>li::before,
.contract-modal .list12>li::before,
main.contract .list12>li::before{
    content:  "(" counter(list-counter12) ")";
}
.header .terms-modal .list13>li,
.contract-modal .list13>li,
main.contract .list13>li{
    counter-increment: list-counter13;
}
.header .terms-modal .list13>li::before,
.contract-modal .list13>li::before,
main.contract .list13>li::before{
    content:  "(" counter(list-counter13) ")";
}
.header .terms-modal .list14>li,
.contract-modal .list14>li,
main.contract .list14>li{
    counter-increment: list-counter14;
}
.header .terms-modal .list14>li::before,
.contract-modal .list14>li::before,
main.contract .list14>li::before{
    content:  counter(list-counter14) ".";
}
.contract-modal .list15>li,
main.contract .list15>li{
    counter-increment: list-counter15;
}
.contract-modal .list15>li::before,
main.contract .list15>li::before{
    content:  counter(list-counter15) ".";
}
.contract-modal .list16>li,
main.contract .list16>li{
    counter-increment: list-counter16;
}
.contract-modal .list16>li::before,
main.contract .list16>li::before{
    content: "(" counter(list-counter16) ")";
}
.contract-modal .list17>li,
main.contract .list17>li{
    counter-increment: list-counter17;
}
.contract-modal .list17>li::before,
main.contract .list17>li::before{
    content:  counter(list-counter17) ".";
}
.contract-modal .list18>li,
main.contract .list18>li{
    counter-increment: list-counter18;
}
.contract-modal .list18>li::before,
main.contract .list18>li::before{
    content:  counter(list-counter18) ".";
}
.contract-modal .list19>li,
main.contract .list19>li{
    counter-increment: list-counter19;
}
.contract-modal .list19>li::before,
main.contract .list19>li::before{
    content:  counter(list-counter19) ".";
}
.contract-modal .list20>li,
main.contract .list20>li{
    counter-increment: list-counter20;
}
.contract-modal .list20>li::before,
main.contract .list20>li::before{
    content: "(" counter(list-counter20) ")";
}
.contract-modal .list21>li,
main.contract .list21>li{
    counter-increment: list-counter21;
}
.contract-modal .list21>li::before,
main.contract .list21>li::before{
    content: counter(list-counter21) ".";
}
.contract-modal .list22>li,
main.contract .list22>li{
    counter-increment: list-counter22;
}
.contract-modal .list22>li::before,
main.contract .list22>li::before{
    content: counter(list-counter22) ".";
}
.contract-modal .list23>li,
main.contract .list23>li{
    counter-increment: list-counter23;
}
.contract-modal .list23>li::before,
main.contract .list23>li::before{
    content: "(" counter(list-counter23) ")";
}
.contract-modal .list24>li,
main.contract .list24>li{
    counter-increment: list-counter24;
}
.contract-modal .list24>li::before,
main.contract .list24>li::before{
    content: counter(list-counter24) ".";
}
.contract-modal .list25>li,
main.contract .list25>li{
    counter-increment: list-counter25;
}
.contract-modal .list25>li::before,
main.contract .list25>li::before{
    content: counter(list-counter25) ".";
}
.contract-modal .list26>li,
main.contract .list26>li{
    counter-increment: list-counter26;
}
.contract-modal .list26>li::before,
main.contract .list26>li::before{
    content: counter(list-counter26) ".";
}
.contract-modal .list27>li,
main.contract .list27>li{
    counter-increment: list-counter27;
}
.contract-modal .list27>li::before,
main.contract .list27>li::before{
    content: "(" counter(list-counter27) ")";
}
.contract-modal .list28>li,
main.contract .list28>li{
    counter-increment: list-counter28;
}
.contract-modal .list28>li::before,
main.contract .list28>li::before{
    content: counter(list-counter28) ".";
}
.contract-modal .list29>li,
main.contract .list29>li{
    counter-increment: list-counter29;
}
.contract-modal .list29>li::before,
main.contract .list29>li::before{
    content: counter(list-counter29) ".";
}
.contract-modal .list30>li,
main.contract .list30>li{
    counter-increment: list-counter30;
}
.contract-modal .list30>li::before,
main.contract .list30>li::before{
    content: counter(list-counter30) ".";
}
.contract-modal .list31>li,
main.contract .list31>li{
    counter-increment: list-counter31;
}
.contract-modal .list31>li::before,
main.contract .list31>li::before{
    content: counter(list-counter31) ".";
}
.contract-modal .list32>li,
main.contract .list32>li{
    counter-increment: list-counter32;
}
.contract-modal .list32>li::before,
main.contract .list32>li::before{
    content: counter(list-counter32) ".";
}
.contract-modal .list33>p,
main.contract .list33>p{
    margin: 0 !important;

}
.contract-modal .list33>li,
main.contract .list33>li{
    list-style: none !important;
/*	counter-increment: list-counter33;*/

}
.contract-modal .list33>li::before,
main.contract .list33>li::before{
    content: none;
/*	content: "(" counter(list-counter33) ")";*/
}
.contract-modal .list34>li,
main.contract .list34>li{
    list-style: none;
/*	counter-increment: list-counter34;*/
}
.contract-modal .list34>li::before,
main.contract .list34>li::before{
    content: none;
/*	content: "(" counter(list-counter34) ")";*/
}


.end-register-modal .btn,
.header .end-register-modal .btn,
main.contract .end-register-modal .btn{
    width: 40%;
    position: absolute;
    left: 30%;
    bottom: 2%;

}
@media (min-aspect-ratio: 1/1) {
    .end-register-modal .btn,
    .header .end-register-modal .btn,
    main.contract .end-register-modal .btn{
        bottom: 0;
    }
}
.header{
    position: relative;
    overflow: hidden;
}
body.noscroll .header{
    overflow: visible;
}
.header>div:first-of-type{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 11rem;
    padding: 2rem;
}
.header>div:first-of-type>div{
    width: 12%;
    height: 100%;
}
@media screen and (min-width: 768px){
    .header>div:first-of-type>div{
        width: 8%;
    }
    
}
.header>div:first-of-type>div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header>div:first-of-type>div:nth-of-type(2) img{
    transform: scale(1,2);
}
.header .menuicon{
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.header .menuicon>div{
    width: 100%;
    height: .4rem;
    background-color: #333;
    border-radius: 2px;
}
.header .togglemenu{
    position: fixed;
    width: 100%;
    z-index: 102;
    height: 100vh;
    max-width: 1020px;
    top: 0;
    background-color: #fff;
    visibility: hidden;
    transition: transform 1s, opacity 1s, visibility 1s; /* visibilityの遅延を追加 */
    padding-top: 20rem;
    padding: 16rem 5rem 3rem 5rem;
    transform: translateX(100%);
    opacity: 0;


}
.header .togglemenu.active{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 1s, opacity 1s; /* visibilityの遅延を削除 */
}
.header .togglemenu>ul{
    max-height: 70vh;
    overflow-y: scroll;
}
.header .togglemenu>ul>li{
    font-size: 2.5rem;
    padding: 5rem 2rem 1rem 2rem;
    border-bottom: .7rem solid #ff5858;
    position: relative;
}
.header .togglemenu>ul>li::after{
    text-align: center;
    padding-top: .6rem;
    color: #fff;
    content: "→";
    position: absolute;
    width: 4rem;
    height: 4rem;
    background-color: #ff5858;
    border-radius: 100vh;
    right: 0;
    top: 50%;
}
.header .togglemenu .close{
    position: absolute;
    top: 5rem;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    background-color: red;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.header .togglemenu .close>div{
    position: absolute;
    width: 4rem;
    height: .3rem;
    background-color: #fff;
}
.header .togglemenu .close>div:first-of-type {
    transform: rotate(45deg);
}
.header .togglemenu .close>div:nth-of-type(2){

    transform: rotate(-45deg);
}
html.noscroll body{
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overscroll-behavior: none !important;
    position: fixed;
    top: 0;
    left:0;

}
html.noscroll{
    overscroll-behavior: none !important;
}
#bkpopup{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

main.show-profile .header h1,
main.manage-top .header h1{
    font-size: 4rem;
    color: #ff5858;
    text-align: center;
}
main.show-profile .profbox,
main.manage-top .profbox{
        margin-top: 8rem;
    padding: 0 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
main.show-profile .profbox>div,
main.manage-top .profbox>div{
        width: 50%;
}
main.show-profile .profbox>div:first-of-type>div,
main.manage-top .profbox>div:first-of-type>div{
        width: 25rem;
    height: 25rem;
    border-radius: 100vh;
    overflow: hidden;
    margin: 0 auto;
}
main.show-profile .profbox>div:first-of-type>div>img,
main.manage-top .profbox>div:first-of-type>div>img{
        width: 100%;
    height: 100%;
    object-fit: cover;

}
main.show-profile .profbox>div:nth-of-type(2),
main.manage-top .profbox>div:nth-of-type(2){
        background-color: #FFF9B5;
    border-radius: 3rem;
    padding: 2rem 3rem;
    font-size: 2.4rem;
    line-height: 1.5;
    word-break: break-all; /* 単語の途中でも改行を許可 */
    overflow-wrap: break-word; /* 長い単語を改行して表示 */
    white-space: normal; /* 通常の空白処理 */

    
}
main.manage-top .showprofbtn{
    width: 80%;
    margin: 0 auto;
    margin-top: 3rem;
}
main.manage-top .paymentmethodbox,
main.manage-top .planbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    font-size: 2.8rem;
    margin-top: 5rem;
}

main.manage-top .paymentmethodbox>div:first-of-type,
main.manage-top .planbox>div:first-of-type{
    width: 33.5%;
    text-align: center;
    background-color: #FFE5E5;
    border: 1px solid #ff5858;
    padding: 1.5rem;
    border-radius: 2rem;
    line-height: 1.5;

}
main.manage-top .paymentmethodbox>div:first-of-type{
    padding-top: 4rem;
    padding-bottom: 4rem;

}

main.manage-top .paymentmethodbox>div:nth-of-type(2),
main.manage-top .planbox>div:nth-of-type(2){
    width: 62%;
}
main.manage-top .linkline{
    font-size: 3rem;
    text-align: center;
    text-decoration: underline;
    margin-top: 5rem;
    color: #35A5EB;
}
main.manage-top .managedatabox{
    margin-top: 5rem;
}

main.manage-top .managedatabox>p:first-of-type{
    padding: 0 3rem;
    font-size: 2.8rem;
}
main.manage-top .enduserbox>p:nth-of-type(2) .btn{
    margin: 0 auto;
    margin-top: 4rem;
    padding: 2.5rem 3.2rem 2.2rem 3.2rem;
}
main.manage-top .managedatabox{
    margin-top: 8rem;
}
main.manage-top .managedatabox>div{
    border-radius: 3rem;
    background-color: #FFF9B5;
    margin: 3rem;
    font-size: 2.8rem;
    padding: 2rem 3rem;

}
main.manage-top .managedatabox>div>div{
    line-height: 1.8;

}
main.manage-top .managedatabox>div>div:nth-of-type(2){
    font-weight: 500;
    font-size: .9em;
    word-break: break-all; /* 単語の途中でも改行を許可 */
    overflow-wrap: break-word; /* 長い単語を改行して表示 */
    white-space: normal; /* 通常の空白処理 */

}
main.manage-top .paymentmethodbox{
    margin-top: 8rem;
}
main.manage-top .btnbox{
    padding: 0 3rem;
    margin-top: 5rem;
}
main.manage-top .btnbox .btn{
    padding: 2.5rem 3rem 2.2rem 3rem;
    width: 100%;
    margin-top: 2rem;

}
main.manage-top .footer{
    margin-top: 10rem;
    background-color: #FF4848;
    color: #fff;

    padding: 8rem 3rem;
}
main.manage-top .footer>div{
    font-size: 2.8rem;
    padding: 2rem 0;
    font-weight: 100;

}
main.manage-top .footer .copy{
    border-top: 1px solid #fff;
    padding-top: 2rem;
    font-size: 2rem;
    text-align: center;
    font-weight: 100;
    margin-top: 5rem;
}
.modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.end-register-modal h2{
    font-size: 3.5rem;
    color: #ff5858;
    text-align: center;
    margin-bottom: 2rem;

}
#confirm-register{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5);
}
#confirm-register>div{
    width: 100%;
    height: 100%;
    max-width: 1020px;
    margin: 0 auto;
    background-color: #fff;
    overflow: scroll;
    padding: 8rem 3rem 20rem 3rem;
}
#confirm-register>div>p.title{
    font-size: 4.5rem;
    text-align: center;

}
#confirm-register>div>p.title:nth-of-type(2){
    margin-top: 10rem;
}
#confirm-register>div>div:first-of-type{
    margin-top: 5rem;
}
#confirm-register>div>div.first{
    margin-top: 5rem;
}
#confirm-register>div>div>div{
    width: 100%;
    padding: 1.5rem;
    font-size: 2.8rem;
    line-height: 1.8;

}
#confirm-register>div>div>div:first-of-type{
    background-color: #FFC4C4;
    border-radius: 1rem;


}
#confirm-register>div>div>div>span{
    text-decoration: underline;
    display: inline-block;
    margin-top: 3rem;
}
#confirm-register .btnline{
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin-top: 3rem;
}
#confirm-register .btnline .btn{
    width: 45%;
    margin: 0 2%;
    padding: 1.3rem 3rem 1rem 3rem;
    display: inline-block;

}
#confirm-register .btnline>.btn:first-of-type{
    background-color: #B4B4B4;
    color: #fff;
}
main.forgot{
    padding: 0 3rem 5rem 3rem;
}
main.forgot .btn.submit{
    background-color: #ff5858;
    color: #fff;
    display: block;
    margin: 0 auto;
    margin-top: 5rem;
    width: 70%;
    text-align: center;
}
main.forgot .btn:disabled{
    background-color: #B4B4B4;
}
.copy-url-modal>div>div{
    position: fixed;
    top: 20%;
    width: 85vw;
    max-width: 900px;
    background-color: #fff;
    border-radius: 2rem;
    padding: 4rem 5rem;
    font-size: 2.5rem;
    line-height: 1.8;
    font-weight: 100;
}
.copy-url-modal>div>div .close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.copy-url-modal .close>div{
    position: absolute;
    width: 2rem;
    height: .3rem;
    background-color: #333;

}
.copy-url-modal .close>div:first-of-type {
    transform: rotate(45deg);
}
.copy-url-modal .close>div:nth-of-type(2){
    transform: rotate(-45deg);
}

.copy-url-modal .btn{
    padding: 1.5rem 3rem 1.3rem 3rem;
    color: #333;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 5rem;
}
#copyUrlModalMessage{
    font-size: 2.5rem;
    text-align: center;
    margin-top: 3rem;
    color: #ff5858;

}
.main.register.edit .text{
    font-size: 2.8rem;
    margin-top: 1.5rem;
}
main.show-profile{
    padding-bottom: 5rem;
}
main.show-profile .header h1{
    margin-top: 3rem;

}
main.show-profile .profbox{
    margin-top: 5rem;
}
main.show-profile .messagebox,
main.show-profile .areabox,
main.show-profile .companynamebox{
    border-radius: 3rem;
    margin: 0 3rem;
    margin-top: 5rem;
    padding: 2rem;
    font-size: 2.8rem;
    line-height: 1.8;
    background-color: #FFF9B5;
}
main.show-profile .messagebox>div,
main.show-profile .areabox>div,
main.show-profile .companynamebox>div{
    font-size: .8em;
    word-break: break-all; /* 単語の途中でも改行を許可 */
    overflow-wrap: break-word; /* 長い単語を改行して表示 */
    white-space: normal; /* 通常の空白処理 */
    
}
main.show-profile .linkline{
    text-align: center;
}
main.show-profile .linkline .btn{
    margin-top: 5rem;
    padding: 2.5rem 2rem 2.2rem 2rem;
    display: inline-block;
    width: 33%;
    text-align: center;
}
main.show-profile .linkline>.btn:first-of-type{
    margin-right: 5%;
}
main.show-profile .linkline>.btn:nth-of-type(2){
    background-color: #B4B4B4;
    color: #fff;
}

main.leave{
    padding: 10rem 3rem 15rem 3rem;
}
main.leave .infobox{
    margin-top: 10rem;
    line-height: 1.8;
}
main.leave .infobox>p:first-of-type{
    color: #333;
    font-size: 2.8rem;
}
main.leave .infobox>div{
    margin-top: 8rem;
    color: #ff5858;
    font-size: 2.8rem;
}
main.leave form{
    display: inline-block;

}
main.leave .btn{
    display: inline-block;
    width: 32%;
    padding: 1.7rem 0 1.5rem 0;
    text-align: center;
    margin: 0 2%;
    color: #333;
}
main.leave .last_leave_comment_modal .btn,
main.leave .last_leave_modal .btn{
    background-color: #FF5858;
    color: #fff;
}
main.leave .btns{
    margin-top: 5rem !important;
    text-align: center;
}

main.leave .btn.cancel{
    background-color: #B4B4B4;
    color: #fff;
}
main.leave .last_leave_comment_modal,
main.leave .last_leave_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1020px;
    background-color: #fff;
    border-radius: 2rem;
    z-index: 101;
    padding: 5rem 3rem;

}
main.leave .last_leave_comment_modal .btn,
main.leave .last_leave_modal .btn{
    width: 40%;
    padding: 2.2rem 3rem 2rem 3rem;
}
main.leave .last_leave_comment_modal .btn:disabled{
    background-color: #B4B4B4;

}
main.leave .last_leave_comment_modal>p,
main.leave .last_leave_modal>p{
    color: #ff5858;
    font-size: 2.8rem;
}
main.leave .last_leave_comment_modal>p{
    line-height: 1.8;
    font-size: 2.15rem;
}
@media screen and (min-width: 768px){
    main.leave .last_leave_comment_modal>p{
        font-size: 2.5rem;
    }
}
main.leave .last_leave_modal>p:first-of-type{
    font-size: 4rem;
    color: #ff5858;
    text-align: center;
}
main.leave .last_leave_modal>p:nth-of-type(2){
    margin-top: 5rem;
    line-height: 1.8;
}
main.leave .last_leave_comment_modal textarea{
    padding: 3rem;
    font-size: 2.5rem;
    margin-top: 3rem;
    width: 100%;
    height: 70rem;
    border: 1px solid #ff5858;
    border-radius: 2rem;
    font-weight: 500;
    line-height: 1.5;
}
main.contact{
    padding: 10rem 3rem 15rem 3rem;
}
main.contact>div{
    line-height: 1.8;
    margin-top: 10rem;
    font-size: 2.8rem;
}
main.contact>div>p{
    margin-top: 5rem;
}
main.contact textarea{
    padding: 3rem;
    font-size: 2.8rem;
    margin-top: 5rem;
    width: 100%;
    height: 70rem;
    border: 1px solid #ff5858;
    border-radius: 2rem;
    font-weight: 500;
    line-height: 1.5;
}
main.contact textarea::placeholder{
    font-size: 2.8rem;
    color: #ccc;
}
main.contact .btn{
    width: 38%;
    display: block;
    text-align: center;
    padding: 2.2rem 3rem 2rem 3rem;
    margin: 0 auto;
    margin-top: 4rem;
}
main.contact .btn.returnbtn{
    background-color: #B4B4B4;
    color: #fff;
}
main.contact .confi-message{
    font-size: 2.8rem;
    margin-top: 2rem;
    color: #ff5858;
}
main.contact .error-message{
    font-size: 2.8rem;
    color: #ff5858;
}
main.search{
    padding-bottom: 10rem;
}
main.search .datearea{
    padding: 2rem 3rem;
    text-align: left;
}
main.search .datearea>p:last-of-type{
    margin-top: 2rem;
}
main.search .total-count{
    font-size: 2.5rem;
    text-align: right;
    margin-top: 2rem;
    padding-right: 3rem;
}
main.search .admincheck{
    width: 100%;
}
main.search .chat_start_users{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}
@media screen and (min-width: 768px){
    main.search .chat_start_users{
        justify-content: flex-start;
    }
}
main.search .chat_start_users>span{
    display: block;
    width: 30%;
    text-align: center;
    background-color: #ffe6e6;
    padding: 2rem 0;
    margin: .5%;
}
main.search .admincheck{
    width: 100%;
}
main.search .chat_start_users{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}
@media screen and (min-width: 768px){
    main.search .chat_start_users{
        justify-content: flex-start;
    }
}
main.search .chat_start_users>span{
    display: block;
    width: 30%;
    text-align: center;
    background-color: #ffe6e6;
    padding: 2rem 0;
    margin: .5%;
}
main.search .btn.back{
    display: block;
    margin: 0 auto;
    width: 45%;
    padding: 2.2rem 3rem 2rem 3rem;
    text-align: center;
    margin-top: 5rem;
    color: #fff;
    background-color: #B4B4B4;

}
main.search .lists>.morebtn{
    padding: 2.4rem 3rem 2rem 3rem;
    display: block;
    text-align: center;
    width: 50%;
    margin: 0 auto;
    margin-top: 4rem;
}
main.enduserdetail h1,
main.search h1{
    font-size: 4rem;
    color: #ff5858;
    text-align: center;
    margin-top: 5rem;
}
main.enduserdetail .adminbox{
    width: 100%;
}
main.enduserdetail .adminbox>div:first-of-type>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    font-size: 2.8rem;

}
main.enduserdetail .adminbox>div:first-of-type>div>div{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main.enduserdetail .adminbox>div:first-of-type>div>div:first-of-type{
    background-color: #ffe5e5;
    border: 1px solid #ff5858;
    border-radius: 2rem;
    padding: 2rem 2rem;
    text-align: center;
    flex-direction: column;

}
@media screen and (min-width: 768px){
    main.enduserdetail .adminbox>div:first-of-type>div>div:first-of-type{
        flex-direction: row;
    }
}

main.enduserdetail .adminbox>div:first-of-type>div>div:nth-of-type(2){
    padding: 0 2rem;
}
main.enduserdetail .adminbox>div:first-of-type>div>div:nth-of-type(2)>span:first-of-type{
    font-size: 3.5rem;
}
main.enduserdetail .adminbox>div:first-of-type>div>div:nth-of-type(2)>span:nth-of-type(2){
    margin-top: 1rem;
    color: #fff;
    padding: 2rem;
    width: 100%;
    text-align: center;
    background-color: #FF4848;
    border-radius: 2rem;
}
main.enduserdetail .adminbox>div:first-of-type>div:nth-of-type(2){
    margin-top: 2rem;
}
main.enduserdetail .adminbox>div:nth-of-type(2){
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
main.enduserdetail .adminbox>div:nth-of-type(2)>.btn{
    padding: 2.5rem 0;
    width: 30%;
    background-color: #ffe6e6;
    margin: 1%;
}
main.search .adminbox,
main.search .infobox{
    margin-top: 0;
    margin-top: 3rem;
    font-size: 2.8rem;
    padding: 0 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}
main.search .adminbox{
    width: 100%;
}
main.search .adminbox .chat-num{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;

}
main.search .adminbox .chat-num>.title{
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
main.search .adminbox .chat-num>.btn{
    margin: 1rem;
    max-width: 10%;
}
main.search .adminbox .chat-num>.btn:last-of-type{
    max-width: 20%;
    width: 20%;
}
@media screen and (max-width: 768px){
    main.search .adminbox .chat-num>.btn{
        max-width: 20%;
    }
    main.search .adminbox .chat-num>.btn:last-of-type{
        max-width: 40%;
        width: 40%;
    }
    
}
/*main.search .adminbox>div{
    width: 100%;
}	
main.search .adminbox>div:nth-of-type(2)>div{
    margin-top: 2rem;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2){
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn{
    padding: 2.5rem 1rem 2.2rem 1rem;
    margin: 0 1rem;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn:last-of-type{
    width: 38%;
}
@media screen and (max-width: 768px){
    main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2){
        flex-wrap: wrap;
    }
    main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn{
        width: 20%;
        margin-bottom: 4rem;
    }
}
*/
main.search .infobox>span:first-of-type{
    display: inline-block;
    border: 1px solid #ff5858;
    border-radius: 1.5rem;
    background-color: #FFE5E5;
    padding: 2rem 0;
    width: 65%;
    text-align: center;
}
main.search .infobox>span:nth-of-type(2){
    text-decoration: underline;
    display: inline-block;
    width: 30%;

    text-align: center;
    margin-left: 2rem;
    font-size: 3.8rem;
}
main.search .detailsearchbox{
    padding: 0 3rem;
    margin-top: 3rem;
    width: 100%;
    overflow: hidden;
    height: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
main.search .detailsearchbox>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto; /* 内部コンテナにスクロールを適用 */
    width: 100%;
    height: 12rem;

}
main.search .detailsearchbox .open-search-select{
    width: 7rem;
    height: 7rem;
    border: 1px solid #C5C4C5;
    border-radius: 1rem;
    padding: 1rem;
    flex-shrink: 0;
    cursor: pointer;
}
main.search .detailsearchbox .open-search-select>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main.search .detailsearchbox .parts{
    padding: 2rem 1rem;
    margin-left: 1rem;
    font-size: 2.5rem;
    flex-shrink: 0;
    border: 1px solid #C5C4C5;
    border-radius: 1rem;
    position: relative;
}
main.search .detailsearchbox .parts::after{
    content: "×";
    display: inline-block;
    right: 0;

}
main.search .searchbox{
    padding: 0 3rem;
}
main.search .searchbox>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    font-size: 2.8rem;

}
main.search .searchbox>div>div:first-of-type{
    width: 30%;
    text-align: center;
}
main.search .searchbox>div>div:nth-of-type(2){
    width: 55%;
    padding: 0 1rem;

}
main.search .searchbox>div:nth-of-type(2)>div:nth-of-type(2){
    position: relative;
}
main.search .searchbox>div>div:nth-of-type(3){
    width: 12%;
    padding: 2rem 1.5rem;
}
main.search .searchbox>div>div:nth-of-type(3)>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main.search .searchbox>div>div>select,
main.search .searchbox>div>div>input{
    width: 100%;
    border: 1px solid #ff5858;
    padding: 2rem;
    height: 8rem;
}
main.search .searchbox>div:nth-of-type(2)>div:nth-of-type(2):after{
    content: " ";
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    pointer-events: none;
}
main.search .planbox{
    margin: 0 auto;
    margin: 3rem 3rem 0 3rem;
    border-radius: 2rem;
    font-size: 2.8rem;
    overflow: hidden;
}
main.search .planbox>.openbtn{
    background-color: #FFE5E5;
    padding: 2rem;
    border: 1px solid #ff5858;
    border-radius: 2rem;
    position: relative;
}
main.search .planbox.open>.openbtn{
    border-radius: 2rem 2rem 0 0;
}
main.search .planbox>.openbtn::after{
    content: " ";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;

}
main.search .planbox.open>.openbtn::after{
    top: 50%;
    transform: rotate(180deg);
}
main.search .planbox>.onebox{
    font-size: 2.5rem;
    background-color: #FFF5F5;
    line-height: 2.5;
    padding: 3rem;
}
main.search .liststitle{
    margin: 3rem 3rem 0 3rem;
    background-color: #FFC4C4;
    text-align: center;
    font-size: 2.8rem;
    padding: 2rem 0;

}
main.search .lists{
    margin-top: 3rem;
    padding: 0 3rem;

}

main.search .lists .onebox{
    border: .4rem solid #B4B4B4;
    border-radius: 2rem;
    overflow: hidden;
    background-color: #FFF8F8;
    font-size: 2.8rem;
    padding-bottom: 4rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
main.search .lists .onebox .info .info-message{
    font-size: 2rem;
    color: #ff5858;
}
main.search .lists .onebox>.title{
    background-color: #FFE6E6;
    padding: 2rem;
    text-align: center;
    position: relative;
}
main.search .lists .onebox>.title.interesttitle{
    margin-top: 4rem;
}
main.search .lists .onebox>.title:first-of-type::before{
    position: absolute;
    content: "→";
    color: #fff;
    background-color: #ff5858;
    width: 4rem;
    height: 4rem;
    border-radius: 100vh;
    text-align: center;
    line-height: 4rem;
    font-size: 2.8rem;
    top: 1.5rem;
    right: 2rem;
    padding-top: .2rem;
}
main.search .onebox>.status{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 4rem 3rem;


}
main.search .onebox>.status>span{
    display: block;
    text-align: center;
    font-size: 2.8rem;
}
main.search .onebox>.status>span.chat-in,span.chat-allow{
    width: 40%;
    color: #FF5859;

}
main.search .onebox>.status>span.new-chat,span.advice-wish,span.chat-disable{
    width: 60%;
    color: #fff;
    background-color: #FF5859;
    border-radius: 2rem;
    padding: 2.5rem 2rem;
}
main.search .onebox>.status>span.advice-wish.twoline{
    margin-top: 2rem;

}
main.search .onebox>.status>span.chat-disable{
    background-color: #363636;
}
main.search .onebox>.info{
    padding: 3rem;
}
main.search .onebox>.info>p{
    line-height: 1.7;
}
main.search .onebox>.money,
main.search .onebox>.flgs{
        padding: 3rem 3rem 0 3rem;
}
main.search .onebox>.money>p{
    line-height: 1.7;
}
main.search .onebox>.money>p>span{
    display: inline-block;
    margin-left: 2rem;
}
main.search .onebox>.flgs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 3rem 0 3rem;
}

main.search .onebox>.flgs>div{
    width: 32%;
}
main.search .onebox>.flgs>.btn{
    margin-top: 2rem;
    padding: 2.2rem 0 2rem 0;
    background-color: #FFE6E6;
}
main.search .onebox>.flgs>.btn.on{
    background-color: #ff5858;
    color: #fff;
}
main.search .onebox>.interests>.answered{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 4rem 0 0 0;
}

main.search .onebox>.interests>.btns{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 3rem;
}
main.search .onebox>.interests>.btns>div{
    width: 100%;
    padding: 2.2rem 0 2rem 0;
    margin-top: 2rem;
    background-color: #ff5050;
    color: #fff;
    text-align: center;
    border-radius: 2rem;
}

main.search .search-select-modal{
    width: 100%;
    max-width: 1020px;
    height: 90vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    overflow: scroll;
    font-size: 2.8rem;

}
main.search .search-select-modal>div{
    padding-bottom: 20vh;

}
main.search .search-select-modal .topbox{
    position: relative;
}

main.search .search-select-modal .topbox>div:first-of-type{
    position:absolute;
    top: 2rem;
    left: 2rem;

}
main.search .search-select-modal .topbox>div:nth-of-type(2){
    text-align: center;
    padding: 2rem 0;
    font-size: 3.5rem;
}
main.search .search-select-footer{
    position: fixed;
    width: 100%;
    max-width: 1020px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;

    height: 13vh;
    min-height: 10rem;

    background-color: #fff;
    z-index: 100;
    font-size: 2.8rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
main.search .search-select-footer>span{
    display: block;
    width: 30%;
    padding: 2.2rem 0 2rem 0;
    cursor: pointer;
}
main.search .search-select-footer>span:first-of-type{
    margin-right: 4%;
    background-color: #C5C4C5;
    color: #fff;
}
main.search .search-select-modal>div>div>.title{
    display: block;
    width: 100%;

    padding: 2rem 0;
    text-align: center;
    background-color: #FFE6E6;
}

main.search .interestbox,
main.search .moneybox{
    margin-top: 7rem;
    font-size: 2.8rem;
    padding: 0 3rem;
}

main.search .search-select-modal .infobox>div:nth-of-type(2){
    margin-top: 3rem;

}
main.search .search-select-modal .infobox select,
main.search .search-select-modal .infobox input{
    text-align: right;
    width: 10rem;
    border: 1px solid #ff5858;
    padding: 1.5rem;
    margin: 0 2rem;
}
main.search .search-select-modal .infobox select{
    width: 100%;
    text-align: left;



}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2){
    margin-top: 2rem;
}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div{
    width: 40%;
    display: inline-block;
    position: relative;
}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div::after{
    content: " ";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    pointer-events: none;
}

main.search .search-select-modal .btn{
    display: inline-block;
    text-align: center;
    width: 18rem;
    padding: 2.2rem 0 2rem 0;
    background-color: #FFF4F4;
}
main.search .search-select-modal .btn.on{
    background-color: #ff5858;
    color: #fff;
}
main.search .search-select-modal .child,
main.search .search-select-modal .partner{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    margin-top: 3rem;
}
main.search .search-select-modal .child>span,
main.search .search-select-modal .partner>span{
    width: 18rem;
    margin-right: 3.5%;
}
main.search .search-select-modal .child>span:first-of-type,
main.search .search-select-modal .partner>span:first-of-type{
    width: 30%;
}

main.search .search-select-modal .moneybox>p{
    margin-top: 3rem;
}
main.search .search-select-modal .moneybox>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}
main.search .search-select-modal .moneybox>div>div>select{
    width: 100%;
    border: 1px solid #ff5858;
    padding: 1.5rem;
    font-size: 2.5rem;
    font-weight: 500;

}
main.search .search-select-modal .moneybox>div>div{
    width: 20rem;
    position: relative;
}
main.search .search-select-modal .moneybox>div>div::after{
    content: " ";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    pointer-events: none;

}
main.search .search-select-modal .flgbox{
    margin-top: 3rem;
    padding: 0 3rem;
}
main.search .search-select-modal .flgbox>div{
    text-align: left;
    margin-top: 2rem;
}
main.search .search-select-modal .flgbox>div>span:first-of-type{
    display: inline-block;
    margin-top: 2rem;
    width: 30%;
}
main.search .search-select-modal .flgbox>div>span:nth-of-type(2){
    margin-right: 3%;
}


main.search .search-select-modal .interestbox>.box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    gap: 2rem;



}
main.search .search-select-modal .interestbox>.box>div:first-of-type{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main.search .search-select-modal .interestbox>.box>div:last-of-type{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
main.search .search-select-modal .interestbox>.box.interest-child>div:first-of-type{
    width: 50%;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;

}
main.search .search-select-modal .interestbox>.box.interest-child>div:last-of-type{
    width: 50%;
}
main.search.yoko .search-select-modal .interestbox>.box.interest-child>div:first-of-type{
    width: 60%;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;

}
main.search.yoko .search-select-modal .interestbox>.box.interest-child>div:last-of-type{
    width: 35%;
}

main.search .search-select-modal .interestbox>.box.interest-child>div:last-of-type>.btn{
    width: 100%;
}
main.search .btn.disabled{
    background-color: #B4B4B4;
    cursor: not-allowed;

}
main.enduserdetail{
    padding: 0 1rem;
}
main.enduserdetail .returnbtn{
    text-align: left;
    font-size: 2.8rem;
    padding: 0 2rem;
}
main.enduserdetail .tabs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 3rem;
    font-size: 2.8rem;
}
main.enduserdetail .tabs>div{
    width: 49%;
    text-align: center;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 2rem 2rem 0 0;


}
main.enduserdetail .tabs>div:first-of-type{
    background-color: #FFF5F5;
}
main.enduserdetail .tabs>div:last-of-type{
    background-color: #FFF9B5;
}
main.enduserdetail .contents>.detail{
    background-color: #FFF9B5;
    padding: 0 2rem;
    min-height: 100vh;
    padding-bottom: 10rem;
}
main.enduserdetail .contents>.detail{
    padding-top: 4rem;
}
main.enduserdetail .contents>.detail>.title{
    font-size: 2.5rem;
    margin-top: 7rem;
}
main.enduserdetail .contents>.detail>.title:first-of-type{
    margin-top: 0;
}
main.enduserdetail .contents>.detail>.info_kakeibo{
    margin-top: 2rem;
    font-size: 2.3rem;
    color: #ff5858;
}
main.enduserdetail .contents>.detail>.item{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    font-size: 2.6rem;


}
main.enduserdetail .contents .info_children{
    margin-top: 2rem;
    color: #ff5858;
    font-size: 2.3rem;
}
main.enduserdetail .contents>.detail>.item>div{
    width: 50%;
    padding: 2rem;

}
main.enduserdetail .contents>.detail>.item>div:first-of-type{
    background-color: #FFC4C4;
    border-radius: 2rem 0 0 2rem;
    text-align: center;
}
main.enduserdetail .contents>.detail>.item>div:nth-of-type(2){
    background-color: #fff;
    border-radius: 0 2rem 2rem 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.enduserdetail .contents>.detail>.item2,
main.enduserdetail .contents>.detail>.item3{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    padding: 2rem;
    background-color: #FF5859;
    font-size: 2.6rem;
    color: #fff

}
main.enduserdetail .contents>.detail>.item3{
    background-color: #fff;
    color: #333;
}

main.enduserdetail .contents>.kekka{
    background-color: #FFF5F5;
    /* padding: 3rem 2rem; */
    font-size: 2.8rem;
    min-height: 100vh;
}
main.enduserdetail .contents .btn.back{
    display: block;
    width: 35%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5rem;
    padding: 2.2rem 0 2rem 0;
    color: #fff;
    background-color: #B4B4B4;
}
main.enduserdetail .chatbox>.message{
    text-align: center;
    font-size: 2.8rem;
}
main.enduserdetail .chatbox .btn{
    display: block;
    margin: 0 auto;
    margin-top: 3rem;
}
main.enduserdetail .chatbox .status{
    width: 90%;
    margin: 0 auto;
    margin-top: 2rem;
    border-radius: 1rem;
    background-color: #FF5859;
    color: #fff;
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
    padding: 2rem;

}
main.enduserdetail .chatbox .status.disabled{
    background-color: #363636;
}
main.enduserdetail .chatbox .numbox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2.8rem;
    margin-top: 2rem;
}
main.enduserdetail .chatbox .numbox>div{
    width: 50%;
    text-align: center;
}
main.enduserdetail .chatbox .numbox>div:first-of-type{
    margin: 0 5rem 0 2rem;
    border: 1px solid #ff5858;
    background-color: #FFE5E5;
    padding: 2rem 1rem;
    border-radius: 1rem;
    line-height: 1.5;

}
main.enduserdetail .chatbox .numbox>div:nth-of-type(2){
    font-size: 4rem;
}
#confirm-email-message{
    font-size: 2.8rem;

}
.login input[type="password"]{
    width: 71%;
}
main.search.yoko h1{
    text-align: left;
    padding-left: 3rem;
}
main.search.yoko .searchbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
main.search.yoko .searchbox>div{
    width: 48%;
    font-size: 2rem;
}
main.search.yoko .searchbox>div>div:first-of-type{
    white-space: nowrap;
}
main.search.yoko .lists>.onebox{
    cursor: pointer;
    padding: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;

}
main.search.yoko .datearea{
    width: 65%;
    font-size: 2.3rem;
    margin-bottom: 2rem;
    padding-left: 1rem;
}
main.search.yoko .datearea>p:last-of-type{
    margin-top: 1rem;
}
main.search.yoko .lists>.onebox>.title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35%;
    margin-bottom: 2rem;
    font-size: 2.3rem;
}
main.search.yoko .lists .onebox>.title:first-of-type::before{
    right: -180%;

}
main.search.yoko .lists .onebox>.moneytitle{
position: relative
}
main.search.yoko .lists .onebox>.moneytitle>span{
    position: absolute;
    bottom: -6.5rem;
    z-index: 1;

}
main.search.yoko .lists>.onebox>.status,
main.search.yoko .lists>.onebox>.interests,
main.search.yoko .lists>.onebox>.info,
main.search.yoko .lists>.onebox>.money{
    margin-bottom: 2rem;
    width: 65%;
}
main.search.yoko .lists>.onebox>.interests{
    font-size: 2.3rem;
}
main.search.yoko .lists>.onebox>.interests .btn{
    font-size: 2.3rem;
}
main.search.yoko .lists>.onebox>.interests>.answered{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 10rem;
}
main.search.yoko .lists>.onebox>.money{
    margin-bottom: 0;
    padding: 0 1rem;
    font-size: 2.3rem;
}

main.search.yoko .lists>.onebox>.flgs{
    padding: 0;
    padding-left: 36%;
    position: relative;
    font-size: 2.3rem;
    justify-content: flex-start;
    width: 100%;
}
main.search.yoko .onebox>.flgs>div{
    width: 28%;
    margin-right: 1%;
}
main.search.yoko .lists>.onebox>.flgs::before{
    content: " ";
    display: block;
    position: absolute;
    top: -2rem;
    left: 0;
    width: 35%;
    height: 115%;
    background-color: #FFE6E6;
    z-index: 0;



}
main.search.yoko .lists>.onebox>.flgs .btn{
    white-space: nowrap;
    font-size: .8em;
}
main.search.yoko .infobox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
main.search.yoko .infobox>div:first-of-type{
    width: 100%;
}
main.search.yoko .infobox>div:nth-of-type(2){
    width: 50%;
}
main.search.yoko .infobox>div:nth-of-type(3){
    width: 50%;
}
main.search.yoko .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div{
    width: 60%;
}
main.search.yoko .moneybox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
main.search.yoko .moneybox>div:first-of-type{
    width: 100%;
}
main.search.yoko .moneybox>p:nth-of-type(2),
main.search.yoko .moneybox>p:first-of-type{
    position :absolute;
    top: 10rem;
    left: 3%;
}
main.search.yoko .moneybox>p:nth-of-type(2){
    left: 52%;
}
main.search.yoko .moneybox>div:nth-of-type(2),
main.search.yoko .moneybox>div:nth-of-type(3){
    margin-top: 8rem;
    width: 48%;
    font-size: 2rem;
}
main.search.yoko .flgbox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
main.search.yoko .flgbox>div{
    font-size: 2rem;
    width: 48%;
    white-space: nowrap;
}
main.search.yoko .flgbox>div>.btn{
    width: 30%;
    white-space: nowrap;
}
main.search.yoko .search-select-modal .moneybox>div>div{
    width: 16rem;

}
main.search.yoko .search-select-modal{
    padding-bottom: 20rem;

}
main.search.yoko .search-select-modal .flgbox>div>span:first-of-type{
    font-size: 2.8rem;
    width: 35%;
}
main.search.yoko .planbox>.onebox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
main.search.yoko .planbox>.onebox>p{
    font-size: 2.1rem;
    width: 50%;
}
main.search.yoko .btn.back{
    width: 20%;

}
main.search.yoko .onebox>.status{
    justify-content: start;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;

}
main.search.yoko .onebox>.status>span{
    width: 30%;
    font-size: 2.3rem;
}
main.search.yoko .onebox>.status>span.chat-in,
main.search.yoko .onebox>.status>span.chat-allow{
    text-align: center;




}
main.search.yoko .onebox>.status>span.new-chat,main.search.yoko .onebox>.status>span.advice-wish,main.search.yoko .onebox>.status>span.chat-disable{
    width: 50%;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

}
main.search.yoko .lists>.onebox>.info>p{
    display: inline-block;
    width: 100%;
    font-size: 2.3rem;
}
main.search.yoko .onebox>.info{
    padding: 0 1rem;
}
main.search.yoko .lists>.onebox>.info>p:nth-of-type(2){
    width: 40%;
}
main.search.yoko .lists>.onebox>.info>p:nth-of-type(3){
    width: 48%;
    white-space: nowrap;


}
main.search .header>div:first-of-type{
    height: 10rem;

}
main.search.yoko .lists{
    padding: 0 8rem;

}

main.search.yoko .moneybox span{
    white-space: nowrap;
}
#expert_notice_icon{
    position:relative;
}
#expert_notice_icon .num{
    position: absolute;
    width: 3rem;
    height: 3rem;
    background-color: #ff5858;
    color: #fff;
    border-radius: 100vh;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 1rem;

}

.no-subscription-logout{
    margin: 0 auto;
    margin-top: 5rem;
    background-color: #B4B4B4;
    color: #fff;
}
.chat-over-approach,
.chat-disable-trial{
    margin-top: 2rem;
    font-size: 2.0rem;
    text-align: center;
}
.select-contract{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.2);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
.select-contract>div{
    width: 80%;
    max-width: 1020px;
    background-color: #fff;
    border-radius: 2rem;
    padding: 5rem 3rem;
    font-size: 2.5rem;
    line-height: 1.8;
    font-weight: 500;
    position: relative;
}
.select-contract>div>span{
    position: absolute;
    display: block;
    right: 1rem;
    top: .5rem;
    width: 3rem;
    height: 3rem;
}
.select-contract>div>span>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.select-contract>div>div{
    text-align: center;
}
.select-contract .btn{
    display: inline-block;
    width: 45%;
    padding: 1.5rem 3rem 1.3rem 3rem;
    color: #333;
    text-align: center;
    font-weight: 700;
    margin: 3rem 1rem 0 1rem;
}

.main.show-data{
    padding: 10rem 3rem 20rem 3rem;
}
.main.show-data .btn{
    margin-top: 2rem;
    padding: 1.8rem 4rem 1.5rem 4rem;

}
.main.show-data .infobox>div>div:first-of-type,
.main.show-data label{
    font-size: 2.5rem;
    background-color: #ff5050;
    color: #fff;
    padding: 1rem 1rem;

}
.main.show-data .infobox>div>div:first-of-type{
    margin-top: 5rem;

}
.main.show-data .infobox>div.first>div:first-of-type{
    margin-top: 2rem;

}
.main.show-data .title{
    font-size: 3.5rem;
    text-align: center;
    margin-top: 5rem;


}

.main.show-data .infobox>div>div:nth-of-type(2),
.main.show-data .text{
    padding-left: 1.5rem;
}
.main.show-data .infobox>div>div:nth-of-type(2){
    font-size: 2.8rem;
    margin-top: 1.5rem;
}
.main.show-data .text.prefecture{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.main.show-data .text.prefecture>span{
    display: block;

}
.main.show-data .btnline{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 5rem;

}
.main.show-data .btnline>.top{
    background-color: #ccc;
}
.chatdatabox>.plusone{

    margin: 3rem 3% 0 3% !important;
    font-size: 2rem !important;

    border: .4rem solid #B4B4B4;
    background-color: #ffc4c4;
    border-radius: .2rem;
    padding: 2rem !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: center !important;
    position: relative;

}
.search .chatdatabox>.plusone{
    margin: 2rem 0 0 0 !important;
    font-size: 1.7rem !important;
    padding: .5rem !important;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
.chatdatabox>.plusone::before{

    content: ""; /* content は空にするか、必要に応じてテキストを設定 */
    position: absolute;
    top: -3rem; /* 位置を調整してください */
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* 三角形なので幅は0 */
    height: 0; /* 三角形なので高さは0 */
    border-left: 3rem solid transparent;  /* 三角形の底辺の半分の幅 */
    border-right: 3rem solid transparent; /* 三角形の底辺の半分の幅 */
    border-bottom: 3rem solid #ffc4c4; /* 三角形の高さと色 */	
    z-index: 2;
}
.chatdatabox>.plusone::after{ /* 大きい方の三角形（背面、ボーダー色） */
    content: "";
    position: absolute;
    top: -3.4rem; /* ::before より少し上に配置（ボーダーの太さ分考慮） */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    /* ::before より少し大きいサイズにする */
    border-left: 3.4rem solid transparent; /* 3rem + 0.4rem (ボーダーの太さ) */
    border-right: 3.4rem solid transparent; /* 3rem + 0.4rem (ボーダーの太さ) */
    border-bottom: 3.4rem solid #B4B4B4; /* ボーダーの色（本体のボーダー色と同じ） */
    z-index: 1; /* 背面に表示 */
}
.chatdatabox>.plusone>span{
    color: #ff5858;
    z-index: 3;
}

.manage-top .enduserbox>p>.btn{
    margin: 0 auto;
    margin-top: 5rem;

}
.manage-top .enduserbox{
    margin-top: 10rem;
}
.manage-top .enduserbox div.line{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    font-size: 2.8rem;
    padding: 0 3rem;
}
.manage-top .enduserbox div.line>div{
    width: calc(100% / 3);
    line-height: 1.5;
}
.manage-top .enduserbox div.line.child>div:first-of-type{
    background-color: #FFE5E5;
    border: 1px solid #ff5858;
    padding: 1.5rem;
    border-radius: 2rem;
    text-align: center;
}
.manage-top .enduserbox div.line.parent>div:first-of-type{
    text-align: center;
    position: relative;
    top: -6rem;
}
.manage-top .enduserbox div.line.parent>div:nth-of-type(2),
.manage-top .enduserbox div.line.parent>div:nth-of-type(3){
    background-color: #FFE5E5;
    padding: 1.5rem;
    line-height: 1.5;
    text-align: center;
}
.manage-top .enduserbox div.line.child>div:nth-of-type(2),
.manage-top .enduserbox div.line.child>div:nth-of-type(3){
    text-align: center;
}
@media screen and (max-width: 767px) {
    .manage-top .enduserbox div.line.parent>div:first-of-type{
        white-space: nowrap;
    }

    .manage-top .enduserbox div.line>div{
        width: 32.5%;
    }
    .manage-top .enduserbox div.line>div:first-of-type{
        width: 35%;

    }

}
#contractModal{
    z-index: 1000;
}
.agree-sellapo-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    font-size: 2.8rem;
}
.agree-sellapo-modal>div{
    width: 80%;
    max-width: 1020px;
    background-color: #FFE5E5;
    color: #333;
    border: 1px solid #ccc;
    padding: 5rem 3rem;
    line-height: 1.8;
    font-weight: 500;
    font-size: .9em;
    position: relative;
}
.agree-sellapo-modal>div>p{
    text-align: center;
    font-weight: bold;
    font-size: 1em;

}
.agree-sellapo-modal>div>div{
    margin-top: 3rem;
}
.agree-sellapo-modal>div>div>.btn{
    padding: .8rem 4rem .5rem 4rem;
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
}
.agree-sellapo-modal>div>div>div{
    margin-top: 2rem;
    text-align: center;

}
.agree-sellapo-modal>div>div>div>a{
    color: #4DB0ED;
    text-decoration: underline;
}

.apo-req-list{
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
}
.apo-req-list>div:first-of-type{
    width: 100%;
    position: relative;
}
.apo-req-list>div:first-of-type>div:nth-of-type(1){
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

}
.apo-req-list>div:first-of-type>div:nth-of-type(2){
    font-size: 2.8rem;
    text-align: center;
    padding: 2rem 0;
    color: #FF5858;
    width: 100%;
    height: 100%;


}
.apo-req-list>div:nth-of-type(2){
    margin-top: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

}
.apo-req-list>div:nth-of-type(2)>a{
    padding: 1.5rem 2rem;
    font-size: 1.8rem;
}
.apo-req-list>div:nth-of-type(3){
    margin-top: 2rem;
}

.apo-req-list>div:nth-of-type(3)>div{
    width: 100%;
    background-color: #FFE5E5;
    border: 1px solid #ccc;
    font-size: 1.8rem;
    padding: .5rem 0;
    text-align: center;
}
.apo-req-list>div:nth-of-type(3)>table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td{
    background-color: #FFC4C4;
    color: #333;
    padding: 1rem 0;
    font-size: 1.5rem;
    text-align: center;
    vertical-align: middle;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td.status{
    width: 8rem;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td:last-of-type{
    background-color: #FFE5E5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td:last-of-type span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 100vh;
    background-color: #FF5858;
    color: #fff;
    font-size: 2rem;
    padding-top: .2rem;
}
.apo-req-list>div:nth-of-type(3)>table.finish>tbody>tr:first-of-type>td:last-of-type span{
    background-color: transparent;
    border-radius: 0;
    text-decoration: underline;
    color: #333;
    padding-top: 0;
    width: auto;
    font-size: 1.2rem;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td.apo-date{
    padding-bottom: 0;

}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td.apo-date>div{
    margin-top: 1rem;
    border-top: .4rem solid #FFE5E5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td.apo-date>div>div{
    border-right: .4rem solid #FFE5E5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td.apo-date>div>div:last-of-type{
    border-right: none;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:first-of-type>td:last-of-type{
    vertical-align: middle;
    text-align: center;

}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:last-of-type>td{
    line-height: 1.5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td>div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;

}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td>div>div{
    width: calc(100% / 3);
    padding-bottom: 1rem;
    padding: 1rem 0;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td{
    padding: 1rem 0;
    font-size: 1.5rem;
    border-right: .4rem solid #FFE5E5;
    text-align: center;
    vertical-align: middle;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td.signal.red{
    background-color: rgba(255, 88, 89, 0.5);
    border-right: .4rem solid #FFE5E5;

}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td.signal.blue{
    background-color: rgba(77, 176, 237, 0.5);
    border-right: .4rem solid #FFE5E5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td.signal.yellow{
    background-color: rgba(255, 181, 0, 0.5);
    border-right: .4rem solid #FFE5E5;
}

.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td:first-of-type{
    border-left: .4rem solid #FFE5E5;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr>td:last-of-type{
    border-right: none;
}
.apo-req-list>div:nth-of-type(3)>table>tbody>tr:last-of-type{
    border-bottom: .4rem solid #FFE5E5;
}

.apo-req-list table tr.dataline td.created_at{
    width: 10%;
}
.apo-req-list table tr.dataline td.status{
    width: 6%;
}
.apo-req-list table tr.dataline td.status.live{
    background-color: #FC8080;
    color: #fff;
}
.apo-req-list table tr.dataline td.status.finish{
    background-color: #ddd;
    color: #333;
}
.apo-req-list table tr.dataline td.name{
    width: 10%;
}
.apo-req-list table tr.dataline td.apo-date{
    width: 32%;
}
.apo-req-list table tr.dataline td.family-structure{
    width: 12%;

}
.apo-req-list table tr.dataline td.asset-income{
    width: 10%;
}
.apo-req-list table tr.dataline td.signal{
    width: 12%;
}

main.aporeqdetail .aporeqbox{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 2.8rem;
}
main.aporeqdetail .aporeqbox>div:first-of-type{
    width: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2%;
}
main.aporeqdetail .aporeqbox>div:first-of-type>div:first-of-type,
main.aporeqdetail .aporeqbox>div:first-of-type>div:nth-of-type(2){
    background-color: #ff5050;
    width: 49%;
    padding: 2rem 0;
    text-align: center;
    color: #fff;
}
main.aporeqdetail .aporeqbox>div:first-of-type>div:first-of-type{
    background-color: #ffb9b9;
    color: #333;

}

main.aporeqdetail .aporeqbox>div:nth-of-type(3)>div:first-of-type{
    background-color: #ffb9b9;
    width: 30%;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;

}
main.aporeqdetail .aporeqbox>div:nth-of-type(2){
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(2)>p.mybooking{
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(2) .btn{
    background-color: #39A711;
    color: #fff;
    padding: 1.8rem 5rem 1.5rem 5rem;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(3){
    width: 100%;
    margin-top: .5rem;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(3)>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1rem;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(3)>div>div:first-of-type{
    background-color: #ffb9b9;
    width: 25%;
    text-align: center;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(3)>div>div:nth-of-type(2){
    width: 75%;
    background-color: #fff;
    text-align: center;
    padding: 1rem 0;
}
main.aporeqdetail .aporeqbox>div:nth-of-type(3)>div>div:nth-of-type(2) p.over{
    color: #ff5858;
    font-size: .6em;
    font-weight: 600;
}
#applySaleApoModal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
#applySaleApoModal>div{
    width: 95%;
    max-width: 900px;
    background-color: #ffe4e5;
    border-radius: 2rem;
    padding: 5rem 3rem;
    font-size: 2.5rem;
}

#applySaleApoModal>div.first label{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    margin-bottom: 2rem;
    gap: 2rem;

}

#applySaleApoModal .apoDateSelect{
    margin-top: 2rem;
}

#applySaleApoModal .apoDateSelect>label>div:nth-of-type(2){
    width: 30%;
    padding: 2rem 0;
    background-color: #ffb9b9;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}
#applySaleApoModal .apoDateSelect>label>div:nth-of-type(3){
    width: 60%;
    padding: 2rem 0;
    background-color: #fff;
    text-align: center;
}
#applySaleApoModal .apoDateSelect>label>div:nth-of-type(3) p.over{
    color: #ff5858;
    font-size: .6em;
    font-weight: 600;
}
#applySaleApoModal .apoDateSelect>label>div:first-of-type{
    width: 5%;
    position: relative;
}
#applySaleApoModal .apoDateSelect>label>div:first-of-type::before{
    content: " ";
    display: block;
    border: .2rem solid #ff5858;
    border-radius: 100vh;
    background-color: #fff;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#applySaleApoModal .apoDateSelect>label>div.over:first-of-type::before{
    background-color: #ccc;
    border-color: #ccc;

}
#applySaleApoModal .apoDateSelect>label.on>div:first-of-type::after{
    content: " ";
    display: block;
    border-radius: 100vh;
    background-color: #333;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
#applySaleApoModal>div>div.btnline{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;

}
#applySaleApoModal>div>div.btnline>button{
    width: 50%;
    max-width: 300px;
    padding: 1.8rem 3rem 1.5rem 3rem;
    font-size: 2.5rem;
    color: #333;
    background-color: #ffc4c4;
    border: none;
    cursor: pointer;
}
#applySaleApoModal>div>p:first-of-type{
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
#applySaleApoModal .appDateConfirm{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    gap : 2rem;
}
#applySaleApoModal .appDateConfirm>div:first-of-type{
    width: 30%;
    padding: 2rem 0;
    background-color: #ffb9b9;
    text-align: center;
}
#applySaleApoModal .appDateConfirm>div:nth-of-type(2){
    width: 70%;
    padding: 2rem 0;
    background-color: #fff;
    text-align: center;
}
#applySaleApoModal>div.second>div:first-of-type{
    line-height: 1.5;
}