@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------------------------------

　　商品　詳細ページ (Color Box)　　

-------------------------------------------------------------------------------------*/

#itemDetails {max-width:800px;padding:20px 20px 100px;}
/* #itemDetails #mainPhoto {max-width:940px;margin:0 0 50px;} */

#itemDetails #mainPhoto div > div:not(.bx-caption)  {
	width:100%;height:auto;max-height:470px;overflow:hidden;
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;
	-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;}

@media all and (-ms-high-contrast:none){
	#itemDetails #mainPhoto img {max-width:940px; width: 100%;}
}

/* タイトル周り
------------------------------------------------------------------*/
#itemDetails .title {margin:0 2% 20px; }

#itemDetails .title ul {font-size:14px;font-size:1.4rem;color:#FFF;line-height:1.0;
	font-family:'Metropolis-Medium',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;
	height:20px;margin:0 0 5px;
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;}
#itemDetails .title ul li {height:20px;padding:4px 60px 0 10px;}
#itemDetails .title ul li.new {background:#885645;}

/* MEN'S LADIES' KIDS'  */
#itemDetails .title ul li.user {background:#000;}
#itemDetails .title ul li.user > ul {}
#itemDetails .title ul li.user > ul li {
	position:relative;padding:0 23px 0 0;margin:0 13px 0 0;}
#itemDetails .title ul li.user > ul li:after {
	content:"／";position:absolute;top:1px;right:0;
	font-size:10px;font-size:1.0rem;}
#itemDetails .title ul li.user > ul li:last-child {padding:0;margin:0;}
#itemDetails .title ul li.user > ul li:last-child:after {display:none;}

/* 商品名  */
#itemDetails .title h1 {font-size:26px;font-size:2.6rem;font-weight:normal;
	line-height:1.1;margin:0 0 10px;
  display:-webkit-flex;display:-ms-flexbox;display: flex;
  -webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
#itemDetails .title h1 .fav_btn {margin: 0 0 0 auto; text-align: right;
  font-family: 'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;}

#itemDetails .title h1 .fav_btn .btn {width: auto;min-width: inherit;height: auto;
    font-size: 16px;font-size: 1.6rem;letter-spacing: 0;}
#itemDetails .title h1 .fav_btn .btn a {font-size: 16px; font-size: 1.6rem;
  text-align: center; padding: 5px 10px; width: auto; height: auto;text-decoration: none; display: block;}
#itemDetails .title h1 .fav_btn .btn a:after {display: none; text-align: center;}
#itemDetails .title h1 .fav_btn .btn span {font-size: 10px; font-size: 1.0rem; font-weight: normal; margin: 0;}

#itemDetails .title h1 .fav_btn .add_favorite_message02 {margin: 5px 0 0; color: #CD1316;
  font-size: 10px; font-size: 1.0rem;}

/* 価格・ブランド名等
------------------------------------------------------------------*/
#itemDetails .title .other {font-size:14px;font-size:1.4rem;line-height:1.0;
	font-family:'Metropolis-Regular',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;border-bottom:solid 1px #000;;padding:0 0 10px;}

/* BRAND・品番・メーカー名・ITEM */
#itemDetails .title .other .cntLft {}

#itemDetails .title .other .cntLft .flex {margin:0 0 5px;
	display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;}

#itemDetails .title .other .cntLft dl {
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;}
#itemDetails .title .other .cntLft dl dt {
	font-size:12px;font-size:1.2rem;color:#666;vertical-align:middle;}
#itemDetails .title .other .cntLft dl dt:after {content:"："}
#itemDetails .title .other .cntLft dl dd {margin:0 20px 0 0;}

/* 価格 */
#itemDetails .title .other .price {font-size:28px;font-size:2.8rem;font-weight:bold;
	text-align:right;width:185px;margin:0 0 0 auto;}
#itemDetails .title .other .price .yen,
#itemDetails .title .other .price .tax {font-weight:normal;vertical-align:baseline;}
#itemDetails .title .other .price .yen {font-size:20px;font-size:2.0rem;}
#itemDetails .title .other .price .tax {font-size:14px;font-size:1.4rem;}

/* 詳細
------------------------------------------------------------------*/
#itemDetails .inner {margin:0 2%;color:#666;}
#itemDetails .inner .text {margin:0 0 30px;}
#itemDetails .inner .text p+p {margin-top:10px;}

/* 特徴写真 */
#itemDetails .inner .block {margin:0 0 20px;
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;}
#itemDetails .inner .block img {outline:solid 2px #f6f2ec;}
#itemDetails .inner .block p {margin:0 5px 0 0; width:100%;}
#itemDetails .inner .block p:last-child {margin:0 0 0 5px;}


#itemDetails .inner .features {font-size:12px;font-size:1.2rem;color:#999;margin:0 0 40px;}
#itemDetails .inner .features p+p {margin-top:10px;}

/* SPEC */
#itemDetails .spec {margin:0 0 50px;}
#itemDetails .spec h3 {font-size:18px;font-size:1.8rem;color:#666;margin:0 0 5px 20px;}

#itemDetails .spec dl {font-size:14px;font-size:1.4rem;border-top:solid 1px #b1b1b1;
	display:-webkit-flex;display:-ms-flexbox;display: flex;
	-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}

#itemDetails .spec dl dt,
#itemDetails .spec dl dd {border-bottom:solid 1px #b1b1b1;}

#itemDetails .spec dl dt {width:25%;padding:10px 10px 10px 20px;
  border-right:solid 1px #b1b1b1; background: #f9f9f9;border-left:solid 1px #b1b1b1;}
