.pcOnly {display: inline-block !important;}
.spOnly {display: none !important;}

.col2Wrap{ overflow: hidden;}
.col2Wrap .left{ float: left;}
.col2Wrap .right{ float: right;}

#special{ margin: 0 auto; padding-bottom: 120px; max-width: 1256px; width: 100%; position: relative; background: #fff; text-align: center;}

#special .btn{ margin: 40px auto 0; text-align: center;}
#special .btn a{ transition: 0.4s;}
#special .btn a:hover{ opacity: 0.6;}

#social-wrap { position: absolute; right: 0; top: 15px; overflow: hidden; z-index: 9; }
#social-wrap a.fb { background-position: 0 0; }
#social-wrap a.tw { background-position: -36px 0; }
#social-wrap a { display: block; width: 36px; height: 36px; background: url(../img/social_bt.png) no-repeat left top; margin: 0 10px 0 0; float: left; text-indent: -9999px; }
#special .keyVisual{ padding-top: 60px;}
#special sup{ font-size: 80%; vertical-align: super;}

#sec01{ width: 100%; max-width: 1256px;}
#sec01 p{ line-height: 2; margin: 50px auto;}

@media screen and (max-width: 768px){
   .pcOnly {display: none !important;}
   .spOnly {display: inline-block !important;}

   .col2Wrap .left{ float: none;}
   .col2Wrap .right{ float: none;}	

   #special { max-width: 100%; padding-bottom: 60px;}
   #special .btn{ margin: 0 auto; text-align: center; width: 92%;}

   #special .keyVisual{ padding-top: 50px; margin-top: -30px;}
   #special sup,#special .sup{ font-size: 60%; margin: 6px 0 0; vertical-align: super;}

   #sec01{ width: 100%; height: auto;}
   #sec01 p{ font-size: 1.6rem; line-height: 1.8; margin: 40px auto 30px;}
   #social-wrap { top: 10px;}
}

.lead{ font-weight: bold; font-size: 2.4rem;}
.item{ width: 1176px; background: #F3F3F3; margin: auto; overflow: hidden; margin-bottom: 50px; text-align: left;}
.item h2{ background: #E95283; color: #fff; padding: 12px; text-align: center; font-size: 6rem; font-weight: normal; font-family: 'MQ'; line-height: 1;}
.item.cosme dl{ background: #fff; margin: 18px auto; padding: 30px 0 30px 30px; width: 96%; text-align: left; border-radius: 10px;}
.item.cosme dl dt{ width: 600px; display: inline-block; vertical-align: top; margin: 25px 0 0;}
.item.cosme dl dt img{ width: 600px;}
.item.cosme dl dd{ display: inline-block; width: calc(100% - 640px); margin: 0 0 0 30px}
.item.cosme dl dd h3{ font-size: 6rem; font-weight: normal; font-family: 'MQ'; line-height: 1;}
.item.cosme dl dd .ttl{ display: block; font-size: 1.8rem; font-weight: bold; margin-top: 8px;}
.item.cosme dl dd .price{ display: block; font-size: 1.5rem; margin-top: 8px;}
.item.cosme dl dd .feature{ display: inline-block; font-size: 1.5rem; padding: 5px 10px; border-radius: 4px; background: #D4646E; color: #fff; font-weight: bold; margin-top: 14px;}
.item.cosme dl dd .lead{ display: block; font-size: 1.5rem; font-weight: normal; margin-top: 10px; line-height: 1.8;}
#fashion{ padding-top: 150px; margin-top: -150px;}
#fashion .item dl.tops{ background: #FBC7CD; margin: 18px auto; width: 96%; height: 500px; border-radius: 10px; overflow: hidden; position: relative;}
#fashion .item dl.goods{ background: #FECDD1; margin: 18px auto; width: 96%; height: 500px; border-radius: 10px; overflow: hidden; position: relative;}
#fashion .item dl dt{ width: 1136px;}
#fashion .item dl.tops dd.detail{ position: absolute; right: 0; top: 90px; width: 500px;}
#fashion .item dl.goods dd.detail{ position: absolute; right: 0; top: 45px; width: 500px;}
#fashion .item dl dd.detail h3{ font-size: 2.4rem; margin: 0 0 20px; line-height: 1.6;}
#fashion .item dl dd.detail dl{ overflow: hidden;}
#fashion .item dl.tops dd.detail dt{ width: 76px; background: #FFE0E3; text-align: center; font-size: 1.2rem; font-weight: bold; float: left; padding: 90px 0; border-radius: 2px; margin-right: 18px;}
#fashion .item dl.goods dd.detail dt{ width: 76px; background: #FFE0E3; text-align: center; font-size: 1.2rem; font-weight: bold; float: left; padding: 160px 0; border-radius: 2px; margin-right: 18px;}
#fashion .item dl dd.detail dd{ margin: 8px 0 18px;}
#fashion .item dl dd.detail .ttl{ display: block; font-size: 1.8rem; font-weight: bold; margin-top: 8px;}
#fashion .item dl dd.detail .price{ display: block; font-size: 1.5rem; margin-top: 8px;}

@media screen and (max-width: 768px){
  .item{ width: 92%; margin-bottom: 30px; text-align: center;}
  .item h2{ padding: 6px; font-size: 3.6rem;}
  .item.cosme dl{ margin: 10px auto; padding: 25px 0; width: 94%; text-align: center; border-radius: 5px;}
  .item.cosme dl dt{ width: 100%; display: block; margin: 0 0 15px;}
  .item.cosme dl dt img{ width: 300px;}
  .item.cosme dl dd{ display: block; width: 100%; margin: 0}
  .item.cosme dl dd h3{ font-size: 4rem;}
  .item.cosme dl dd .ttl{ font-size: 1.4rem; margin-top: 6px; line-height: 1.6;}
  .item.cosme dl dd .price{ font-size: 1.2rem; margin-top: 6px;}
  .item.cosme dl dd .feature{ font-size: 1.2rem; padding: 4px 10px; margin-top: 10px;}
  .item.cosme dl dd .lead{ font-size: 1.2rem; margin-top: 10px;}
  #fashion{ padding-top: 60px; margin-top: -60px;}
  #fashion .item dl.tops{ margin: 10px auto; width: 94%; height: 560px; border-radius: 6px;}
  #fashion .item dl.goods{ margin: 10px auto; width: 94%; height: 560px; border-radius: 6px;}
  #fashion .item dl dt{ width: 100%;}
  #fashion .item dl dt img{ width: 100%;}
  #fashion .item dl.tops dd.detail{ width: 100%; top: 50%; padding: 0 25px;}
  #fashion .item dl.goods dd.detail{ width: 100%; top: 32%; padding: 0 25px;}
  #fashion .item dl dd.detail h3{ font-size: 1.6rem; margin: 0 0 10px; text-align: left;}
  #fashion .item dl.tops dd.detail dt{ width: 100%; font-size: 1.1rem; float: inherit; padding: 6px; margin: 0; display: block;}
  #fashion .item dl.goods dd.detail dt{ width: 100%; font-size: 1.1rem;  float: inherit; padding: 6px; margin: 0; display: block;}
  #fashion .item dl dd.detail dd{ margin: 4px 0 8px; text-align: left;}
  #fashion .item dl dd.detail .ttl{ font-size: 1.4rem; margin-top: 14px;}
  #fashion .item dl dd.detail .price{ font-size: 1.2rem; margin-top: 4px;}

}