/**************************************
#productDetailSection
**************************************/
#productDetailSection{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}


/**************************************
#prodcutDetail
**************************************/
#prodcutDetail{
  display: block;
  padding: 0 0 8rem;
  background: #F8F8F8;
}

#prodcutDetail > .inner{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/**************************************
#detailTextArea
**************************************/
#detailTextArea{
  display: block;
  width: 100%;
  padding: 4rem 2rem 0;
  order: 2;
}

/** itemName  **********/
#detailTextArea .itemName{
	display: block;
  margin-bottom: 1.5rem;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.13;
	text-align: left;
}

/** price  **********/
#detailTextArea .price{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  margin-bottom: 2.4rem;
  font-size: 2rem;
  font-weight: 700;
}

#detailTextArea .price > span{
  display: inline-block;
  margin-left: 0.4rem;
  padding-bottom: 0.2rem;
  font-size: 1.0rem;
  font-weight: 600;
}


/** ledeBox  **********/
#detailTextArea .ledeBox{
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 2;
  text-align: left;
}


/** colorList  **********/
#detailTextArea dl.colorList{
  display: block;
  margin-top: 3rem;
}

#detailTextArea dl.colorList > dt{
  display: block;
  margin-bottom: 1.0rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
}


#detailTextArea dl.colorList > dd{ display: block;}

#detailTextArea dl.colorList > dd > ul.colorTips{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem 0.4rem;
  width: 100%;
  padding: 0;
}

#detailTextArea dl.colorList > dd > ul.colorTips > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 3.8rem;
  height: 3.8rem;
  padding: 0.6rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#detailTextArea dl.colorList > dd > ul.colorTips > li::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #DEDEDE;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  transition: border 0.3s ease;
}
#detailTextArea dl.colorList > dd > ul.colorTips > li.current::after{border-color: #111111;}

#detailTextArea dl.colorList > dd > ul.colorTips > li > em{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

#detailTextArea dl.colorList > dd > ul.colorTips > li > em > span{
  display: block;
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


/**productID***/
#detailTextArea dl.colorList > dd > ul.productID{
  display: block;
  margin-top: 1rem;
  font-size: 1.0rem;
  line-height: 1.8;
  min-height: 3.6em;
}


#detailTextArea dl.colorList > dd > ul.productID > li{
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#detailTextArea dl.colorList > dd > ul.productID > li.current{
  display: block;
  animation-name: fadeUpAnime;
  animation-duration: 0.3s;
  animation-fill-mode:forwards;
  opacity:0;
}

#detailTextArea dl.colorList > dd > ul.productID > li > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
#detailTextArea dl.colorList > dd > ul.productID > li > dl > dt{
  display: block;
  text-indent: -0.5em;
}
#detailTextArea dl.colorList > dd > ul.productID > li > dl > dd{display: block;}

#detailTextArea dl.colorList > dd > ul.productID > li.current {

}

@keyframes fadeUpAnime{
  from {opacity: 0;}
  to { opacity: 1;}
}


/**sizeList***/
#detailTextArea dl.sizeList{
  display: block;
  margin-top: 3rem;
}

#detailTextArea dl.sizeList > dt{
  display: block;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
}


#detailTextArea dl.sizeList > dd{ display: block;}

#detailTextArea dl.sizeList > dd > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem 0.4rem;
  width: 100%;
  padding: 0;
}

#detailTextArea dl.sizeList > dd > ul > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  min-height: 5.2rem;
  padding: 0 1rem;
  background: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

#detailTextArea dl.sizeList > dd > ul > li.red{ color: #D0112B;}

/**cautionText***/
#detailTextArea .cautionText{
  display: block;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 1.0rem;
  line-height: 1.8;
}

/**utilityBtn***/
#detailTextArea ul.utilityBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 3rem;
  gap: 0 0.8rem;
}

#detailTextArea ul.utilityBtn > li.btnRed{width: calc(100% - 12.8rem);}
#detailTextArea ul.utilityBtn > li.btnBlack{width: 12rem;}

#detailTextArea ul.utilityBtn > li.btnRed > a,
#detailTextArea ul.utilityBtn > li.btnBlack > a{height: 5.6rem; font-size: 1.3rem; padding: 0;}

/**shareBtn***/
#detailTextArea ul.shareBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  margin-top: 2rem;
  gap: 0 0.4rem;
}

