.mypage-container{
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 125%;
    display: flex;
}

.mypage-remote{
    max-width: 280px;
    min-width: 250px;
    width: 22%;
  
    margin-top: 40px;
    margin-left: 30px;

    position: relative;
}

h6{
    font-size: 20px;
}



.mypage-remote > div{
    margin-bottom: 20px;
}

.mypage-remote h6{
    font-weight: 600;
}

.mypage-remote .formmake-link{
    width: 100%;
    /* aspect-ratio: 4 / 1.1; */
    padding: 23px 0;
    text-align: center;

    display: block;

    margin-bottom: 20px;
}

.mypage-remote .formmake-link:hover{
    cursor: pointer;
}

.mypage-remote .tab{
    width: 100%;
}

.mypage-remote .tab .name-container{
    padding: 10px 15px;
}

.mypage-remote .tab ul{
    height: 204.5px;
}

.mypage-remote .tab li{

    font-size: 17px;
    font-weight: 500;

    background-color: #BFC3D4;
    border: #efefef 2px solid;
    border-left: none;
    border-right: none;
}

.mypage-remote .tab .active {
    background-color: #fff87b;

    position: relative;
    width: calc(100% + 20px);

    clip-path: polygon(calc(100% - 10px) 0%, 100% 10px, 100% 100%, 0 100%, 0 0);
}

.mypage-remote .tab .active:hover{
    background-color: #fff87b;
}

.mypage-remote .tab li:hover{
    cursor: pointer;
    background-color: #d5d8e6;

}

.mypage-remote .tab a{
    text-align: center;
    padding: 16px 0;
    width: 100%;
    height: 100%;
    font-size: 20px;

    display: block;
}

.mypage-remote .tab .left-blue-bar{
    height: 100%;
}

.mypage-remote .tab .left-blue-bar::before{
    content: "";

    display: block;
    width: 10px;
    height: 194px;

    background-color: #3b8fff;

    position: absolute;
    z-index: 1;
}

.mypage-remote .tab .load-left-blue-bar{
    height: 100%;
}

.mypage-remote .tab .load-left-blue-bar::before{
    content: "";

    display: block;
    width: 10px;
    height: 65px;

    background-color: #3b8fff;

    position: absolute;
    z-index: 1;
}

.mypage-remote .filter-container {
    width: 100%;
    background-color: #3f3f50;
    color: white;
    padding: 30px 25px;
    padding-bottom: 10px;
    clip-path: polygon(30px 0%, 100% 0, 100% 100%, 0 100%, 0% 30px);

    position: relative;
    z-index: 2;

}

.mypage-remote .filter-container > div {
    margin-bottom: 20px;
}

.mypage-remote .access-container{
    width: 100%;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 500;
}

.mypage-remote .filter-container button,
.mypage-remote .filter-container input[type="text"],
.mypage-remote .filter-container .disable-div
{
    width: 100%;
    padding: 10px 13px;
    margin-top: 8px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border: none;

    font-size: 16px;
    font-weight: 500;
    
}

.mypage-remote .filter-container .disable-div{
    background-color: #666666;
    color: white;
    height: 44px;
}

.mypage-remote .disable-notice{
    font-size: 16px;
}

.mypage-remote .access-disabled label:hover {
    cursor: inherit;
    color : inherit;
}

.mypage-remote .go-back{
    padding: 10px 25px;
    color: white;
    font-size: 17px;
    font-weight: 600;

    display: flex;
    width: 60%;
    justify-content: space-between;
    align-items: center;

    
}

.mypage-remote .go-back i{
    font-size: 32px;
}


.dropdown-contents ul{
    position: absolute;
    width: calc(100% - 50px);

    left: 25px;
    display: none;
    z-index: 2;
}  

.dropdown-contents li{
    width: 100%;
    padding: 10px 13px;
    font-size: 15px;
    font-weight: 400;

    /* position: absolute; */
}

.dropdown-contents li:hover{
    cursor: pointer;
    background-color: rgb(224, 224, 225);
    
}

.dropdown-contents .form_status{
    top: 100%;
    transform: translateY(-320px);
}

.dropdown-contents .content{
    top: 100%;
    transform: translateY(-50px);
}

.dropdown-contents .hero-search-container{
    left: 25px;
    top: 100%;
    transform: translateY(-220px);
    
}

.mypage-remote .filter-container i{
    font-size: 1.4em;
}

.mypage-maincontents{
    width: clamp(700px, 78%, 100%);

    margin: 40px clamp(15px, 5%, 40px);

    float: right;

    /* transform: scale(0.8); */
    transform-origin: 50% 0;
}


.mypage-maincontents ul a{
    color: #efefef;

}

.mypage-maincontents ul .active{
    color: #3b8fff;
}

.mypage-remote .filter-container .typeselecter{
    width: 100%;

    display: flex;
    justify-content: space-around;
}

.mypage-remote .filter-container .typeselecter img{
    width: 45px;
}

.mypage-remote .filter-container .typeselecter img:hover{
    cursor: pointer;
}

.mypage-remote .filter-container .typeselecter .inactive{
    filter: grayscale(1);
}

.mypage-remote .filter-container .herosetting-filterreset{
    width: 175px;

    position: absolute;

    right: -10px;
    top: -20px;
}

.mypage-sort li{
    margin-left: 15px;
}

.charPublic-checkbox{
    appearance: none;
}

.charPublic-checkbox + .checkbox-img {
    margin-top: 3px;
    width: 14px;
    height: 14px;

    border: 3px solid white;
}

