@charset "UTF-8";
body {
  background: #fff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 2.4vw;
}

section {
  position: relative;
}

a {
  width: 100%;
  height: 100%;
  display: block;
}

/*------------------------------
  module
------------------------------*/
.textL {text-align: left;}
.textC {text-align: center;}
.textR {text-align: right;}
.back_bg{
	display: none;
	background: rgba(51,51,51,0.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

/* -----------------------------
  clearFix
------------------------------*/
.clearFix:after {
content: "";
display: block;
clear: both;
}
.clearFix {
zoom: 1;
}
.clear {
clear: both;
}

/* -----------------------------
  layout
------------------------------*/
.full{
width: 100%;
}
body{
min-width: 100%;
width: 100%;
box-sizing: border-box;
}
.body_inner.bg1{
    background-image:url(../img/bg1.png);
    background-repeat: repeat;
    background-size: 200px auto;
}
.body_inner.bg2{
    background-image:url(../img/bg2.png);
    background-repeat: repeat;
    background-size: 200px auto;
}
.contents{
    text-align: center;
    padding: 3%;
}

/* -----------------------------
  main
------------------------------*/
.character .main{
    background-image: url(../img/bg_note_top.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 0;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
    padding-top: 9%;
    margin: 0 0 8%;
}
.character .main .btn_close{
    display: block;
    background-image: url(../img/btn_close.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 0;
    position: absolute;
    top: -1%;
    right: -3%;
    width: 10vw;
    height:10vw;
}
.character .main .inner{
    background-image: url(../img/bg_note.png);
    background-repeat: repeat-y;
    background-size: 100% auto;
    padding: 4% 3% 4%;
    text-align: center;
    min-height: 180vw;
}
.character .main .profile img{
    width: 100%;
}
.character .main .profile .title{
    margin: 0 0 4%;
}
.character .main .profile .image{
    position: relative;
}
.character .main .profile .image.transform{
    padding: 0 0 9%;
    margin: 0 0 3%;
}
.character .main .profile .image .trans_btn{
    position: absolute;
    bottom: 0;
    margin: 0 0 0 2%;
    width: 100%;
}
.character .main .profile .image .trans_btn li{
    display: inline-block;
    width: 27%;
}
.character .main .profile .image .trans_btn li{
    margin: 0 6% 0 0;
}
.character .main .profile .image .trans_btn li:last-child{
    margin: 0;
}
.character .main .profile .level{
    position: relative;
    margin: -4% 0 0;
}
.character .main .profile .meter{
    background-image: url(../img/meter_title.png);
    background-repeat: no-repeat;
    background-size: 60% auto;
    background-position: 15% 0;
    margin: 0 0 7%;
    padding: 13% 0 0;
    text-align: center;
}
.character .main .profile .meter img{
    width: 100%;
}
.character .main .profile .text{
    margin: 0 0 7%;
}
.character .main .shares .title{
    margin: 0 0 8%;
}
.character .main .shares .title img{
    width: 77%;
}
.character .main .sns-list{
    text-align: center;
    margin: 0 0 6%;
}
.character .main .sns-list li{
    display: inline-block;
    margin-left: 3%;
    width: 10vw;
}
.character .main .sns-list li img{
    width: 100%;
}
.character .frame{
    margin: 0 0 8%;
}
.character .frame .title{
    margin: 0 0 2%;
}
.character .frame .title img{
    width: 56.7%;
}
.character .frame .oneframe img{
    width: 100%;
}
.character .btn_try{
    margin: 0 0 8%;
}
.character .btn_try img{
    width: 100%;
}
.character .btn_back{
    margin: 0 0 7%;
}
.character .btn_back img{
    width: 74%;
}

.inner_copyright{
    font-size: 3.4666666667vw;
    text-align: center;
}
/* -----------------------------
  footer
------------------------------*/
footer {
    background: #000;
    color: #ccc;
    padding: 4vw 0 8vw;
    width: 100vw;
}

footer .banner {
    width: 45.0666666667vw;
    height: 9.0666666667vw;
    margin: 0 auto 1.7333333333vw;
}
footer .banner a {
    background: url(../../img/common/footer_banner.png) no-repeat left top/contain;
    text-indent: -9999px;
}
footer .copyright, footer .text {
    font-size: 1.8vw;
    text-align: center;
    line-height: 1.7em;
}