/*============================================================================
モニター応募
============================================================================*/
@charset "utf-8";

article{
    min-height:100vh;
}

/*----------------------------------------------------------------------------
モニター募集
----------------------------------------------------------------------------*/
article h3{
    text-align:center;
    border:none;
    font-size:32px;
    line-height:24px;
    color:#ffffff;

    background:linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
    background-size:400%;
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    animation: textAnime 15s infinite;
}

@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

article dl.recruitment_monitor{
    width:90%;
    margin:20px auto 20px auto;
    font-size:20px;
    line-height:20px;
    background:#dff6ff;
    border-bottom:solid 1px #000000;
    border-left:solid 1px #000000;
    border-right:solid 1px #000000;
}
article .recruitment_monitor dt{
    clear:left;
    float:left;
    width:30%;
    margin:0;
    padding:5px;
    border-top:solid 1px #000000;
}

article .recruitment_monitor dd{
    margin:0 0 0 30%;
    padding:5px;
    line-height:30px;
    background:#ffffff;
    border-top:solid 1px #000000;
    border-left:solid 1px #000000;
}

article .recruitment_monitor b.big{
    font-size:32px;
    line-height:32px;
    color:#ff0000;
}

article .recruitment_monitor ul{
    list-style:none;
    margin:0;
    padding:0;
}

article .recruitment_monitor li{
    list-style-type:disc;    
    margin-left:30px;
}


article .recruitment_monitor .kojin_joho{
    height:200px;
    overflow-y:scroll;
    line-height:20px;
}
/*----------------------------------------------------------------------------
モニター応募
----------------------------------------------------------------------------*/
article .mailform{
    display:block;
}

article .confirm{
    display:none;
}

article .endForm{
    display:none;
}

article .errorForm{
    display:none;
}

article .mailform dl,article .confirm dl{
    width:90%;
    margin:20px auto 20px auto;
    background:#ffffc7;
    border-bottom:solid 1px #000000;
    border-left:solid 1px #000000;
}

article .confirm dl{
    background:#ffccdd;
}

article .mailform dt,article .confirm dt{
    clear:left;
    float:left;
    width:30%;
    border-top:solid 1px #000000;
    padding:5px;
}

article .mailform dd,article .confirm dd{
    float:left;
    width:70%;
    border-left:solid 1px #000000;
    border-right:solid 1px #000000;
    border-top:solid 1px #000000;
    background:#ffffff;
    padding:5px;
}

article .mailform sup{
    color:#ff0000;
}

article .mailform input[type='text'],
article .mailform select{
    font-size:20px;
    line-height:20px;
    width:90%;
    padding:5px;
    margin:2px 0;
    border:solid 1px #a0a0a0;
    border-radius:4px;
}

article .mailform select{
    position:relative;
    width:auto;
    padding:5px 40px 5px 5px;
}

article .mailform select::after{
    position:absolute;
    content:"■";
    border-top:solid 5px transparent;
    border-bottom:solid 5px transparent;
    border-left:solid 10px #0000ff;
    left:0;
    top:0;
}

article .mailform input.zipcode{
    width:40%;
}

article .mailform input.phone{
    width:46%;
}

article .mailform input.address1,article .mailform input.address2{
    width:80%;
}

article .mailform input.place{
    width:80%;
}

article .mailform input.heibei,
article .mailform input.power,
article .mailform input.id{
    width:30%;
}

/* ファイル選択 */
article .mailform .plan_list.error{
    display:block !important;
    color:#404040 !important;
}

article .mailform .plan_list .item{
    padding:2px;
}

article .mailform .plan_list input[type='file']{
    border-top:solid 1px #a0a0a0;
    border-bottom:solid 1px #a0a0a0;
    border-right:solid 1px #a0a0a0;
    border-radius:5px;
    color:#a0a0a0;
}

article .mailform .plan_list button{
    margin-left:10px;
    font-size:20px;
    font-weight:normal;
    text-decoration:none;
    font-style:normal;
    line-height:20px;
    padding:6px 30px;
    color:#000000;
    background:#ffc5b3;        
    border:solid 1px #a0a0a0;
    border-radius:5px;
}

article .mailform .plan_list button:hover{
    background:#ff5521;      
    color:#ffffff;  
}

@media screen and (max-width:639px){
    article .mailform .plan_list .item{
        padding:0;
        margin-bottom:20px;
    }

    article .mailform .plan_list .item input[type='file']{
        width:100%;
    }
    
    article .mailform .plan_list button{
        margin:5px 0 0 0;
        font-size:20px;
        line-height:20px;
        padding:10px 60px;
    }
}

article .mailform input.error,
article .mailform select.error{
    background:#ffd2d2;
}

article .mailform div.error{
    display:none;
    color:#ff0000;
}

article .mailform .button,article .confirm .button{
    text-align:center;
}

article .button button{
    width:70%;
    margin:0 auto 40px auto;
    padding:20px;
    color:#000000;
    background:#e0e0e0;
    border-radius:40px;
    font-size:24px;
    line-height:24px;
    font-weight:bold;
    text-align:center;
}

article .button button:hover{
    background:#ffe0e0;
}

article .button button.return{
    width:30%;    
}

article .button button.sendmail{
    width:50%;    
}

/*============================================================================
EOF
============================================================================*/