@charset "utf-8";
/* CSS Document */


/* screenwidth less than 800px
--------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {

footer .left{
    display:block;
}

footer nav{
    width:90%;
    margin:0 auto;
    display:block;
}
footer nav ul{
    width:99%;
    margin:0 auto;
}
}



/* screenwidth less than 729px
--------------------------------------------------------------------- */
@media only screen and (max-width: 729px) {




header#main h1{
    margin-left:65px;
    padding-top:15px;
}

header#main h2{
    padding-top:10px;
}

footer .left{
    margin:0 auto;
}
footer nav{
    display:none;
}
footer #copyright{
    text-align:center;
}

}


/* screenwidth less than 500px
--------------------------------------------------------------------- */
@media only screen and (max-width: 500px) {

.chara{

    width:100px;
}


}




/* screenwidth less than 479px
--------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

header#main{
   border:0 !important;
}

header#main h1{
    float:none;
    margin:0 auto 23px auto;
    font-size: 25px;
   margin: 0 auto;
    padding-top:15px;
    line-height: 1.1em;
   background:#DDDDDD;
   height: 50px;
}
header#main h1.top_title{
   background:#FFFFFF;
}
header#main h2{
    float:none;
    margin:0 auto 10px auto;
    border-bottom:1px solid #666;
    padding-bottom:3px;
    padding-top: 8px;
    font-size: 17px;
}


header#main h2 img {
    width: 30px;
}

}

/* screenwidth less than 308px
--------------------------------------------------------------------- */
@media only screen and (max-width: 308px) {

header#main{
   border:0 !important;
}
header#main h1{
    text-align: left;
    margin: 0 auto 0 65px;
    padding-top:15px;
    line-height: 1.1em;
}
header#main h2{
    text-align: left;
    margin: 0 auto 0 60px;
    padding-top: 8px;
    font-size: 17px;
    padding-left:5px;
}
header#main h2 img {
    width: 30px;
}
}



/* screenwidth less than 253px
--------------------------------------------------------------------- */
@media only screen and (max-width: 253px) {

header#main h2 {
       font-size: 16px;
    padding-top: 15px;
}
}


/* screenwidth less than 244px
--------------------------------------------------------------------- */
@media only screen and (max-width: 244px) {
header#main h2 {
       font-size: 14px;
    padding-top: 15px;

}
header#main h2 img {
    width: 20px;
    margin:0;
}



}