@charset "utf-8";

/*
 *
 * Usage: Jewelry layout
 *
 * Name: item.css
 *
 */



/*---------------------------------------------------------------------
Jewelry Top layout
---------------------------------------------------------------------*/
#lnav {text-align:center; margin-bottom:80px;}
  #lnav li {display:inline-block; margin:0 16px; font-family:"Arial Black"; font-size:15px; line-height:100%; letter-spacing:0.05em;}
  #lnav a  {display:block; position:relative; text-decoration:none;}
    #lnav a:after {
      -webkit-transition:width 0.2s ease-in;
      transition:width 0.2s ease-in;
      content:''; width:0; height:2px; background-color:#000;
      position:absolute; bottom:-3px; left:0;
    }
    #lnav a:hover:after,
    #lnav a.active:after{width:100%;}

    .sp #lnav a:hover:after {display:none;}



/*---------------------------------------------------------------------
Jewelry Detail layout
---------------------------------------------------------------------*/
.hidden_br br {display:none;}

#jewelry h3 {text-align:center; margin-bottom:75px;}

#jHeader {margin-bottom:50px; border-bottom:2px solid #000; padding-bottom:110px;}
#jHeader #spTitle {display:none;}

#jSlider {float:left; width:560px; position:relative;}
  #jSlider .bx-pager {position:absolute; bottom:-35px; left:0; text-align:center; width:100%;}
      #jSlider .bx-pager .bx-pager-item {display:inline-block; margin:0 4px;}
      #jSlider .bx-pager a {
          text-indent:-9999px; display:block; width:8px; height:8px; border-radius:4px;
          background-color:#d2d2d2;
      }
      #jSlider .bx-pager a.active {background-color:#000;}

    #jSlider .bx-prev,
    #jSlider .bx-next {position:absolute; top:50%; text-indent:-9999px; display:block; width:17px; height:33px; margin-top:-16px;}
    #jSlider .bx-prev {background:url(../images/item/btn_prev.png) no-repeat 0 0; left:10px;}
    #jSlider .bx-next {background:url(../images/item/btn_next.png) no-repeat 0 0; right:10px;}


#jInfo {float:right; width:415px; position:relative;}
  #jInfo h4 {background:url(../images/common/line_solid-x.gif) no-repeat 0 100%; padding-bottom:20px; margin-bottom:40px;}

  #jDescription,
  .description {height:130px; overflow:hidden; position:relative; margin-bottom:40px; padding-right:20px;}
  #jDescription.type2,
  .description.type2 {height:150px;}

    #jDescription p,
    .description p {line-height:180%;}
    #jDescription.multi p {position:absolute; display:none; padding-right:20px;}

  #jIntro {position:relative;}
    #jIntro .intro {position:absolute; top:0; left:0; display:none;}
      #jIntro .intro h5     {font-size:13px; font-weight:bold; margin-bottom:3px;}
      #jIntro .intro .prace {font-size:13px; font-weight:bold; margin-bottom:10px;}
      #jIntro .intro .txt   {font-size:10px; color:#727272;}

    #jIntro li {margin-bottom:18px; color:#b1b1b1;}
    #jIntro li.active {color:#000;}
    #jInfo #jIntro .sp_br  {display:none;}


#jBody .size1 {width:840px;}
#jBody .size2 {width:1000px;}
#jBody .size3 {width:550px;}
#jBody .photo {margin:0 auto 80px auto;}
#jBody .photo.p_left   {margin-left:0;}
#jBody .photo.p_right  {margin-right:0;}
#jBody .photo.p_other1 {margin-left:145px;}

#jBody .mov {
  margin: 0 auto 80px auto;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#jBody .mov iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


#jBody .photo img  {margin-bottom:20px;}
#jBody .photo.mb10 img {margin-bottom:0;}
#jBody .photo .cap {}
  /*#jBody .photo .cap .img {float:left; display:block;}*/
  #jBody .photo .cap .img {display:none;}
  /*#jBody .photo .cap .txt {display:none;}*/
  #jBody .photo .cap .txt {float:left; font-size:13px; font-weight:bold;}
  #jBody .photo .cap p  {float:right; width:230px; line-height:180%;}


/*---------------------------------------------------------------------
Jewelry Category layout
---------------------------------------------------------------------*/
#itemList.necklace {height:1750px;}
  #itemList.necklace #item01 {top:0; left:0;}
  #itemList.necklace #item02 {top:30px; left:723px;}
  #itemList.necklace #item03 {top:430px; left:345px;}
  #itemList.necklace #item04 {top:700px; left:36px;}
  #itemList.necklace #item05 {top:830px; left:648px;}
  #itemList.necklace #item06 {top:1100px; left:356px;}

