body{
  background-image:url("../images/sp/bg_01.jpg");
  background-repeat: repeat-y;
  background-size:320px 150px;
  max-width:320px;
  margin:0;
  padding:0;
  }

.main-area{
  max-width:320px;
  position: relative;
}

.header{
  height:27px;
  background-color: #ffffff;
  padding-top: 9px;
  padding-bottom: -9px;
  border-bottom:1px solid #ccc;
}

 .header_logo{
   margin-left:10px;
   z-index:2;
 }

 .header-area{
   background-image: url("../images/sp/result/bg_02.png");
   background-size:100% 100%;
   background-position: center;
   background-repeat:no-repeat;
   top:0px;
   width: 320px;
   height:390px;
   margin:auto;
   position:relative;
   z-index:1;
 }

 .header-img{
   background-image: url("../images/common_result/img_title_02.png");
   background-size:240px 27px;
   background-position: center;
   background-repeat:no-repeat;
   width:240px;
   height:27px;
   margin:0 auto 10px;
   top:12px;
   position:relative;
   z-index:1
 }

 .book{
   background-image: url("../images/common_result/bg_result_01.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   width:550px;
   height:272px;
   margin-left: -240px;
   top:12px;
   position: relative;
   z-index: 2;
 }

 .character{
   background-size:255px 255px;
   background-position: center;
   background-repeat:no-repeat;
   width:255px;
   height:255px;
   margin-left:280px;
   position:relative;
   top:5px;
   z-index:3;
 }

#chara_a{
    background-image: url("../images/common_result/img_chara/img_chara_a.png");
}

#chara_b{
    background-image: url("../images/common_result/img_chara/img_chara_b.png");
}

#chara_c{
    background-image: url("../images/common_result/img_chara/img_chara_c.png");
}

#chara_d{
    background-image: url("../images/common_result/img_chara/img_chara_d.png");
}

#chara_e{
    background-image: url("../images/common_result/img_chara/img_chara_e.png");
}

#chara_f{
    background-image: url("../images/common_result/img_chara/img_chara_f.png");
}

#chara_g{
    background-image: url("../images/common_result/img_chara/img_chara_g.png");
}

#chara_h{
    background-image: url("../images/common_result/img_chara/img_chara_h.png");
}

#chara_i{
    background-image: url("../images/common_result/img_chara/img_chara_i.png");
}

#chara_j{
    background-image: url("../images/common_result/img_chara/img_chara_j.png");
}

#chara_k{
    background-image: url("../images/common_result/img_chara/img_chara_k.png");
}

#chara_l{
    background-image: url("../images/common_result/img_chara/img_chara_l.png");
}

#chara_m{
    background-image: url("../images/common_result/img_chara/img_chara_m.png");
}

#chara_n{
    background-image: url("../images/common_result/img_chara/img_chara_n.png");
}

#chara_o{
    background-image: url("../images/common_result/img_chara/img_chara_o.png");
}

#chara_p{
    background-image: url("../images/common_result/img_chara/img_chara_p.png");
}


.chara-name{
   background-size:255px 66px;
   background-position: right;
   background-repeat:no-repeat;
   width:255px;
   height:66px;
   margin-left: 270px;
   top:12px;
   position:relative;
   z-index: 3;
   margin-top:5px;
  }

#type_a{
    background-image: url("../images/common_result/txt_name/txt_name_a.png");
}

#type_b{
    background-image: url("../images/common_result/txt_name/txt_name_b.png");
}

#type_c{
    background-image: url("../images/common_result/txt_name/txt_name_c.png");
}

#type_d{
    background-image: url("../images/common_result/txt_name/txt_name_d.png");
}

#type_e{
    background-image: url("../images/common_result/txt_name/txt_name_e.png");
}

#type_f{
    background-image: url("../images/common_result/txt_name/txt_name_f.png");
}

#type_g{
    background-image: url("../images/common_result/txt_name/txt_name_g.png");
}

#type_h{
    background-image: url("../images/common_result/txt_name/txt_name_h.png");
}

