body{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}


header {
    padding: 1.125rem .8rem .5rem;
}
header > div img {
    margin-bottom: .5rem;
}
header nav {
    background-color: #1950D1;
}
header nav ul{
    display: flex;
    margin-left: 0;
    padding-left: 0;
}
header nav ul li{
    display: inline-block;
    margin: 0;
    padding: .5rem 1.2rem;
    background: transparent linear-gradient(180deg, #1E5AE5 0%, #0C3BA7 100%) 0% 0% no-repeat padding-box;
    border-right: 2px solid #fff;
}
header nav ul li:hover{
    opacity: .8;
    background: transparent linear-gradient(180deg, #4B7EF2 0%, #1E5AE5 100%) 0% 0% no-repeat padding-box;
    cursor: pointer;
}
header nav ul li a{
    display: block;
    color: #fff;
    
}
header nav ul li a:hover{
    color: #fff;    
}

section.main{
    padding: .5rem .8rem;
}

h1{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: .3rem;
    border-bottom: 5px solid #1E50C4;
    margin-bottom: 2rem;
}

h2{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.6;
}



#formChange .form-wrap{
    background: #F9F9F9;
    margin: 0 auto;
    padding: 1rem;
    max-width: 898px;
}
#formChange .form-wrap dl{
    display: flex;
    margin: 0 -.5rem;
}
#formChange .form-wrap dl dt,#formChange .form-wrap dl dd{
    min-height: 8rem;
    margin: 0;
}
#formChange .form-wrap dl dt{
    font-size: 1.125rem;
    font-weight: bold;
    width: 25%;
    padding: 1rem;
    background: #F2F2F2;
}
#formChange .form-wrap dl dd{
    background: #fff;
    width: 75%;
    padding: 1rem;
}
#formChange .form-wrap input#search_name{
    margin-left: 1rem;
    margin-right: 1rem;
    padding: .5rem 1rem;
    min-width: 22rem;
    width: auto;

}
#formChange .form-wrap button{
    min-width: 6rem;
    padding: .6rem 0;
    background: transparent linear-gradient(180deg, #0077DF 0%, #0059BF 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #fff;
    border: none;
}
#formChange .form-wrap input#up{
    margin-left: 1rem;
    margin-right: 1rem;
    padding: .5rem 1rem;
    min-width: 22rem;
    width: auto;

}
#formChange .form-wrap .required-mark,
#formChange .form-wrap #upload-form .required-mark {
    display: block;
    background-color: #fe3e20;
    color: #fff;
    border-radius: 5px;
    font-size: .625rem;
    font-weight: normal;
    width: fit-content;
    padding: 1px 4px;
}

#formChange .form-wrap .btn-privacypolicy{
    background: #fff;
    padding: 1rem;
    margin: 0 -.5rem;
}
#formChange .form-wrap .btn-privacypolicy a {
    display: block;
    /*background: transparent linear-gradient(180deg, #FFF4E9 0%, #FFD7B8 100%) 0% 0% no-repeat padding-box;*/
    border: 1px solid #040843;
    border-radius: 5px;
    margin: 1rem 20px;
    padding: 12px;
    text-align: center;
    color: #1C1C1C;
    font-weight: bold;
    text-decoration: none;
}
#formChange .form-wrap .btn-privacypolicy a:hover {
    opacity: .8;
}

