.contents {
        background-image: url("../images/back.png");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-color: #000000;
    }
    .contents{
        min-width: 100%;
        min-height:100%;
        text-align: center;
        padding-top: 40px;
    }
    
    .main{
        width: 1000px;
        height: 690px;
        margin: 0 auto;
        margin-bottom: 20px;

    }
    .chara-img{
        background-image: url("../images/main.png");
        background-position: center;
        background-repeat: no-repeat;
    }
    .box{
        
        position:relative;

        margin-right: 30px;
        margin-top: 140px;
        float: right;
        width: 390px;
        height: 480px;
        -webkit-box-shadow:5px 5px  10px #000;
        background-color: rgba(0,0,0,0.4);
        border-radius: 10px;        
        -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
        -moz-border-radius: 10px;   /* Firefox用 */  
        color: black;
        padding: 10px;
        text-align:center;

    }

    .main-text{
        margin-top: 60px;
        color: white;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
        font-size: 20px;
    }
    .mini{
        font-size: 14px;
        color:white;
    }
    .mini a{
        color:#8EC8F3;
    }
    .under{
        width:100%;
        text-align:center;
        position: absolute;

        margin: 0 auto;
        bottom: 20px;
    }
    .mob-image{
        display: none;
    }
    .telu img{
        width: 500px;
        max-width: 80%;
    }

.hukidasi {
    position: relative;
}
.hukidasi img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
/*.logo{
    margin: 20px;
    margin-top: 100px;
    
    
}*/
.aisatu{
    margin-top: 100px;
    margin-bottom: 100px;
}
.logo-app{
    width: 400px;
    height: auto;
    background:#fff;
    padding: 10px;
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 60px;
}

    @media screen and (max-width:640px){
    .main{
        max-width: 90%;
        height: auto;
        margin: 0 auto;
        margin-top: 10%;
        margin-bottom: 100px;

    }
    .chara-img{
        background-image: none;
        //background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: contain;
    }
     .mob-image{
        display: block;
        width: 100%;
    }
    
    .box{
        position:relative;
        float: left;
        margin: 0 auto;
margin-bottom: 20px;

        width: 94%;
height: auto;
        -webkit-box-shadow:5px 5px  10px #000;
        background-color: rgba(0,0,0,0.5);
        border-radius: 10px;        
        -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
        -moz-border-radius: 10px;   /* Firefox用 */  
        color: black;
        padding: 10px;
        text-align:center;

    }
    
    .main-text{
        margin-top: 5px;
        color: white;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
        font-size: 12px;
    }
    .mini{
        font-size: 12px;
        color:white;
    }
    .under{
        width:100%;
        text-align:center;
        position: relative;

        margin: 0 auto;
        bottom: 5px;
    }
    }