@charset "UTF-8";

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

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

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

/*-  jp-page-avatar-index
-----------------------------------------------------------------------*/
#jp-page-avatar-index {
  margin-top: 20px;
  padding: 0 0 20px;
  width: 1030px;
}


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

#jp-page-avatar-index {
  margin-top: 10px;
  padding: 0 0 20px;
  width: 100%;
}

}


/*- jp-page-avatar-index-main
-----------------------------------------------------------------------*/
#jp-page-avatar-index #jp-page-avatar-index-main {
  position: relative;
  margin-bottom: 20px;
}

  #jp-page-avatar-index #jp-page-avatar-index-main h1 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    background: #d70e18;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  
    #jp-page-avatar-index #jp-page-avatar-index-main h1 span {
      margin-top:10px;
      margin-left: 30px;
      color: #fff;
      font-weight: bold;
      font-size: 24px;
    }

    #jp-page-avatar-index #jp-page-avatar-index-title #jp-page-avatar-index-title-main img:nth-child(1) {
      padding-bottom: 10px;
    }

    #jp-page-avatar-index #jp-page-avatar-index-title #jp-page-avatar-index-title-main .jp-page-avatar-index-title-main-result {
      padding-left: 30px;
    }
      
  #jp-page-avatar-index #jp-page-avatar-index-main nav {
    padding: 0;
    margin-bottom: 0;
  }
  
    #jp-page-avatar-index #jp-page-avatar-index-main nav ul {
      position: absolute;
      top: 0px;
      right: 0px;
    }

      #jp-page-avatar-index #jp-page-avatar-index-main nav ul li {
        display: inline;
        float: left;
        text-align: center;
      }

        #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a {
          display: block;
          color: #fff;
          line-height: 2.0;
          height: 36px;
          width: 128px;
          padding-top: 40px;
        }
        
        #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a {
          background: url(/web/src/s/joy/avatar/img/common/nav/index_off.png) no-repeat center 10px;
        }
        
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a:hover {
            background: #fff url(/web/src/s/joy/avatar/img/common/nav/index_on.png) no-repeat center 10px;
          }        

        #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a {
          background: url(/web/src/s/joy/avatar/img/common/nav/shop_off.png) no-repeat center 10px;
        }
        
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a:hover {
            background: #fff url(/web/src/s/joy/avatar/img/common/nav/shop_on.png) no-repeat center 10px;
          } 

        #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha a {
          background: url(/web/src/s/joy/avatar/img/common/nav/gacha_off.png) no-repeat center 10px;
        }
        
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha a:hover {
            background: #fff url(/web/src/s/joy/avatar/img/common/nav/gacha_on.png) no-repeat center 10px;
          }        

        #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a {
          background: url(/web/src/s/joy/avatar/img/common/nav/closet_off.png) no-repeat center 10px;
        }
        
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a:hover {
            background: #fff url(/web/src/s/joy/avatar/img/common/nav/closet_on.png) no-repeat center 10px;
          } 
                
  
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li:last-child a {
            border-radius: 0 10px 10px 0;
          }

          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a:hover {
            color: #d70e18;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
          }
          
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a.jp-page-avatar-index-main-active {
            background: #fff url(/web/src/s/joy/avatar/img/common/nav/shop_on.png) no-repeat center 10px;
            color: #d70e18;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
          }

          #jp-page-avatar-index #jp-page-avatar-index-main nav ul a br {
            display: none;
          }