#type_i{
    background-image: url("../images/common_result/txt_name/txt_name_i.png");
}

#type_j{
    background-image: url("../images/common_result/txt_name/txt_name_j.png");
}

#type_k{
    background-image: url("../images/common_result/txt_name/txt_name_k.png");
}

#type_l{
    background-image: url("../images/common_result/txt_name/txt_name_l.png");
}

#type_m{
    background-image: url("../images/common_result/txt_name/txt_name_m.png");
}

#type_n{
    background-image: url("../images/common_result/txt_name/txt_name_n.png");
}

#type_o{
    background-image: url("../images/common_result/txt_name/txt_name_o.png");
}

#type_p{
    background-image: url("../images/common_result/txt_name/txt_name_p.png");
}

  .comment-text{
    font-size: 14px;
    font-style: normal;
    font-family: "ＭＳ ゴシック",sans-serif;
    color:#50290c;
    width:280px;
    margin:20px auto 20px;
  }

  .advice{
     background-image: url("../images/sp/result/bg_result_02.png");
     background-size:310px 128px;
     background-position: center;
     background-repeat:no-repeat;
     width:310px;
     height:128px;
     margin:auto;
     position:relative;
     z-index: 1;
    }

 .advice-text{
   font-size:12px;
   font-style: normal;
   font-family: "ＭＳ ゴシック",sans-serif;
   color:#50290c;
   width:280px;
   height:100px;
   position:relative;
   margin:auto;
   top:40px;
   z-index:2;
 }

 .tweet-btn{
   background-image: url("../images/sp/result/btn_result_01_off.png");
   background-position: center;
   background-repeat:no-repeat;
   background-size:272.5px 48.5px;
   width:272.5px;
   height:48.5px;
   margin :20px auto 15px;
   position:relative;
   z-index:1;
 }

 .tweet-btn:hover{
   background-image: url("../images/sp/result/btn_result_01_on.png");
   z-index:1;
}

.again-btn{
  width:122px;
  height:22px;
  margin :auto;
  position:relative;
  z-index:1;
}

 .result-copy{
   background-image: url("../images/sp/result/txt_result_01.png");
   background-repeat:no-repeat;
   background-position: center;
   background-size:125px 15px;
   width:125px;
   height:15px;
   margin:20px auto 5px 15px;
   position:relative;
   z-index:1;
 }

 .result-text{
   background-color: #FFFFFF;
   font-style: normal;
   font-family: "ＭＳ ゴシック",sans-serif;
   width:280px;
   font-size:10px;
   color:#50290c;
   padding: 10px;
   margin:auto;
   /*box-shadow*/
   box-shadow:0px 0px 10px -4px #000000 inset;
   -moz-box-shadow:0px 0px 10px -4px #000000 inset;
   -webkit-box-shadow:0px 0px 10px -4px #000000 inset;

   /*border-radius*/
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;

   /*border*/
   border:2px solid #4d260a;
   user-select:text;
   -webkit-user-select:text;
   -ms-user-select:element;
   -moz-user-select:element;
   -o-user-select:element;
 }

 .top-btn{
   width:181px;
   height:36px;
   margin :20px auto 20px;
   position:relative;
   z-index:1;
 }

 .site-btn{
   width:250px;
   height:55px;
   margin :auto auto 35px;
   position:relative;
   z-index: 1;
 }

 .icons{
    max-width:320px;
    width:35px;
    height:35px;
    margin:0 auto 10px auto;
    z-index:1;
 }

 .footer_color{
   background-color: rgba(255,255,255,0.6);
   margin:auto;
   padding-top: 26px;
   height:75px;
   z-index:1;
 }

 .footer_image{
   width:166px;
   height:23px;
   margin:auto;
   position:relative;
   z-index: 2;
 }

 .footer_font{
   font-family: "ＭＳ ゴシック",sans-serif;
   font-size: 10px;
   color:#000000;
   margin-left:125px;
   z-index:2;
 }