.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{ font-size: 2rem; 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;}
.item{ width: 1176px; background: #F3F3F3; padding: 0 30px 15px; margin: auto; overflow: hidden;}
.item h3{ background: #fff; margin-top: 30px; padding: 12px; text-align: center; border: 2px solid #000; font-size: 2.4rem;}
.item dl{ background: #fff; margin: 10px 0 0; padding: 105px 40px; width: 100%; height: 320px; text-align: left; position: relative;}
.item dl dt{ text-align: center;font-size: 1.6rem; width: 380px;}
.item dl dt h4{ font-size: 2.2rem;}
.item dl dt ul{ margin: 14px 0 16px;}
.item dl dt li{ font-size: 1.4rem; display: inline-block; padding: 2px 5px; border: 1px solid #000; margin: 0 3px;}
.item dl dd{ position: absolute; right: 55px; top: 4px;}
.item dl dd img{ width: 640px;}
.item dl dd sup{ display: block; font-size: 1.2rem !important; text-align: center;}
.item dl.bag{ width: 550px; height: 340px; margin: 10px 3px 0; display: inline-block; padding: 40px 0 0 40px; text-align: left;}
.item dl.bag dt{ text-align: left; width: auto;}
.item dl.bag dd{ position: absolute; right: -25px; top: 10px;}
.item dl.bag.body dd{ position: absolute; right: 18px; top: 100px;}
.item dl.bag dd img{ width: 320px;}
.item dl.hat{ width: 364px; height: 400px; margin: 10px 3px 0; display: inline-block; padding: 30px;}
.item dl.hat dt{ text-align: center; width: auto;}
.item dl.hat dd{ position: absolute; right:42px; top: 145px;}
.item dl.hat dd img{ width: 280px;}
.item dl.pouch{ height: 240px; margin: 10px 0 0; padding: 70px 210px;}
.item dl.pouch dd{ position: absolute; right:220px; top: 10px;}
.item dl.pouch dd img{ width: 300px;}
.item .sup{ font-size: 1.4rem !important; float: right; margin: 15px 0 0 !important;}

@media screen and (max-width: 768px){
  #sec01 p.lead{ font-weight: bold; margin: 60px auto 30px;}
  .item{ width: 92%; padding: 0 15px 15px;}
  .item h3{ margin-top: 15px; padding: 8px; font-size: 1.9rem; border: 1px solid #000;}
  .item dl{ margin: 5px 0 0; padding: 20px 10px 10px; height: auto; text-align: center;}
  .item dl dt{ font-size: 1.2rem; width: 100%;}
  .item dl dt h4{ font-size: 1.6rem;}
  .item dl dt ul{ margin: 8px 0 10px;}
  .item dl dt li{ font-size: 1rem; padding: 1px 3px; margin: 0 2px;}
  .item dl dd{ position: inherit; right: 0; top: 0;}
  .item dl dd img{ width: 295px;}
  .item dl dd sup{ font-size: 1rem !important;}
  .item dl.bag{ width: 100%; height: auto; margin: 5px 0 0; display: block; padding: 20px 10px 10px; text-align: center;}
  .item dl.bag dt{ text-align: center; width: 100%;}
  .item dl.bag dd{ position: inherit; right: 0; top: 0;}
  .item dl.bag.body dd{ position: inherit; right: 0; top: 0;}
  .item dl.bag dd img{ width: 160px;}
  .item dl.hat{ width: 100%; height: auto; margin: 5px 0 0; display: block; padding: 20px 10px 10px; text-align: center;}
  .item dl.hat dt{ text-align: center; width: 100%;}
  .item dl.hat dd{ position: inherit; right: 0; top: 0;}
  .item dl.hat dd img{ width: 160px;}
  .item dl.pouch{ height: auto; margin: 5px 0 0; padding: 20px 10px 10px;}
  .item dl.pouch dd{ position: inherit; right: 0; top: 0;}
  .item dl.pouch dd img{ width: 160px;}
  .item .sup{ font-size: 1rem !important; text-align: right; margin: 15px 0 0 !important;}

}