@charset "UTF-8";

/*-------------------------------------------------------------------------
  Clearfix
/*-----------------------------------------------------------------------*/
#jp-avatar-gacha section,
#jp-avatar-gacha article,
#jp-avatar-gacha figure,
#jp-avatar-gacha nav,
#jp-avatar-gacha aside,
#jp-avatar-gacha header,
#jp-avatar-gacha footer,
#jp-avatar-gacha div,
#jp-avatar-gacha ul,
#jp-avatar-gacha dl {
  zoom: 1;
}

#jp-avatar-gacha section:after,
#jp-avatar-gacha article:after,
#jp-avatar-gacha figure:after,
#jp-avatar-gacha nav:after,
#jp-avatar-gacha aside:after,
#jp-avatar-gacha header:after,
#jp-avatar-gacha footer:after,
#jp-avatar-gacha div:after,
#jp-avatar-gacha ul:after,
#jp-avatar-gacha dl:after,
#jp-avatar-gacha form:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

/*-	common
-----------------------------------------------------------------------*/
#jp-cmp-wrap {
  background: url('/web/src/s/avatar/common/img/bg_mypage.png') !important;
}

/*- jp-avatar-header
-----------------------------------------------------------------------*/
#jp-avatar-header {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

  #jp-avatar-header h1 {
    color: #ffffff;
    font-size: 0px;
    line-height:0;
    font-weight: normal;
    background: #d70e18;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  #jp-avatar-header nav {
    padding: 0;
    margin-bottom: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    height:74px;
    overflow:hidden;
  }
    #jp-avatar-header nav ul::after {
      content:'';
      display:block;
      clear:both;
    }

      #jp-avatar-header nav ul li {
        display:table;
        width:128px;
        float:left;
      }

        #jp-avatar-header nav ul li a {
          display:table-cell;
          color: #ffffff;
          padding-top: 10px;
          padding-bottom: 15px;
        }
        #jp-avatar-header nav ul li:last-child a{
          border-radius:0 10px 10px 0;
        }
        #jp-avatar-header nav ul li a:hover {
          color: #d70e18;
          filter: alpha(opacity=100);
          -moz-opacity: 1;
          opacity: 1;
          background-color:#ffffff;
        }
          #jp-avatar-header nav ul li a > .jp-avatar-header-icon{
            display:block;
            width:30px;
            height:30px;
            background-image:url('/web/src/s/avatar/common/img/avatar-navi-icon-pc.png');
            background-repeat:no-repeat;
            margin:0 auto 3px;
            overflow:hidden;
          }
          #jp-avatar-header nav ul li.jp-avatar-header-index  a > .jp-avatar-header-icon{ background-position:  0px 0px; }
          #jp-avatar-header nav ul li.jp-avatar-header-shop   a > .jp-avatar-header-icon{ background-position:-30px 0px; }
          #jp-avatar-header nav ul li.jp-avatar-header-gacha  a > .jp-avatar-header-icon{ background-position:-60px 0px; }
          #jp-avatar-header nav ul li.jp-avatar-header-closet a > .jp-avatar-header-icon{ background-position:-90px 0px; }
          #jp-avatar-header nav ul li.jp-avatar-header-index  a:hover > .jp-avatar-header-icon{ background-position:  0px -30px; }
          #jp-avatar-header nav ul li.jp-avatar-header-shop   a:hover > .jp-avatar-header-icon{ background-position:-30px -30px; }
          #jp-avatar-header nav ul li.jp-avatar-header-gacha  a:hover > .jp-avatar-header-icon{ background-position:-60px -30px; }
          #jp-avatar-header nav ul li.jp-avatar-header-closet a:hover > .jp-avatar-header-icon{ background-position:-90px -30px; }
          #jp-avatar-header nav ul li a > .jp-avatar-header-text{
            display:block;
            text-align:center;
          }
          #jp-avatar-header nav ul li a > .jp-avatar-header-text::before{
            content:'';
            display:inline-block;
            border-left:8px solid #ffffff;
            border-top:4px solid transparent;
            border-bottom:4px solid transparent;
            margin-right:2px;
          }
          #jp-avatar-header nav ul li a:hover > .jp-avatar-header-text::before{
            border-left:8px solid #d70e18;
          }
          #jp-avatar-header nav ul li a > .jp-avatar-header-text > br{
            display:none;
          }




