/*
.input-prepend.input-append input {
  font-size: 24px;
  padding-top: 11px;
  padding-bottom: 11px;
  width: 100px;
  text-align: right;
}*/
/* オリジナル ここまで */

/* ----- 要素 ----- */
input{
  border: 1px solid #ccc;
}

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance:textfield;
}

/* ----- エリア ----- */
/* --  -- */
#product {
  margin-top: 24px;
}
#main-image-wrapper{
    position: relative;
    height: min(150vw,150vh);
}
/* -- メイン スライドショー画像関係 -- */
#product-images {
    margin-top: -24px;
    margin-left: -8px;
    width: calc(100% + 16px);
}

.main-image-slide{
    position: absolute;
    width: 100%;
}

img.main-image {
  height: 150vw;
  max-height: 150vh;
  object-fit: cover;
      width: 100%;
}

.main-image-slide .slick-dots {
    bottom: -40px;
}

.main-image-expand-button-wrapper{
    position: absolute;
    bottom: 12px;
    right: 12px;
}
.main-image-expand-button-wrapper i{
  font-size: 24px;
  color: #444444aa;
}

/* -- メイン サムネイル画像関係 -- */
#thumbnail-image-wrapper {
  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 12px 12px;
    margin: 12px 0 0 0;
    width: auto;
    padding: 0 24px;
}
#thumbnail-image-wrapper>div{
  height: calc(calc(100vw - 88px) / 8 * 1.5);
}
#thumbnail-image-wrapper .thumbnail-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hidden-smartPhoto{
    visibility: hidden;
}

.smartphoto-dismiss {
  zoom: 2.5;
  top: 3px !important;
  right: 1px !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFFFFF" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>') !important;
}

/* -- 商品名 価格 -- */
h2.title {
  text-align: center;
  font-size: 28px;
  font-weight: normal;
  margin: 48px 0 0 0;
}
h3.price {
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  margin: 4px 0 8px 0;
}

/* -- オプション -- */
.product-option{
  margin-top: 32px;
}

.product-option .option-element{
  margin-top: 24px; 
}

.product-option .option-element span {
  display: inline-block;
  width: 48px;
}

.product-option .option-element select{
  width: calc(100% - 96px);
}

.product-option .option-element select option.no-stack {
  /*background-color: #999999;*/
}

/* -- 個数選択 購入 -- */
.product-order{
  margin-bottom: 32px;
}

.product-order div{
  margin-top: 24px;
}

.product-order .input-quantity {
  text-align: center;
}

.product-order .input-quantity > span{
  display: inline-block; 
}

.product-order .input-quantity > span.num{
  width: 30%; 
  padding-right: 24px;
}

.product-order .input-quantity input {
  box-sizing: border-box;
  height: 32px;
  width: 100%;
  text-align: right;
}

.product-order .button-cartin button.btn-addcart {
  box-sizing: border-box;
  height: 48px;
  width: 100%;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: #333333;
  color: #ffffff;
}

.product-order .button-cartin button i{
  margin-right: 8px;
}

.product-order .stock_error {
  color: #ff0000 !important;
}

/* -- おすすめカルーセル -- */
#product-list {
  margin: 8px 8px 0 8px;
}

/* -- 商品のサムネイル画像 -- */
#product-list .thumb-nail {
  position: relative;
  width: 100%;
}

#product-list .thumb-nail:before {
  content: "";
  display: block;
  padding-top: 115%;
}

#product-list .thumb-nail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#product-list .thumb-nail span.tag-sold-out {
  position: absolute;
  display: block;
  top: 0;
  padding: 4px 8px;
  color: #ffffff;
  font-size: 12px;
  background: #808080;
  background: linear-gradient(315deg, transparent 3px, rgba(128, 128, 128, 0.75) 3px);
}

/* -- 商品の名称と価格 -- */
#product-list .abstract {
  margin-top: 12px;
}

#product-list .abstract span {
  display: block;
  text-align: center;
  font-size: 12px;
  margin-top: 2px;
}

#product-list .abstract span.price {
  font-size: 10px;
}

#product-list .abstract .price-sold-out {
  font-size: 10px;
  text-decoration: line-through;
}

/* -- カルーセル設定 -- */
#product-list .slick-prev, .slick-next {
  top: calc(50% - 18px) !important;
  width: 28px !important;
  height: 32px !important;
}

#product-list .slick-prev {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" fill="currentColor" class="bi bi-chevron-compact-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z"/></svg>') !important;
}

#product-list .slick-next {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" fill="currentColor" class="bi bi-chevron-compact-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z"/></svg>') !important;
}

#product-list .slick-prev:before, .slick-next:before {
  color: #ffffff00 !important;
}

#product-list .slick-slide {
  margin: 0 4px;
}

#background-data {
  display: none;
}