#itemList.piercing_earings {height:1200px;}
  #itemList.piercing_earings #item01 {top:0; left:0;}
  #itemList.piercing_earings #item02 {top:267px; left:53px;}
  #itemList.piercing_earings #item03 {top:216px; left:750px;}
  #itemList.piercing_earings #item04 {top:620px; left:97px;}
  #itemList.piercing_earings #item05 {top:585px; left:595px;}
  #itemList.piercing_earings #item06 {top:936px; left:40px;}

#itemList.brooch {height:975px;}
  #itemList.brooch #item01 {top:14px; left:17px;}
  #itemList.brooch #item02 {top:82px; left:440px;}
  #itemList.brooch #item03 {top:0; left:773px;}
  #itemList.brooch #item04 {top:372px; left:17px;}
  #itemList.brooch #item05 {top:424px; left:465px;}
  #itemList.brooch #item06 {top:757px; left:0;}
  #itemList.brooch #item07 {top:782px; left:564px;}

#itemList.bracelet {height:340px;}
  #itemList.bracelet #item01 {top:0; left:160px;}
  #itemList.bracelet #item02 {top:22px; left:580px;}

#itemList.ring {height:580px;}
  #itemList.ring #item01 {top:0; left:0;}
  #itemList.ring #item02 {top:10px; left:605px;}
  #itemList.ring #item03 {top:228px; left:330px;}

#itemList.other {height:430px;}
  #itemList.other #item01 {top:50px; left:50px;}
  #itemList.other #item02 {top:50px; left:460px;}



/*---------------------------------------------------------------------
Jewelry Detail layout for Smart Phone
---------------------------------------------------------------------*/
.sp .hidden_br br {display:inline-block;}

.sp #wrapper.detail {width:1024px;}
.sp #jewelry {width:100%;}

.sp #jHeader {margin-bottom:90px; border:none;}
.sp #jHeader #spTitle {display:block; text-align:center; margin-bottom:55px; font-size:52px; line-height:120%;}
  .sp #jHeader #spTitle span {font-size:34px; padding-top:10px; display:block;}


.sp #jSlider {width:100%; float:none; margin-bottom:90px;}
  .sp #jSlider .bxslider img {width:100%}
  .sp #jSlider .bx-pager {bottom:-55px;}
    .sp #jSlider .bx-pager .bx-pager-item {display:inline-block; margin:0 10px;}

    .sp #jSlider .bx-prev,
    .sp #jSlider .bx-next {width:34px; height:66px; margin-top:-33px; }
    .sp #jSlider .bx-prev {background:url(../images/item/btn_prev.png) no-repeat 50% 50%; -webkit-background-size:100% auto; left:20px;}
    .sp #jSlider .bx-next {background:url(../images/item/btn_next.png) no-repeat 50% 50%; -webkit-background-size:100% auto; right:20px;}



.sp #jInfo {width:100%; float:none;}
  .sp #jInfo h4 {display:none;}

  .sp #jInfo #jIntro {padding:40px; font-size:38px;}
    .sp #jInfo #jIntro li,
    .sp #jInfo #jIntro li.active    {margin-bottom:50px; line-height:160%;}
    .sp #jInfo #jIntro .sp_br  {display:block;}

  .sp #jInfo #jDescription {padding:40px; height:auto;}
    .sp #jInfo #jDescription p {font-size:34px; line-height:200%;}


.sp #jBody {}
  .sp #jBody .photo {margin:0 0 60px 0;}
  .sp #jBody .size1,
  .sp #jBody .size2,
  .sp #jBody .size3,
  .sp #jBody .photo img {width:100%;}

  .sp #jBody .photo.mb10 {margin-bottom:90px !important;}
  .sp #jBody .photo .cap {font-size:34px; line-height:180%; padding-bottom:100px;}
  .sp #jBody .photo .cap .img {display:none;}
  .sp #jBody .photo .cap .txt {display:block; padding:40px 40px 80px 40px; float:none; font-size:34px;}
  .sp #jBody .photo .cap p    {float:none !important; display:block; padding:40px; width:auto; margin:0 !important;}


.sp #btnPagetop {padding:0 20px 100px 0;}
.sp #btnPagetop img {width:172px;}

.sp #pageF img {width:218px;}
.sp #pageF a {display:block;}