/*
selldebut_cp_pc.css
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved.
*/
.SampleImages__list {
  *zoom: 1;
}

.SampleImages__list:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
}

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
.u-margin0auto {
  margin: 0 auto !important;
}

.u-margin0 {
  margin: 0px !important;
}

.u-marginT0 {
  margin-top: 0px !important;
}

.u-marginR0 {
  margin-right: 0px !important;
}

.u-marginB0 {
  margin-bottom: 0px !important;
}

.u-marginL0 {
  margin-left: 0px !important;
}

.u-marginH0 {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.u-marginV0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.u-margin5 {
  margin: 5px !important;
}

.u-marginT5 {
  margin-top: 5px !important;
}

.u-marginR5 {
  margin-right: 5px !important;
}

.u-marginB5 {
  margin-bottom: 5px !important;
}

.u-marginL5 {
  margin-left: 5px !important;
}

.u-marginH5 {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.u-marginV5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.u-margin10 {
  margin: 10px !important;
}

.u-marginT10 {
  margin-top: 10px !important;
}

.u-marginR10 {
  margin-right: 10px !important;
}

.u-marginB10 {
  margin-bottom: 10px !important;
}

.u-marginL10 {
  margin-left: 10px !important;
}

.u-marginH10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.u-marginV10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.u-margin15 {
  margin: 15px !important;
}

.u-marginT15 {
  margin-top: 15px !important;
}

.u-marginR15 {
  margin-right: 15px !important;
}

.u-marginB15 {
  margin-bottom: 15px !important;
}

.u-marginL15 {
  margin-left: 15px !important;
}

.u-marginH15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}

.u-marginV15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.u-margin20 {
  margin: 20px !important;
}

.u-marginT20 {
  margin-top: 20px !important;
}

.u-marginR20 {
  margin-right: 20px !important;
}

.u-marginB20 {
  margin-bottom: 20px !important;
}

.u-marginL20 {
  margin-left: 20px !important;
}

.u-marginH20 {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.u-marginV20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.u-margin25 {
  margin: 25px !important;
}

.u-marginT25 {
  margin-top: 25px !important;
}

.u-marginR25 {
  margin-right: 25px !important;
}

.u-marginB25 {
  margin-bottom: 25px !important;
}

.u-marginL25 {
  margin-left: 25px !important;
}

.u-marginH25 {
  margin-right: 25px !important;
  margin-left: 25px !important;
}

.u-marginV25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.u-padding0 {
  padding: 0px !important;
}

.u-paddingT0 {
  padding-top: 0px !important;
}

.u-paddingR0 {
  padding-right: 0px !important;
}

.u-paddingB0 {
  padding-bottom: 0px !important;
}

.u-paddingL0 {
  padding-left: 0px !important;
}

.u-paddingH0 {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.u-paddingV0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.u-padding5 {
  padding: 5px !important;
}

.u-paddingT5 {
  padding-top: 5px !important;
}

.u-paddingR5 {
  padding-right: 5px !important;
}

.u-paddingB5 {
  padding-bottom: 5px !important;
}

.u-paddingL5 {
  padding-left: 5px !important;
}

.u-paddingH5 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.u-paddingV5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.u-padding10 {
  padding: 10px !important;
}

.u-paddingT10 {
  padding-top: 10px !important;
}

.u-paddingR10 {
  padding-right: 10px !important;
}

.u-paddingB10 {
  padding-bottom: 10px !important;
}

.u-paddingL10 {
  padding-left: 10px !important;
}

.u-paddingH10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.u-paddingV10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.u-padding15 {
  padding: 15px !important;
}

.u-paddingT15 {
  padding-top: 15px !important;
}

.u-paddingR15 {
  padding-right: 15px !important;
}

.u-paddingB15 {
  padding-bottom: 15px !important;
}

.u-paddingL15 {
  padding-left: 15px !important;
}

.u-paddingH15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.u-paddingV15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.u-padding20 {
  padding: 20px !important;
}

.u-paddingT20 {
  padding-top: 20px !important;
}

.u-paddingR20 {
  padding-right: 20px !important;
}

.u-paddingB20 {
  padding-bottom: 20px !important;
}

.u-paddingL20 {
  padding-left: 20px !important;
}

.u-paddingH20 {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.u-paddingV20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.u-padding25 {
  padding: 25px !important;
}

.u-paddingT25 {
  padding-top: 25px !important;
}

.u-paddingR25 {
  padding-right: 25px !important;
}

.u-paddingB25 {
  padding-bottom: 25px !important;
}

.u-paddingL25 {
  padding-left: 25px !important;
}

.u-paddingH25 {
  padding-right: 25px !important;
  padding-left: 25px !important;
}

.u-paddingV25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.u-textBold {
  font-weight: bold !important;
}

.u-textGray {
  color: #777 !important;
}

.u-textCenter {
  text-align: center !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textRight {
  text-align: right !important;
}

.u-textBreak {
  word-wrap: break-word !important;
}

.u-fontSize11 {
  font-size: 11px !important;
}

.u-fontSize12 {
  font-size: 12px !important;
}

.u-fontSize13 {
  font-size: 13px !important;
}

.u-fontSize14 {
  font-size: 14px !important;
}

.u-fontSize15 {
  font-size: 15px !important;
}

.u-fontSize16 {
  font-size: 16px !important;
}

.u-fontSize17 {
  font-size: 17px !important;
}

.u-fontSize18 {
  font-size: 18px !important;
}

.u-fontSize19 {
  font-size: 19px !important;
}

.u-fontSize20 {
  font-size: 20px !important;
}

.u-fontSize21 {
  font-size: 21px !important;
}

.u-fontSize22 {
  font-size: 22px !important;
}

.u-fontSize23 {
  font-size: 23px !important;
}

.u-fontSize24 {
  font-size: 24px !important;
}

.KeyVisual {
  height: 480px;
  margin-bottom: 35px;
  background: #fff200 url(../img/bg_keyvisual_01.png) 50% 0 no-repeat;
}

.KeyVisual__body {
  text-indent: -99999px;
}

.Entry {
  padding-bottom: 40px;
}

.Entry a {
  color: #e4007f;
  font-weight: bold;
}

.Entry__body {
  margin: 0 auto;
}

.Entry__title {
  margin: 0 auto 15px;
  text-indent: -99999px;
}

.Entry__title--login {
  background-image: url(../img/spr_common_01.png);
  background-position: -745px -537px;
  width: 735px;
  height: 93px;
}

.Entry__title--entry {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px -537px;
  width: 735px;
  height: 93px;
}

.Entry__title--finish {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px -640px;
  width: 730px;
  height: 90px;
}

.Entry__id {
  margin-bottom: 10px;
  text-align: center;
}

.Entry__btn {
  display: block;
  margin: 0 auto 10px;
  text-indent: -99999px;
}

.Entry__btn--login {
  background-image: url(../img/spr_common_01.png);
  background-position: -530px -859px;
  width: 520px;
  height: 86px;
}

.Entry__btn--entry {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px -859px;
  width: 520px;
  height: 86px;
}

.Entry__btn--finish {
  background-image: url(../img/spr_common_01.png);
  background-position: -1048px -740px;
  width: 520px;
  height: 86px;
}

.Entry__error {
  display: table;
  width: 650px;
  height: 167px;
  margin: 0 auto 20px;
  border: 3px solid #000;
}

.Entry__errorText {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 28px;
}

.Entry__foot {
  text-align: center;
}

.Premium {
  padding: 40px 0;
  background: #fff200;
}

.Premium__head {
  background-image: url(../img/spr_common_01.png);
  background-position: -943px -463px;
  width: 792px;
  height: 64px;
  margin: 0 auto 25px;
  text-indent: -99999px;
}

.Premium__info {
  width: 700px;
  margin: 0 auto 25px;
  padding: 20px 0;
  border: 3px solid #00a0e9;
  background: #fff;
}

.Premium__infoText {
  margin: 0 auto;
  text-indent: -9999px;
}

.Premium__infoText--style01 {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px -740px;
  width: 514px;
  height: 109px;
}

.Premium__btn {
  display: block;
  margin: 0 auto 20px;
  text-indent: -99999px;
  background-image: url(../img/spr_common_01.png);
  background-position: -740px -640px;
  width: 667px;
  height: 86px;
}

.Premium__foot {
  width: 700px;
  margin: 0 auto;
}

.Easy {
  padding: 40px 0;
}

.Easy__body {
  background-image: url(../img/spr_common_01.png);
  background-position: -943px 0px;
  width: 865px;
  height: 453px;
  margin: 0 auto;
  text-indent: -99999px;
}

.Money {
  padding: 40px 0;
}

.Money__body {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px 0px;
  width: 933px;
  height: 527px;
  margin: 0 auto 30px;
  text-indent: -99999px;
}

.Money__btn {
  background-image: url(../img/spr_common_01.png);
  background-position: -1060px -859px;
  width: 450px;
  height: 59px;
  display: block;
  margin: 0 auto 10px;
  text-indent: -99999px;
}

.Product {
  position: relative;
  display: block;
  width: 178px;
  padding: 10px;
  margin: 0 auto;
  font-size: medium;
}

.Product:link, .Product:hover, .Product:active, .Product:visited {
  color: #333;
}

.Product:hover {
  text-decoration: none;
}

.Product:hover .Product__image {
  -webkit-transition: -webkit-background-size 0.2s ease-out;
  transition: -webkit-background-size 0.2s ease-out;
  -o-transition: -o-background-size 0.2s ease-out;
  -moz-transition: background-size 0.2s ease-out, -moz-background-size 0.2s ease-out;
  transition: background-size 0.2s ease-out;
  transition: background-size 0.2s ease-out, -webkit-background-size 0.2s ease-out, -moz-background-size 0.2s ease-out, -o-background-size 0.2s ease-out;
  opacity: 1;
  filter: alpha(opacity=100);
}

.Product:hover .Product__name {
  text-decoration: underline;
}

.Product--background {
  background: #eee;
}

.Product__thumb {
  position: relative;
  display: block;
  width: 178px;
  height: 206px;
  line-height: 206px;
  margin-bottom: 10px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  border: none;
  font-size: 0;
}

.Product__thumb:before {
  position: absolute;
  bottom: 0;
  left: 0;
  border-left: 90px solid #f9f9f9;
  border-top: 50px solid transparent;
  border-bottom: 0;
  border-right: 0;
  content: '';
}

.Product__thumb:after {
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 90px solid #f9f9f9;
  border-top: 50px solid transparent;
  border-bottom: 0;
  border-left: 0;
  content: '';
}

.Product__tag {
  position: absolute;
  top: 0;
  left: 0;
}

.Product__image {
  display: block;
  width: 178px;
  height: 206px;
  max-height: 206px;
  vertical-align: middle;
  background: url("../img/pic_man_01.jpg") 50% 50% no-repeat;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.Product__image--st1 {
  background-image: url("../img/pic_man_01.jpg");
}

.Product__image--st2 {
  background-image: url("../img/pic_man_02.jpg");
}

.Product__image--st3 {
  background-image: url("../img/pic_man_03.jpg");
}

.Product__image--st4 {
  background-image: url("../img/pic_man_04.jpg");
}

.Product__image--st5 {
  background-image: url("../img/pic_man_05.jpg");
}

.Product__image--st6 {
  background-image: url("../img/pic_man_06.jpg");
}

.Product__image--st7 {
  background-image: url("../img/pic_man_07.jpg");
}

.Product__image--st8 {
  background-image: url("../img/pic_man_08.jpg");
}

.Product__image--st9 {
  background-image: url("../img/pic_man_09.jpg");
}

.Product__image--st10 {
  background-image: url("../img/pic_man_10.jpg");
}

.Product__image--st11 {
  background-image: url("../img/pic_woman_01.jpg");
}

.Product__image--st12 {
  background-image: url("../img/pic_woman_02.jpg");
}

.Product__image--st13 {
  background-image: url("../img/pic_woman_03.jpg");
}

.Product__image--st14 {
  background-image: url("../img/pic_woman_04.jpg");
}

.Product__image--st15 {
  background-image: url("../img/pic_woman_05.jpg");
}

.Product__image--st16 {
  background-image: url("../img/pic_woman_06.jpg");
}

.Product__image--st17 {
  background-image: url("../img/pic_woman_07.jpg");
}

.Product__image--st18 {
  background-image: url("../img/pic_woman_08.jpg");
}

.Product__image--st19 {
  background-image: url("../img/pic_woman_09.jpg");
}

.Product__image--st20 {
  background-image: url("../img/pic_woman_10.jpg");
}

.Product__image:before {
  position: absolute;
  top: 0;
  left: 0;
  border-left: 90px solid #f9f9f9;
  border-bottom: 50px solid transparent;
  border-top: 0;
  border-right: 0;
  content: '';
  z-index: 1;
}

.Product__image:after {
  position: absolute;
  top: 0;
  right: 0;
  border-right: 90px solid #f9f9f9;
  border-bottom: 50px solid transparent;
  border-top: 0;
  border-left: 0;
  content: '';
}

.Product__category {
  display: block;
  margin-bottom: 10px;
  font-size: 75%;
  font-weight: bold;
  line-height: 1.3;
}

.Product__name {
  display: block;
  margin-bottom: 10px;
  font-size: 81.25%;
  font-weight: normal;
  color: #000;
  line-height: 1.3;
}

.Product__startPrice {
  display: block;
  font-size: 68.75%;
}

.Product__bids {
  display: block;
  margin: 2px 0;
  font-size: 68.75%;
}

.Product__time {
  display: block;
  margin: 2px 0;
  font-size: 68.75%;
}

.Product__currentPrice {
  display: block;
  margin-top: 10px;
}

.Product__currentPrice .Product__label {
  font-size: 81.25%;
}

.Product__currentPrice .Product__value {
  font-size: 106.25%;
  font-weight: normal;
  color: #000;
}

.Product__currentPrice .Product__unit {
  font-size: 81.25%;
}

.Zebra > li:nth-child(odd) {
  background: #fff200;
}

.Products {
  margin: 0 0 50px;
  padding: 40px 0 50px;
  background: #f9f9f9;
}

.Products__title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 26px;
}

.SampleImages__list {
  text-align: center;
}

.SampleImages__item {
  display: inline-block;
  margin: 10px;
  text-indent: -9999px;
}

.SampleImages__item--01 {
  background-image: url(../img/spr_common_01.png);
  background-position: -630px -955px;
  width: 200px;
  height: 200px;
}

.SampleImages__item--02 {
  background-image: url(../img/spr_common_01.png);
  background-position: 0px -955px;
  width: 200px;
  height: 200px;
}

.SampleImages__item--03 {
  background-image: url(../img/spr_common_01.png);
  background-position: -420px -955px;
  width: 200px;
  height: 200px;
}

.SampleImages__item--04 {
  background-image: url(../img/spr_common_01.png);
  background-position: -210px -955px;
  width: 200px;
  height: 200px;
}