@charset "UTF-8";
.qa dd, .scd dd {
  vertical-align: top
}

#proWrap {
  margin-top: 20px
}

#proWrap::after{
  content: "";
  display: block;
  clear: both;
}

.left {
  float: left;
  width: 550px
}

.right {
  width: 510px;
  float: right;
  position: relative;
}

#photo, .box {
  clear: both;
  margin-bottom: 20px;
  overflow: hidden
}

.box h2 {
  background: url("../img/bg_pro.jpg") no-repeat;
  background-size: cover;
  position: relative;
  padding: 10px 10px 14px 50px;
  font-size: 29px
}

.box h2:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 32px;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto
}

.box_inner {
  padding: 12px 0;
}

#photo h2 img {
  width: 550px
}

.photo_frame {
  height: 600px;
  overflow: hidden;
  margin-bottom: 20px
}
.photo_frame li:first-child {
  float: left;
  position: relative;
}
.photo_frame li:first-child .mainImage{
  float: none;
}
.photo_frame li:first-child .bestsaller{
  position: absolute;
  bottom: 25px;
  left: 40px;
}
.photo_frame li:first-child .bestsaller_panel{
  position: absolute;
  width: calc(100% - 5px);

}
.photo_frame li:not(:first-child) {
  float: left;
  width: 106.2px;
  overflow: hidden;
  margin-bottom: 5px
}

.photo_frame .mainImage {
  width: 438px;
  float: left;
  margin-right: 5px
}

.photo_frame .thumb {
  width: 100%;
  cursor: pointer
}

.scd {
  height: 380px
}

.scd h2:before {
  background: url("../img/ico_scd.png") no-repeat
}

.scd dl {
  text-align: center;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.scd dd, .scd dt {
  display: inline-block;
  margin-bottom: 8px
}

.scd dt {
  background: #dd453d;
  padding: 10px 0;
  font-size: 18px;
  width: 170px
}

.scd dd {
  padding: 8px 0;
  font-size: 18px;
  width: 380px;
  border: 2px solid #dd453d;
  background: rgba(255, 255, 255, .1);
  min-height: 38px
}

#photo {
  height: 660px
}

#photo .box_inner {
  height: 582px;
  margin-top: 12px;
  padding: 0
}

#photo .name {
  margin: 10px 0
}

#photo .dairy {
  margin-bottom: 10px
}

.more {
  max-height: 390px;
  overflow: hidden
}
/* .nominate {
  position: absolute;
  top: 10px;
  right: 60px;
} */

p.page {
  text-align: right;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end
}

p.page a {
  padding: 9px 13px;
  display: block;
  width: 128px
}

.more p.name, .more p.size {
  width: 100%;
  text-align: left
}

p.page a.back {
  background: url("../img/ico_back.png") 8px 6px no-repeat #840AC7;
  padding-left: 32px;
  margin-right: 5px
}

p.page a.next {
  background: url("../img/ico_next.png") 99px 6px no-repeat #840AC7;
  padding-right: 32px
}

.more p.name {
  font-size: 34px;
  margin: 0 0 10px;
  padding-bottom: 15px;
  border-bottom: 1px dotted
}
.more p.name span {
  font-size: 18px;
  margin-left: 70px;
}
.more p.name i {
font-size: 18px
}

.op ul, .qa dd {
  border: 2px solid #dd453d
}

.more p.size {
  font-size: 18px
}

.op li, .qa dl {
  text-align: center
}

.more ul.ico {
  flex-wrap: wrap;
  font-size: 15px;
  width: initial;
  height: auto;
  margin: 10px 0
}

.more ul.ico li {
  width: 123px;
  padding: 7px 10px 9px;
  margin-bottom: 5px;
  display: block!important;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .9) inset;
  min-height: 31px
}

.more ul.ico li:not(:nth-of-type(4n)) {
  margin-right: 5px;
  margin-left: 0
}

p.heart, p.price {
  display: inline-block;
  margin-bottom: 15px
}

p.price {
  font-size: 18px;
  margin-right: 10px
}

p.heart {
  width: 230px;
  margin-left: 20px
}

p.nf_ico, p.rank_ico {
  display: inline-block;
  margin-bottom: 13px
}

p.nf_ico {
  margin-left: 5px
}

p.nf_ico img, p.rank_ico img {
  width: 250px
}

.fa {
  color: #e000ae
}

.star dt {
  width: 72px;
  margin-right: 20px;
  font-size: 14px
}

.star dd {
  font-size: 16px
}

.op h2:before {
  background: url("../img/ico_op.png") no-repeat
}

.op ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  padding: 1px
}

.op li {
  width: 124px;
  padding: 8px 0;
  margin: 1px;
  font-size: 13px;
  letter-spacing: 0
}

li.ok {
  background: #ef372e
}

li.ng {
  background: #e1a19e
}

.shop_c h2:before {
  background: url("../img/ico_shop.png") no-repeat
}

.shop_c {
  max-height: 245px
}

.shop_c .box_inner {
  max-height: 195px;
  overflow: scroll;
}

.girl_c p, .shop_c p {
  line-height: 25px
}

.girl_c h2:before {
  background: url("../img/ico_girl.png") no-repeat
}

.girl_c {
  max-height: 245px;
  margin-bottom: 0
}

.girl_c .box_inner {
  max-height: 190px;
  overflow: scroll;
}

.qa dl {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.qa dd, .qa dt {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 16px
}

.qa dt {
  background: #dd453d;
  padding: 10px 0;
  width: 190px
}

.qa dd {
  padding: 8px 0;
  width: 320px;
  background: rgba(255, 255, 255, .1);
  min-height: 36px
}

.btn-reserve {
  width: 75%;
  margin: 0 auto 20px auto;
}
.btn-reserve img {
  width: 100%;
}




 #photo {
   height: 330px;
 }
#photo .box_inner {
  height: auto;
  position: relative;
  overflow: hidden;
  padding-top: calc(240 / 520 * 100% - 41px);
}
#photo .box_inner iframe {
  width: 100%;
  position: absolute;
  top: -41px;
  left: 0;
}
.btn_readmore {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
.btn_readmore a {
  color: #ffff7a;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 20px;
  background: #e12a48;
  background: -moz-linear-gradient(top, #f77d88 0%, #f65962 50%, #db1921 51%, #df3551 100%);
  background: -webkit-linear-gradient(top, #f77d88 0%, #f65962 50%, #db1921 51%, #df3551 100%);
  background: linear-gradient(to bottom, #f77d88 0%, #f65962 50%, #db1921 51%, #df3551 100%);
  padding: 5px 50px;
  border-radius: 8px;
}
.btn_readmore a span {
  font-weight: bold;
  color: #ffff7a;
  text-shadow: 1px 1px 1px #292727;
}

.more h1.name {
  font-size: 34px;
  margin: 0 0 10px;
  padding-bottom: 15px;
  border-bottom: 1px dotted;
}

.more h1.name, .more p.size {
  width: 100%;
  text-align: left;
}
.more h1.name span {
  font-size: 18px;
  margin-left: 70px;
}
.more h1.name i {
  font-size: 18px;
}