#detailTextArea ul.shareBtn > li{ display: block;}

#detailTextArea ul.shareBtn > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #FFFFFF;
  transition: opacity 0.3s ease;
}

#detailTextArea ul.shareBtn > li > a:hover{opacity: .6;}

#detailTextArea ul.shareBtn > li > a > img{display: block; height: auto;}
#detailTextArea ul.shareBtn > li.Copy > a > img{width: 1.6rem;}
#detailTextArea ul.shareBtn > li.Facebook > a > img{width: 0.7rem;}
#detailTextArea ul.shareBtn > li.twitter > a > img{width: 1.5rem;}
#detailTextArea ul.shareBtn > li.Pinterest > a > img{width: 1.6rem;}


/**discriptionArea***/
#detailTextArea .discriptionArea{
  display: block;
  margin-top: 3rem;
  font-size: 1.3rem;
  line-height: 2;
  text-align: left;
}


/**tagList***/
#detailTextArea .tagList{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem 1rem;
  margin-top: 3rem;
  font-size: 1.3rem;
  text-align: left;
}

#detailTextArea .tagList > li{
  color: #D0112B;
  text-decoration: underline;
}

#detailTextArea .tagList > li > a{
  color: #D0112B;
  text-decoration: underline;
  transition: opacity 0.3s ease;
}


/**************************************
#detailImgArea
**************************************/

#prodcutDetail #detailImgArea{
  display: block;
  width: 100%;
  padding-bottom: 115.4%;
  position: relative;
}

#prodcutDetail #detailImgArea .detailImgAreaInner{
  display: block;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease;
}
#prodcutDetail #detailImgArea .detailImgAreaInner.current{
  opacity: 1;
  pointer-events: inherit;
}


#detailImgArea .detailMainImg{
  display: block;
  width: 100%;
	overflow: hidden;
	position: relative;
}

#detailImgArea .detailMainImg img {
	display: block;
	width: 100%; height: auto;
}

#detailImgArea .detailMainImg .container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

#detailImgArea .detailMainImg .sliderWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  transition-property: transform;
  box-sizing: content-box;
}

#detailImgArea .detailMainImg .slider {
  display: block;
  width: 100%;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
}
#detailImgArea .detailMainImg .slider::after{
	content: '';
	display: block;
	padding-top: 100%;
}

#detailImgArea .detailMainImg .slider > img{
	display: block;
	width: 100%; height: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}

#detailImgArea .detailMainImg .slider.swiper-slide-active{
  pointer-events: auto;
}


#detailImgArea .detailMainImg .magnification{
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.4rem;
  background: #F8F8F8;
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#detailImgArea .detailMainImg .magnification > img{
  display: block;
  width: 100%;
  height: auto;
}

/** icons  **********/
#detailImgArea .detailMainImg ul.icons{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 3;
}

#detailImgArea .detailMainImg ul.icons > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 2.6rem;
  background: url("../img/product/icon_new.svg") center center no-repeat;
  background-size: 2.6rem auto;
  border: 2px solid #D0112B;
}


/**** thumbs ***************/
#detailImgArea .thumsListBox{
	display: block;
	width: 100%;
  margin-top: 0.5rem;
}

#detailImgArea .thumsListBox .container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0 2rem;
  z-index: 1;
}

#detailImgArea .thumsListBox .sliderWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  transition-property: transform;
  box-sizing: content-box;
}

#detailImgArea .thumsListBox .slider{
  display: block;
  width: 5.16667rem;
  margin-right: 5px;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease,border 0.3s ease;
}
#detailImgArea .thumsListBox .slider:nth-last-of-type(1){margin-right: 0;}

#detailImgArea .thumsListBox .slider.current{ border: 1px solid #111111;}

#detailImgArea .thumsListBox .slider > img{
	display: block;
	width: 100%; height: auto;
}



/**************************************
movieSection
**************************************/
#productDetailSection .movieSection{
  display: block;
  width: 100%;
  padding: 8rem 2rem;
  background: #FFFFFF;
}

#productDetailSection .movieSection > h2{
  display: block;
  margin-bottom: 2.4rem;
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
}
#productDetailSection .movieSection > h2 > span{
  display: block;
  padding-top: 0.7rem;
  font-size: 1.5rem;
}

#productDetailSection .movieSection .movieOuter{
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#productDetailSection .movieSection .movieOuter > .inner{
  display: block;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 auto;
  position: relative;
}