@media screen and (max-width: 767px) {
  
  #jp-page-avatar-index #jp-page-avatar-index-main {
    position: relative;
    margin-bottom: 10px;
  }

  #jp-page-avatar-index #jp-page-avatar-index-main h1 {
    padding: 8px;
    font-size: 16px;
    margin-bottom: 0px;
    border-radius: 0;
  }
    #jp-page-avatar-index #jp-page-avatar-index-main h1 img{
      width:155px;
      height:auto;
      vertical-align:middle;
    }
    #jp-page-avatar-index #jp-page-avatar-index-main nav {
      width: 100%;
      padding: 0;
      margin: 0 0 10px;
    }
      #jp-page-avatar-index #jp-page-avatar-index-main nav ul {
        background: #d70e18;
        position: relative;
        top: 0px;
        right: 0px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
      }
        #jp-page-avatar-index #jp-page-avatar-index-main 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-page-avatar-index #jp-page-avatar-index-main nav ul li + li{
          border-left: 1px solid #ffffff;
        }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a {
            font-size: 10px;
            display: table-cell;
            width: 100%;
            height: 30px;
            padding:0 29px 0 9px;
            line-height: 1.2;
            text-align: left;
            vertical-align: middle;
            background-image:none;
            position:relative;
          }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha  a,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a:hover,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a:hover,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha  a:hover,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a:hover {
            background-image:none;
          }
          #jp-page-avatar-index #jp-page-avatar-index-main 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-page-avatar-index #jp-page-avatar-index-main nav ul li a:hover::before{
            border-left: 5px solid #d70e18;
          }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a::after{
            content:'';
            background-image:url('../img/common/nav/avatar-navi-icon.png');
            background-size:120px 60px;
            display:block;
            height:30px;
            width:30px;
            position:absolute;
            top:0;
            right:0;
          }

          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a::after { background-position:  0   0; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a::after  { background-position:-30px 0; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha  a::after{ background-position:-60px 0; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a::after{ background-position:-90px 0; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-index a:hover::after { background-position:  0   -30px; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-shop a:hover::after  { background-position:-30px -30px; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-gacha a:hover::after { background-position:-60px -30px; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li.jp-page-avatar-index-nav-closet a:hover::after{ background-position:-90px -30px; }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li:last-child a {
            border-radius: 0px;
          }
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a.jp-page-avatar-index-main-active,
          #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a:hover {
            color: #d70e18;
            background: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
          }
            #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a span {
              display:none;
            }
            #jp-page-avatar-index #jp-page-avatar-index-main nav ul li a br {
              display: block;
            }
}


/*- jp-page-avatar-index-content
-----------------------------------------------------------------------*/
#jp-page-avatar-index-content {
  padding: 20px;
  /*background: #fff url(/web/src/s/joy/avatar/img/main/bg_bottom.jpg) no-repeat center bottom;*/
}

  #jp-page-avatar-index-content-title {
/*    position:relative;
    padding: 10px;
    width: 25%;
*/
/*    
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px; 
*/
    /*background-color: #00D0FF;*/
    /*ホワイトデー*/
    /*background: repeating-linear-gradient( to top, rgba(168,220,231,0.6), rgba(168,220,231,0.6) 10px, rgba(168,220,231,0.5) 10px, rgba(168,220,231,0.5) 20px);*/
    /*バレンタイン
    background: repeating-linear-gradient( to right, rgba(255,121,147,0.6), rgba(255,121,147,0.6) 10px, rgba(255,121,147,0.5) 10px, rgba(255,121,147,0.5) 20px);*/
    /*無料ガチャ*/
    background: repeating-linear-gradient( to right, rgba(124,219,213,0.5), rgba(124,219,213,0.5) 10px, rgba(124,219,213,0.4) 10px, rgba(124,219,213,0.4) 20px)
    
  }
/*
    #jp-page-avatar-index-content-title h2 { text-align: center }
    #jp-page-avatar-index-content-title .jp-cmp-sub-login-detail-btn a {
      margin: 0 auto;
      display: block;
      font-size: 20px;
      padding: 2% 0px;
      width: 60%;
      background-image: none;
*/
      /*ホワイトデー*/
 /*
      background: #ffc600;
 */
      /*バレンタイン
      background: #fe2193;
    }
*/

/*
    p.jp-cmp-sub-login-detail-btn + p{margin-top:1rem;text-align:center}
    p.jp-cmp-sub-login-detail-btn + p small{font-weight:bold}
*/

    @media screen and (max-width: 767px){
      #jp-page-avatar-index-content-title {
        /*padding: 2% 3% 4%*/
      }
      #jp-page-avatar-index-content-title .jp-cmp-sub-login-detail-btn a {
        font-size: 16px;
        padding: 6% 0px 5% 6%;
        width: 100%
      }
    }

    #jp-page-avatar-index-content-main-title {
      background-color: #E7E7E7;
      padding: 20px;
    }

    #jp-page-avatar-index-content-main-title-lead {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 10px; 
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
    }

    p.jp-page-avatar-index-content-main-title{
      font-size: 23px;
      font-weight: bold;
      border-bottom:solid 1px #000000;
      text-align: center;
    }

    p.jp-page-avatar-index-content-main-text{
      padding: 10px;
      font-size: 15px;
    }


    #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-lead {
      /*position: absolute;
      top: 300px;
      left: 287px;
      padding: 0% 15% 6% 0;
      background: url(/web/src/s/joy/avatar/img/main/main_avatar.png) no-repeat left 100% top;*/
      font-weight:bold;
      /*text-indent: -5px;*/
      font-size: 22px;
      color: #ffffff;
      /*width: 52%;
      background-position: 95%;
      background-size: contain;*/
      text-align: center;
      padding: 2% 0;
    }
    
      #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-lead span {
        font-size: 120%;
        /*color: #e60012;*/
        font-weight:bold;
      }