#itemDetails .spec dl dt:nth-child(3) {border-left:none;}
#itemDetails .spec dl dt:nth-child(7) {border-left:none;}
#itemDetails .spec dl dt:nth-child(11) {border-left:none;}
#itemDetails .spec dl dd {width:25%;padding:10px 10px 10px 20px;border-right:solid 1px #b1b1b1;}

/*#itemDetails .spec dl dt {width:35%;max-width:300px;padding:20px 30px;border-right:solid 1px #b1b1b1;}
#itemDetails .spec dl dd {width:65%;max-width:580px;padding:20px 20px 20px 40px;}*/

/* BTN_お気に入り追加 -----------------------*/
#itemDetails .btn {width:80%;min-width:inherit;height:65px;
	font-size:24px;font-size:2.4rem;letter-spacing:0;margin:0 auto;}
#itemDetails .btn a {padding:0 0 0 30px;}
#itemDetails .btn a:hover {background:#c50000;}
#itemDetails .btn span {
	font-size:12px;font-size:1.2rem;vertical-align:baseline;margin:0 0 0 10px;}

#itemDetails .add_favorite_message {text-align: center; margin: 20px 0 40px; color: #CD1316;}



/*==========================================================================
  Tablet & SP
==========================================================================*/
/*===============================================================
  画面の横幅が640pxまで (スマホサイズ)
===============================================================*/
@media screen and (max-width:640px){
	
	#itemDetails {padding:10px 5px 20px;}
	
	/*----------------------------------------
	　切り替え画像
	----------------------------------------*/
	#itemDetails .bx-wrapper {margin:0 auto 25px;font-size:12px;font-size:1.2rem;}
	#itemDetails .bx-wrapper .bx-pager {bottom:-7px;}
	#itemDetails .bx-wrapper .bx-pager.bx-default-pager a {
		width:5px;height:5px;margin:0 3px;}

	/*----------------------------------------
	　タイトル周り
	----------------------------------------*/
	#itemDetails .title {margin:0 5px 15px;}
	
	#itemDetails .title ul {font-size:10px;font-size:1.0rem;margin:0 0 10px;}
	#itemDetails .title ul li {height:18px;padding:3px 5% 0 5px;}
	
	/* MEN'S LADIES' KIDS'  */
	#itemDetails .title ul li.user > ul li {
		padding:0 15px 0 0;margin:0 5px 0 0;}
	/* 商品名  */
	#itemDetails .title h1 {font-size:20px;font-size:2.0rem;margin:0 0 5px;}
	
	/*----------------------------------------
	　価格・ブランド名等
	----------------------------------------*/
	#itemDetails .title .other {font-size:12px;font-size:1.2rem;display:block;}

	/* BRAND・品番・メーカー名・ITEM */
	#itemDetails .title .other .cntLft {margin:0 0 10px;}
	#itemDetails .title .other .cntLft .flex {margin:0;display:block;}
	
	#itemDetails .title .other .cntLft dl {margin:0 0 5px;
		-webkit-align-items:flex-start;-ms-align-items:flex-start;align-items:flex-start;}
	#itemDetails .title .other .cntLft dl dt {font-size:10px;font-size:1.0rem;}
	#itemDetails .title .other .cntLft dl dd {margin:0;}

	/* 価格 */
	#itemDetails .title .other .price {font-size:16px;font-size:1.6rem;width:none;}
	#itemDetails .title .other .price .yen {
		font-size:14px;font-size:1.4rem;margin:0 0 0 2px;}
	#itemDetails .title .other .price .tax {font-size:10px;font-size:1.0rem;}
	
	/*----------------------------------------
	　詳細
	----------------------------------------*/
	#itemDetails .inner .text {line-height:1.3;margin:0 0 15px;}
	#itemDetails .inner .block {margin:0 0 15px;}
	#itemDetails .inner .features {font-size:10px;font-size:1.0rem;margin:0 0 15px;}

	/* SPEC */
	#itemDetails .spec {margin:0 0 20px;}
	#itemDetails .spec h3 {font-size:14px;font-size:1.4rem;margin:0;}
	
	#itemDetails .spec dl {font-size:12px;font-size:1.2rem;}
	
	#itemDetails .spec dl dt {padding:5px; width: 50%}
	#itemDetails .spec dl dd {padding:5px 5px 5px 10px; width: 50%}
  #itemDetails .spec dl dt:nth-child(3) {border-left:solid 1px #b1b1b1;}
  #itemDetails .spec dl dt:nth-child(7) {border-left:solid 1px #b1b1b1;}
  #itemDetails .spec dl dt:nth-child(11) {border-left:solid 1px #b1b1b1;}

	/*#itemDetails .spec dl dt {width:100%;max-width:none;padding:5px 10px;
		background:#F6F6F6;border-right:none;border-bottom:dotted 1px #b1b1b1;}
	#itemDetails .spec dl dd {width:100%;max-width:none;padding:5px 5px 10px 10px;}*/

	/* BTN_お気に入り追加 -----------------------*/
	#itemDetails .btn {height:45px;font-size:16px;font-size:1.6rem;}
	/*#itemDetails .btn .spAct {display:block;}*/
	
	#itemDetails .btn a {padding:0 0 0 15px;}
	#itemDetails .btn a:after {width: 20%;}
	#itemDetails .btn span {font-size:10px;font-size:1.0rem;}

  #itemDetails .title h1 .fav_btn .btn a {font-size: 12px; font-size: 1.2rem;}

}

@media screen and (max-width:480px){
	#itemDetails .btn a:after {width:8%;}
}

@media screen and (max-width:340px){
	#itemDetails .btn {font-size:14px;font-size:1.4rem;width:95%;}
	#itemDetails .btn a:after {display:none;}
  
  #itemDetails .spec dl dt { width: 55%}
	#itemDetails .spec dl dd { width: 45%}
}