#productDetailSection .movieSection .movieOuter > .inner > iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#productDetailSection .movieSection .capArea{
  display: block;
  width: 100%;
  padding-top: 2rem;
  margin: 0 auto;
  font-size: 1.3rem;
  text-align: left;
  line-height: 2;
}


/**************************************
#relatedSection
**************************************/
#productDetailSection .relatedSection{
  display: block;
  width: 100%;
  padding: 8rem 2rem;
  background: #F8F8F8;
  overflow: hidden;
}

#productDetailSection .relatedSection > h2{
  display: block;
  margin-bottom: 2.4rem;
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
}
#productDetailSection .relatedSection > h2 > span{
  display: block;
  padding-top: 0.7rem;
  font-size: 1.5rem;
}

/** otherCategoryProductList ***************************/

#productDetailSection .relatedItemList{
  width: 100%;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  list-style: none;
  z-index: 1;
}

#productDetailSection .relatedItemList > ul{
  display: flex;
  flex-wrap: nowrap;
  transition-property: transform;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}

#productDetailSection .relatedItemList > ul > li{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: inherit;
  width: 12.8rem;
  margin-right: 1rem;
}
#productDetailSection .relatedItemList > ul > li:nth-last-of-type(1){margin-right: 0;}

#productDetailSection .relatedItemList > ul > li > a{
  display: block;
  width: 100%;
  text-decoration: none;
  color: #111111;
  transition: color 0.3s ease;
}

#productDetailSection .relatedItemList > ul > li figure{
  display: block;
  width: 100%;
  height: 25rem;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
}

#productDetailSection .relatedItemList > ul > li figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.3s ease;
}


#productDetailSection .relatedItemList > ul > li ul.colorTips{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.3rem 0.3rem;
  width: 100%;
  padding: 0.5rem 1.5rem 1.5rem;
  background: #FFFFFF;
  box-sizing: border-box;
}

#productDetailSection .relatedItemList > ul > li ul.colorTips > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
}

#productDetailSection .relatedItemList > ul > li ul.colorTips > li > span{
  display: block;
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
#productDetailSection .relatedItemList > ul > li ul.colorTips > li > span.white{border: 1px solid #111111;}


#productDetailSection .relatedItemList > ul > li .name{
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1.6rem;
  padding-left: 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  
  box-sizing: border-box;
  position: relative;
}
#productDetailSection .relatedItemList > ul > li .name::before{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.7rem;
  border-color: transparent transparent transparent #D0112B;
  position: absolute;
  left: 0;
  top: 0.2rem;
}


/**************************************
imageModal
**************************************/
#imageModal{
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0 0 0;
	background: rgba(0,0,0,.8);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11000;
  transition: opacity 0.3s ease;
  transform: translate(200vw,0);
}

#imageModal.active{
  transform: translate(0,0);
  opacity: 1;
}

#imageModal::after{
  content: '';
  display: block;
  width: 100%;
  height: 40px;
}

#imageModal > .modalBg{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;	
}


#imageModal .inner{
  display: block;
  width: 100%;
  padding-bottom: 100%;
  margin: 10rem auto 0;
	position: relative;
	z-index: 2;
}

#imageModal .inner::before{
  content: 'ピンチアウトで拡大';
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-align: left;
  position: absolute;
  left: 1rem;
  top: -2.8rem;
  z-index: 2;
}

#viewMagImgOuter{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

#viewMagImgOuter > figure{
  display: block;
  width: 100%;
}
#viewMagImgOuter > figure > img{
  display: block;
  width: 100%;
}

#imageModal .inner > .btnClose{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
	background: #F8F8F8;
  border-radius: 50%;
  position: absolute;
  right: 1rem;
  top: -3.5rem;
  z-index: 1;
	cursor: pointer;
  transition: opacity 0.3s ease;
}

#imageModal .inner > .btnClose::before{
	content: '×';
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
  color: #111111;
	text-align: center;
}

#viewImageSlide{
  display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
  width: 8.4rem;
  gap: 0 0.4rem;
  position: absolute;
  left: 0.4rem;
  bottom: -4.4rem;
}

#viewImageSlide > li{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #111111;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#viewImageSlide > li.disabled{opacity: .2; cursor: inherit; pointer-events: none;}

#viewImageSlide > li > img{
  display: block;
  width: 0.7rem;
  height: auto;
}