#jp-page-avatar-index-content-list {
  padding: 0 20px 70px;
}

  #jp-page-avatar-index-content-list h2 {
    text-align: center;
    font-weight: bold;
    /* text-indent: -5px; */
    font-size: 22px;
    padding-bottom: 2%;
  }

  #jp-page-avatar-index-content-list ul {
    margin-left: -30px;
  }
    
    #jp-page-avatar-index-content-list ul li {
      float: left;
      width: 310px;
      height: 448px;
      margin-left: 30px;
      margin-bottom: 30px;
    }

      #jp-page-avatar-index-content-list ul li a {
        display: block;
        margin: 116% 7% 7%;
        padding: 6% 0px 5% 6%;
        border: 2px solid #fff;
        border-radius: 5px;
        background: url(/web/src/s/joy/avatar/img/index/arrow_02.png) no-repeat 20% 47%;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }

      #jp-page-avatar-index-content-list ul li:first-child {
        background: url(/web/src/s/avatar/shop/feature/img/img_collabo.png) no-repeat;
        background-size: contain;
      }

        #jp-page-avatar-index-content-list ul li:first-child a {
          background-color: #ff9000;
        }

      #jp-page-avatar-index-content-list ul li:nth-child(2) {
        background: url(/web/src/s/avatar/shop/feature/img/img_collection.png) no-repeat;
        background-size: contain;
      }

        #jp-page-avatar-index-content-list ul li:nth-child(2) a {
          background-color: #59b310;
        }

      #jp-page-avatar-index-content-list ul li:nth-child(3) {
        background: url(/web/src/s/avatar/shop/feature/img/img_shop.png) no-repeat;
        background-size: contain;
      }

        #jp-page-avatar-index-content-list ul li:nth-child(3) a {
          background-color: #54b8ec;
        }

      #jp-page-avatar-index-content-list ul li:nth-child(4) {
        /*margin-left: 200px;*/
        background: url(/web/src/s/avatar/shop/feature/img/img_gacha.png) no-repeat;
        background-size: contain;
      }

        #jp-page-avatar-index-content-list ul li:nth-child(4) a {
          margin: 103% 7% 7%;
          background-color: #f05782;
        }

      #jp-page-avatar-index-content-list ul li:nth-child(5) {
        margin-left: 30px;
        background: url(/web/src/s/avatar/shop/feature/img/img_contest.png) no-repeat center top;
        background-size: contain;
      }
        #jp-page-avatar-index-content-list ul li:nth-child(5) p {
          margin-top: 85%;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
        }
        #jp-page-avatar-index-content-list ul li:nth-child(5) p:nth-child(2) {
            margin-top: 10%;
            padding: 0px 7%;
        }
        #jp-page-avatar-index-content-list ul li:nth-child(5) a {
            margin: 0.5% 7% 7%;
            background-color: #9FA0A0
        }
        #jp-page-avatar-index-content-list ul li:nth-child(5) p span.jp-page-avatar-index-content-list-redtxt {
            color: #e60012;
            font-size: 20px;
            font-weight: bold;
        }


      #jp-page-avatar-index-content-list ul li:nth-child(6) {
        margin-left: 30px;
        background: url(/web/src/s/avatar/shop/feature/img/img_utasuki.png) no-repeat center top;
        background-size: contain;
      }

        #jp-page-avatar-index-content-list ul li:nth-child(6) a {
          margin: 7% 7% 7%;
          border: none;
          background: url(/web/src/s/joy/avatar/img/index/login.png) no-repeat 10% 47% #ff9a00;
          display: inline-block;
          width: 100%;
          height: 100%;
          margin: 0px;
          padding: 14px 10px 12px 30px;
          -ms-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -ms-border-radius: 3px/3px 3px 3px 3px;
          -moz-border-radius: 3px/3px 3px 3px 3px;
          -webkit-border-radius: 3px/3px 3px 3px 3px;
          border-radius: 3px/3px 3px 3px 3px;
          color: #fff;
          font-size: 15px;
          font-weight: bold;
          text-align: center;
        }

        #jp-page-avatar-index-content-list ul li:nth-child(6) p {
          margin-top: 55%;
          text-align: center;
        }

        #jp-page-avatar-index-content-list ul li:nth-child(6) p:nth-child(2) {
          margin-top: 17%;
          padding: 0px 7%
        }
        
          #jp-page-avatar-index-content-list ul li:nth-child(6) p span.jp-page-avatar-index-content-list-btxt {
            font-size: 16px;
            font-weight: bold;
          }

          #jp-page-avatar-index-content-list ul li:nth-child(6) p span.jp-page-avatar-index-content-list-redtxt {
            color: #e60012;
            font-size: 20px;
            font-weight: bold;
          }

          #jp-page-avatar-index-content-list ul li:nth-child(6) p span.jp-page-avatar-index-content-list-rubytxt {
            color: #e60012;
            font-size: 50%;
            vertical-align: top;
          }

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