@media screen and (max-width: 767px) {


/*- jp-avatar-gacha-main
-----------------------------------------------------------------------*/
#jp-avatar-header {
  position: relative;
  margin-top:10px;
  margin-bottom: 10px;
}

  #jp-avatar-header h1 {
    padding: 8px;
    font-size: 0px;
    margin-bottom: 0px;
    border-radius: 0;
  }
    #jp-avatar-header h1 img{
      width:155px;
      height:auto;
      vertical-align:middle;
    }
  #jp-avatar-header nav {
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    position: relative;
    height:auto;
    -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:1px 1px 1px rgba(0,0,0,0.2);
  }
    #jp-avatar-header nav ul {
      background: #d70e18;
      top: 0px;
      right: 0px;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
    }
      #jp-avatar-header nav ul li {
        position: relative;
        display:table;
        float: left;
        text-align: center;
        width: 25%;
        background-color: #d70e18;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
      }
      #jp-avatar-header nav ul li + li{
        border-left: 1px solid #ffffff;
      }
        #jp-avatar-header nav ul li a {
          font-size: 10px;
          display:table-cell;
          width: 100%;
          padding:0 29px 0 9px;
          height:30px;
          vertical-align: middle;
        }
          #jp-avatar-header nav ul li a > .jp-avatar-header-icon,
          #jp-avatar-header nav ul li a > .jp-avatar-header-text::before{
            display:none;
          }
        #jp-avatar-header nav ul li a::before{
          border-bottom: 4px solid transparent;
          border-left: 5px solid #ffffff;
          border-top: 4px solid transparent;
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          left: 2px;
          margin-top: -4px;
        }
        #jp-avatar-header nav ul li a:hover::before{
          border-left: 5px solid #d70e18;
        }
        #jp-avatar-header nav ul li a::after{
          content:'';
          background-image:url('/web/src/s/avatar/common/img/avatar-navi-icon-sp.png');
          background-size:120px 60px;
          display:block;
          height:30px;
          width:30px;
          position:absolute;
          top:0;
          right:0;
        }
        #jp-avatar-header nav ul li.jp-avatar-header-index  a::after{ background-position:  0   0; }
        #jp-avatar-header nav ul li.jp-avatar-header-shop   a::after{ background-position:-30px 0; }
        #jp-avatar-header nav ul li.jp-avatar-header-gacha  a::after{ background-position:-60px 0; }
        #jp-avatar-header nav ul li.jp-avatar-header-closet a::after{ background-position:-90px 0; }
        #jp-avatar-header nav ul li.jp-avatar-header-index  a:hover::after{ background-position:  0   -30px; }
        #jp-avatar-header nav ul li.jp-avatar-header-shop   a:hover::after{ background-position:-30px -30px; }
        #jp-avatar-header nav ul li.jp-avatar-header-gacha  a:hover::after{ background-position:-60px -30px; }
        #jp-avatar-header nav ul li.jp-avatar-header-closet a:hover::after{ background-position:-90px -30px; }
        #jp-avatar-header nav ul li:last-child a {
          border-radius: 0;
        }
        #jp-avatar-header nav ul li a:hover {
          color: #d70e18;
          background: #fff;
          filter: alpha(opacity=100);
          -moz-opacity: 1;
          opacity: 1;
        }
            #jp-avatar-header nav ul li a .jp-avatar-header-text{
              line-height: 1.2;
              text-align: left;
            }
              #jp-avatar-header nav ul li a .jp-avatar-header-text > br {
                display: block;
              }
}