.charPublic-checkbox:checked + .checkbox-img::before{
    content:'✔';
    font-size: 1.7em;
    text-align: center;
    position:relative;
    left: -7px;
    top: -24px;

    color: #3b8fff;
}

.access-container .charPublic-checkbox:checked + .checkbox-img::before{
    font-size: 1.7em;

    left: -5px;
    top: -20px;
    
}

.charSetting-ele{
    padding: 3px 0;
    margin-right: 30px;
}

.charSetting-ele:hover{
    cursor: pointer;
    color: #dedede;
}




.charPublic-checkbox + .checkbox-img {
    top: 2px;
}

.havinghero-check{
    margin-top: 60px;
}

.mypage-remote .hero-namesearch{
    position: relative;
}

.mypage-remote .hero-namesearch i{
    position: absolute;

    top: 45px;
    right: 15px;
    
    font-weight: bolder;
}

.mypage-remote .hero-namesearch i:hover{
    cursor: pointer;
}

.hero-setting{
    /* float: right; */

    display: block;
    position: relative;

    width: 780px;
    height: 337px;
    left: 0;
    top: 0;

    margin-right: auto;
    margin-left: auto;
}

.post-title div{
    padding: 15px 20px;
}


.characters-container{
    margin-top: 30px;

    padding: 100px 20px 20px 20px;
    position: relative;
    
    z-index: 2;

    text-align: center;
}


.character-list span{
    font-size: 15px;
}

.characters-container-top{
    position: absolute;
    top: 25px;
    left: 40px;
    /* font-size: 1.2em; */
    width: calc(100% - 80px);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.characters-container .havinghero-set{
    display: flex;
    width: 200px;
    min-width: 200px;
}

.all-btn > div{
    padding: 10px 15px;
}

.characters-container .havinghero-set div{
    display: block;
    height: 100%;

    padding: 10px 15px;

    /* font-size: 1.2em; */
    box-shadow: inset -1px 1.5px 1px 0px rgba(255, 255, 255, 0.8);

    
}


.characters-container .havinghero-set .btn-blue{
    box-shadow: inset 0px 1.5px 1px 0px rgba(255, 255, 255, 0.8);
}

.havinghero-blocker{
    /* z-index: 2; */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);

    /* transition: all 0.5s ease-in-out; */
}
 
.havinghero-zindex{
    filter: none;
}

.havingheroset-check{
    color: #3b8fff;

    position: absolute;
    font-size: 40px;
    -webkit-text-stroke: 0.5px white;

    top: -5px;
    right: -10px;
    z-index: 1;
}

.char-selected{
    width: 103px;
}

.class-dropdown{
    position: absolute;
    top: 742px;
}

.hero-sort{
    position: absolute;
    top: 837px;
}

.characters-container-bg{
    position: relative;
    z-index: 2;
}

.characters-container  .all-btn{
    display: flex;
}

.characters-container .all-btn div{
    box-shadow: inset -1px 1.5px 1px 0px rgba(255, 255, 255, 0.8);

}

.characters-container .all-btn .allselect-btn{
    box-shadow: inset 0px 1.5px 1px 0px rgba(255, 255, 255, 0.8);
}

.personal-set{
    font-size: 1.2em;

    padding: 50px calc((100% - 450px) / 2);
    padding-top: 100px;
    width: 100%;
}

.personal-set h5{
    font-size: 1.3rem;
}

.personal-set > div > button{
    font-size: 1.25rem;
    font-weight: 500;
    border: none;

    padding: 15px;
    width: 350px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.personal-set > div{
    width: 100%;
    /* max-width: 580px; */
    /* min-width: 500px; */

    margin-bottom: 70px;

    position: relative;
}

.personal-set div > h5{
    margin-bottom: 8px;
}

.personal-set input{
    width: 100%;
    padding: 15px 18px;
    font-weight: 500;

    /* background-color: #efefef; */
}


.personal-set .nickname-save {
    width: 130px;
    font-weight: 500;
    padding: 7px 10px;

    border: none;

    position: absolute;
    right: 15px;
    top: -50px;
}

.personal-set .mail-img{
    position: absolute;
    width: 35px;
    aspect-ratio: 1 / 1;
    left: 15px;
    top: 43px;
}

.personal-set img[class*='default']{
    filter: invert(23%) sepia(3%) saturate(3371%) hue-rotate(202deg) brightness(93%) contrast(87%);
}

.pwchange-blocker{
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    width: 125%;
    height: 125%;
    background: rgba(0, 0, 0, 0.4);

    display: none;

    transform: scale(0.8);
    transform-origin: 0 0;
    
}

.pwchange-modal{
    width: 550px;
    font-size: 1.2em; 

    position: fixed;
    left: calc(50% - 250px);
    top: calc(50% - 270px)
}

.pwchange-modal .content{
    padding: 30px 40px;
}

.pwchange-modal .btns{
    padding: 10px;
}

.pwchange-modal h5{
    font-size: 1.3rem;
    margin-bottom: 7px;
}

.pwchange-modal h4{
    font-size: 1.4rem;
    font-weight: 600;
    
}

.pwchange-modal p{
    font-weight: 500;
    
}

.pwchange-modal input{
    width: 100%;
    padding: 15px 18px;
    font-weight: 500;

    border: none;
    /* background-color: #efefef; */
}

.pwchange-modal button{
    border: none;
    font-weight: 500;
    width: 100px;
    padding: 7px;
}

.pwchange-modal .content > div{
    width: 100%;
    margin-bottom: 20px;

    position: relative;
}

.pw-switch{
    position: absolute;
    
    top: 45px;
    right: 15px;
    
    font-size: 1.5em;
}

.pw-switch:hover{
    cursor: pointer;
}