#jp-page-avatar-index-content-title {
  /*margin-bottom: 30px;*/
  width: 96%;
  color: #FFFFFF;
}
  
  #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-ttllead {
    position: absolute;
    top: 16%;
    left: 27%;
    margin-right: 3%;
  }
  
    #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-ttllead img {
      width: 100%;
    }
  
  #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-lead {
    position: relative;
    /* top: 3%;
    left: 3%;
    padding: 2% 0; */
    font-weight: bold;
    text-indent: 0;
    font-size: 14px;
    color: #555;
    /* width: 78%;
    background-position: 99%;
    background-size: contain; */
  }

  #jp-page-avatar-index-content-title .jp-cmp-sub-login-detail-btn {
    margin: 0 20px
  }

    #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-lead img {
      width: 40%;
      height: auto;
    }
    
    #jp-page-avatar-index-content-title .jp-page-avatar-index-content-title-lead span {
      font-size: 100%;
      /*color: #000000;*/
      font-weight:bold;
    }

#jp-page-avatar-index-content {
  padding: 0px;
  /*background: #fff url(/web/src/s/joy/avatar/img/main/bg_bottom.jpg) no-repeat center bottom;
  background-size: 100% auto;*/
}

  #jp-page-avatar-index-content img {
    /*width: 100%;*/
    height: auto;
  }
  
  #jp-page-avatar-index-content-list {
    width: 94%;
    margin: 0 3%;
    padding: 0
  }



    #jp-page-avatar-index-content-list ul {
      margin-left: 0;
      margin-bottom: 44%;
      display: inline;
      float: none;
    }
    
      #jp-page-avatar-index-content-list ul li {
        float: none;
        position: relative;
        width: 280px;
        margin: 0px auto 0%;
      }
      
        #jp-page-avatar-index-content-list ul li a {
          position: absolute;
          bottom: 40px;
          width: 80%;
          margin-top: 0%;
          background-position: 12% 47%;
          background-size: 5%;
          font-size: 16px;
        }
        
        #jp-page-avatar-index-content-list ul li:nth-child(4) {
          height: 400px;
          margin-left: auto;
        }
        
          #jp-page-avatar-index-content-list ul li:nth-child(4) a {
            margin-top: 0%;
            bottom: 30px;
          }

        #jp-page-avatar-index-content-list ul li:nth-child(5) {
          height: 400px;
          margin-left: auto;
        }
          #jp-page-avatar-index-content-list ul li:nth-child(5) p {
              position: absolute;
              top: 240px;
              margin: 0% 5% 0%;
              font-size: 14px;
          }
          #jp-page-avatar-index-content-list ul li:nth-child(5) p span.jp-page-avatar-index-content-list-redtxt {
            font-size: 18px;
          }
          #jp-page-avatar-index-content-list ul li:nth-child(5) a {
            margin-top: 0%;
            bottom: 30px;
          }



        #jp-page-avatar-index-content-list ul li:nth-child(6) {
          margin-left: auto;
          border-radius: 5px;
        }
  
          #jp-page-avatar-index-content-list ul li:nth-child(6) a {
            position: static;
            width: 240px;
            margin: 0% auto 7%;
            background-size: 10%;
            font-size: 14px;
          }
  
          #jp-page-avatar-index-content-list ul li:nth-child(6) p {
            position: absolute;
            top: 145px;
            margin: 0% 5% 0%
          }

          #jp-page-avatar-index-content-list ul li:nth-child(6) p:nth-child(2) {
            top: 280px;
            margin: 0% 7%;
            padding: 0px;
          }
          
          #jp-page-avatar-index-content-list ul li:nth-child(6) p span.jp-page-avatar-index-content-list-btxt {
            font-size: 14px;
          }

          #jp-page-avatar-index-content-list ul li:nth-child(6) p span.jp-page-avatar-index-content-list-redtxt {
            font-size: 18px;
          }
          .usk-btn-1parts{
            width:95%;
            display: block;
            margin: auto;
            box-sizing:border-box;
            text-align:center !important;
          }
}
  