#formChange .form-wrap .area-agree{
    /*background: #fff;*/
    border-radius: 3px;
    margin: 2rem 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#formChange .form-wrap .area-agree.invalid{
    background-color: #FFDCDC;
}
#formChange .form-wrap .area-agree .required-mark{
    display: inline-block;
    vertical-align: .25rem;
}
#formChange .form-wrap .area-agree input{
    margin-left: 2rem;
}
#formChange .form-wrap #requiredmessage{
    background: #FF0000 0% 0% no-repeat padding-box;
    padding: 1rem 2rem;
    color: #fff;
    margin: 3rem auto;
    text-align: center;;
}
#formChange .form-wrap #requiredmessage span.output{
    color: #FCF756;
}
#formChange .form-wrap #requiredmessage .error-text{
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#formChange .form-wrap .submitBox{
    display: flex;
    justify-content: space-evenly;
}
#formChange .form-wrap .submitBox button{
    background: transparent linear-gradient(180deg, #0077DF 0%, #0059BF 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: #fff;
    padding: .8rem 4rem;
    font-size: 1.5rem;
}
#formChange .form-wrap #submitbtn:disabled{
    opacity: .5;

}
#formChange .form-wrap dl{
    margin-bottom: .5rem;
}
#formChange .form-wrap dl dt, #formChange .form-wrap dl dd{
    min-height: auto;
}
#formChange .form-wrap dl dd,
#formChange .form-wrap dl dd .form-control,
#formChange .form-wrap dl dd select{
    font-size: 1.125rem;
}
#formChange .form-wrap dl dd select {
    width: 100%;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}
#formChange .form-wrap > p{
    color: #707070;
    font-size: 1.125rem;
    margin: 1rem 0 0;
}
#formChange .form-wrap .small-text{
    font-size: .75rem;
    color: #4A4A4A;
}

#formChange .form-wrap input[type="text"],#formChange .form-wrap textarea{
    padding: .5rem 1rem;
    width: 100%;
}

#formChange .form-wrap  :valid{
    /*background-color: inherit;*/
}
#formChange .form-wrap  :invalid{
    background-color: #FFE8E8 !important;
    border-width: thin;
}

#formChange .form-wrap dl.offer_method dd > label{
    margin-right: 2rem;
}

#handling{
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid #333;
    background-color: #fff;
}
#handling h4{
    font-size: 1.2rem;
    margin: .5rem 0 1rem;
}

#formChange .form-wrap .form-check {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

#formChange .form-wrap .form-check-input {
    margin-top: 0.3rem;
}

#formChange .form-wrap dl dd .form-check {
    display: inline-block;
    margin-right: 0;
}

@media screen and (min-width: 768px) {
    #formChange .form-wrap dl dd .form-check {
        margin-right: 3rem;  
    }
}

@media screen and (max-width: 767px) {
    #formChange .form-wrap dl dd select {
        max-width: 100%;
        padding-right: 2rem;
    }
}

footer{
    background: #646464;
    color: #fff;
}
footer div{
    max-width: calc(845px + 1.5rem);
    padding: 1.5rem;
    margin: 0 auto;
}

.copyright{
    text-align: right;
    color: #ABABAB;
    font-size: .875rem;
    padding: .3rem;
}



@media only screen and (max-width:767px){
    #formChange .form-wrap dl{
        flex-wrap: wrap;
    }   
    #formChange .form-wrap dl dt{
        margin: 0;
        width: 100%;
        min-height: auto;
    }
    #formChange .form-wrap dl dd{
        margin: 0;   
        width: 100%;
        min-height: auto; 
    }
    #formChange .form-wrap button{
        margin: .5rem 0;
    }

    /*
    #formChange .form-wrap form input{
        min-width: auto;
        width: 100%;
        margin: auto;
    }
        */
    /*
    #formChange .form-wrap form input[type="checkbox"],#formChange .form-wrap form input[type="radio"]{
        width: auto;
    }
        */

    #formChange .form-wrap .area-agree{
        margin: 0;
    }
    #formChange .form-wrap .area-agree input{
       margin-left: 0;
       margin-right: .3rem;
    }
    #formChange .form-wrap .area-agree label{
        display: flex;
        margin-left: 1rem;
        width: 85%;
    }

    #formChange .form-wrap .submitBox{
        flex-wrap: wrap;
    }

    #formChange .form-wrap .form-check {
        margin-bottom: 1.25rem;
    }
}

#formChange .form-wrap input#usage_etc {
    margin-top: 1rem;
}