/*jp-page-avatar-content-overview
-----------------------------------------------------------*/
section.jp-page-avatar-content-overview{

}

.jp-page-avatar-content-overview-title{
  padding: 20px;
}

h2.jp-page-avatar-content-overview-title-text{
  color: #00D0FF;
  font-size: 35px;
  border-bottom:solid 2px #00D0FF;

}


p.jp-page-avatar-content-overview-lead{
  margin: 10px;
  font-size: 15px;
  word-wrap: break-word;
}

p.jp-page-avatar-content-overview-lead2{
  font-size:15px;
  color: #f90404;
  font-weight: bold;
  margin-left: 5px;

}

p.jp-page-avatar-content-overview-lead-annotation{
  font-size: 12px;
  margin: 10px;

}

ul.jp-page-avatar-content-list{
  text-align: center;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-top:-50px;
}

li.jp-page-avatar-content-list-liWrap{
  float: left;
  margin-right: 20px;
}

li.jp-page-avatar-content-list-box{
  display: inline-block;
  width: 250px;
}

.jp-page-avatar-content-list-box-costume{
  float: left;
  width: 100%;
  border:1px solid #ccc;
  padding: 30px 0;
  margin-bottom: 20px;

}

a.jp-page-avatar-content-std{
  display: inline-block;
  width: 80%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
  background: #d70e18;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.jp-page-avatar-content-attention{
  font-size: 15px;
  padding:10px;
}

#jp-page-avatar-index-content .jp-page-avatar-content-attention ul li{
  font-size: 12px;
  list-style: disc;
  margin-left: 20px;
}

.jp-page-avatar-content-list-box p{
  margin-bottom: 5px;
  font-size: 12px;
}

#jp-page-avatar-index-content .jp-page-avatar-content-attention ul li.jp-page-avatar-content-attention-list{
  list-style: none;
  margin-left: 8px;
}

#jp-page-avatar-index-content .jp-page-avatar-content-attention ul li.jp-page-avatar-content-attention-list:before{
  content: "";
  display: inline-block;
  border-radius: 100%;
  position: relative;
  left: -5px;
  top: -1px;
  background: #000;
  width: 8px;
  height: 8px;

}

.jp-page-avatar-content-overview-img{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}

.jp-page-avatar-content-overview-img img{
  margin: 10px;
}

.text-color-red{
 color: #d70e18;
}

.text-underline{
  text-decoration: underline;
}
@media screen and (max-width: 767px){
  h2.jp-page-avatar-content-overview-title-text{
    font-size: 25px;
  }

  li.jp-page-avatar-content-list-liWrap{
    float: none;

  }

  li.jp-page-avatar-content-list-box{
    display: inline-block;
    width: 100%;




  }
}