.product__fav-item {
  margin-top: 10px;
}

.product__fav-item button {
  padding: 0;
  cursor: pointer;
  transition: .2s;
  color: #999;
  border: 0;
  outline: none;
  background: transparent;
}

.product__fav-item .fav-items {
  color: #ff7373;
}

.product__fav-item svg {
  width: 20px;
  height: 20px;
  vertical-align: -.35em;
  fill: currentColor;
}

/* ************************************************ 
 *	商品詳細
 * ************************************************ */

#product {
	padding: 0;
}

#product h1,
#product .prdTitle_h2 {
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 10px;
}

.prdDetail_ul {
	list-style-type: none;
	font-size: 15px;
	color: #333;
	margin: 0;
	margin-bottom: 28px;
	padding: 0;
}

.prdDetail_ul li{
	display: flex;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
}

/*
.prdDetail_ul li:last-child{
	border-bottom: none;
}
*/

.prdDetail_ul li span{
	display: block;
	line-height: 1.8;
}

/*
.prdDetail_ul li span br:first-of-type{
	display: none;
}
*/

.prdDetailLabel {
	width:80px;
}

.prdDetailValue {
}

.ProductExplain {
	margin: 0 22px;
}

.ProductSpec {
	margin: 0 22px !important;
}

/* product-list */
.product-list {
	margin-left: -35px;
	list-style-type: none;
	font-size: 0;
}

.product-list__unit {
	display: inline-block;
	margin: 0px auto;
	vertical-align: top;
	position: relative;
	text-align: center;
}

.product-list__unit-md {
	width: 40vw;
}

.product__fav-item {
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.product__fav-item button {
  padding: 6px 8px;
  margin: 0 22px;
  cursor: pointer;
  transition: .2s;
  color: #999;
  border: 1px;
  border-style: solid; 
　border-color: #999; 
  border-radius: 999px;
  outline: none;
  background: transparent;
}

.product__fav-item .fav-items {
  color: #ff7373;
}

.product__fav-item svg {
  width: 20px;
  height: 20px;
  vertical-align: -.35em;
  fill: currentColor;
  margin-right: 12px;
}

.product__stock-str {
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  height: 20px;
  width: 80%;
  margin: 0px auto;
  padding: 4px 0px;
  color: #fff;
  background-color: #f90;
  border: 1px;
  border-style: solid; 
　border-color: #999; 
  border-radius: 5px;
  outline: none;
}

/* ===========================
	パンくず
=========================== */

.breadcrumb{
	margin:0 0 24px;
	padding:0 10px;
}

.breadcrumblist{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	list-style:none;
	margin:0;
	padding:0;
	font-size:13px;
	color:#777;
}

.breadcrumblist li{
	display:flex;
	align-items:center;
}

.breadcrumblist li + li::before{
	content:">";
	margin:0 10px;
	color:#aaa;
	font-size:14px;
}

.breadcrumblist a{
	color:#777;
	text-decoration:none;
	transition:.2s;
}

.breadcrumblist a:hover{
	color:#111;
}

/* ===========================
	商品タイトル
=========================== */

.ProductBrand{
	display:block;
	font-size:14px;
	color:#777;
	font-weight:400;
	line-height:1.5;
	margin-bottom:10px;
}

.ProductTitle {
	margin:0 22px 24px;
	padding:0;
	font-size:22px;
	font-weight:600;
	line-height:1.5;
	letter-spacing:.03em;
	color:#111;
}

/* ブランド名部分 */
/*
.ProductTitle::first-line{
	font-size:14px;
	font-weight:500;
	color:#777;
	letter-spacing:.08em;

}
*/

/* ===========================
	商品画像
=========================== */

.imagelist {
	margin-bottom: 16px;
}

/* ===========================
	残りわずか
=========================== */

.StockFew{
	display:inline-flex;
	align-items:center;
	padding: 4px 10px;
	margin: 0 22px;
	border-radius:999px;
	background:#d62828;
	color:#fff;
	font-size:13px;
	font-weight:700;
}

/* ===========================
	商品価格
=========================== */

.ProductPrice{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 10px;
	margin: 16px 22px 24px;
}

.ProductPrice .price{
	font-size:32px;
	font-weight:700;
	line-height:1.2;
	color:#111;
	letter-spacing:-0.03em;
}

.ProductPrice .small{
	order:3;
	width:100%;
	margin-top:-2px;
	font-size:14px;
	color:#999;
	text-decoration:line-through;
	line-height:1.4;
}

.DiscountRate{
	order:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:28px;
	padding:0 12px;
	background:#fff3f3;
	border: 1 solid #f3caca;
	color:#d63a34;
	border-radius:999px;
	font-size:13px;
	font-weight:700;
	line-height:1;
	letter-spacing:.03em;
}

/* ===========================
	在庫状況
=========================== */

.button--line {
	border: 2px solid #2196f3;
	border-radius: 12px;
	font-weight: 600;
	color: #2196f3;
	transition: .2s ease;
}

.button--line:hover,
.button--line:active {
	background: #f5f9ff;
}

.modal-open {
	margin-bottom: 16px;
}

/* ===========================
	カート
=========================== */

.productform {
	margin: 0 22px;
}

.productform-inner button.button--orange{
 	display: flex;
	height:60px;
	line-height: 1;
	font-size:22px;
	font-weight:700;
	border-radius:14px;
	box-shadow:0 6px 18px rgba(243,120,39,.25);
  	width:100%;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.button--orange svg{
	flex-shrink: 0;
	display: block;
}

.productform-inner label {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

/* ===========================
	実店舗注意書
=========================== */
.TenpoKeppin {
	display: block;
	background: #fffaf5;
	border: 1px solid #f3b36b;
  	border-radius: 10px;
  	color: #666;
  	font-size: 11px;
  	padding: 14px 16px;
  	margin: 44px 24px 22px;
	line-height: 1.8;
}

/* ===========================
	数量
=========================== */

.QuantityStepper{
	display:flex;
	justify-content: space-between;
	align-items:center;
	width: 300px;
	max-width: 100%;
	margin: 0 auto 24px;
	border: none;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
}

.QuantityStepper button{
	width:56px;
	height:56px;
	background:#f5f7fa;
	border:1px solid #e4e7eb;
	border-radius:12px;
	font-size:22px;
	color:#333;
	font-weight:400;
	cursor:pointer;
	transition:all .2s ease;
}

.QuantityStepper button:hover{
	background:#eceff4;
	border-color:#d7dbe1;
}

.QuantityStepper button:active{
	background:#e2e6eb;
	transform:scale(.96);
}

.qty-input{
	flex:0 0 60px;
	width: 60px !important;
	min-width: 60px;
	max-width: 60px;
	border:none;
	background: transparent;
	text-align:center;
	font-size:42px;
	font-weight:700;
	outline:none;
	appearance:textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{
	appearance:none;
	margin:0;
}

/* ===========================
	タグ
=========================== */

.TagList {
	padding: 0 22px;
	margin: 0 0 20px;
	list-style: none;
	display: flex; 
	justify-content: flex-start; 
	flex-wrap: wrap;
	gap: 8px;
}

.TagListItem {
	display: block;
}

.TagListItem a {
	display:inline-flex;
	align-items:center;
	height: 26px;
	min-height: 26px;
	margin: 4px 6px 0 0;
	padding: 0 12px;
	border: 1px solid #cfdcff;
	border-radius:999px;
	background:#edf3ff;
	color:var(--color-navy);
	font-size:13px;
	font-weight:600;
	line-height:1;
	text-decoration: none;
}

.TagListItem i{
	margin-right: 6px;
}

/* ===========================
	楽天バナー
=========================== */

.BannerRakuten {
  	display:flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0;
	border: none;
}

/* ===========================
	お問い合わせなど
=========================== */

otherlist li{
  margin: 0 15px 22px;
}

/* ===========================
	ネコポス
=========================== */

.Product_Item_Yamato {
	border: 3px solid #fb923c;
	border-color: #009380;
  	border-radius: 12px;
  	font-size: 11px;	
  	margin: 0 22px 40px;
}

.Product_Item_Yamato a {
  	text-decoration: none;
}

.Product_Item_Yamato_text {
	color: var(--color-text);
  	margin: 10px;
}

/* ===========================
	共有する
=========================== */

.ShareArea{
	margin: 0 24px 22px;
	padding: 0;
}

.ShareButtons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 24px 0;
	padding: 0;
}

.ShareButtons li{
	flex:1;
}

.ShareButtons a,
.ShareButtons button{

	width:100%;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:1px solid #d9dde5;
	border-radius:12px;
	background:#fff;
	color:#333;
	font-size:14px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
	transition:.2s;
	box-sizing:border-box;
}

.ShareButtons button{
	appearance:none;
	-webkit-appearance:none;
}

.ShareButtons a:active,
.ShareButtons button:active{
	transform:scale(.97);
	background:#f6f8fc;
}

.ShareButtons i{
	font-size:18px;
}

/* X */
.ShareButton--X{
	color:#111 !important;
}

/* LINE */
.ShareButton--LINE{
	color:#06C755 !important;
}

/* URL */
.ShareCopy{
	color:var(--color-navy) !important;
}
/* ===========================
	登録カラー
=========================== */

.VariationTitle-h2,
.ColorVariationTitle {
	color: #666;
	font-size: 16px;
	margin: 0 12px 0 -22px;
}

.VariationTitle-h2::after,
.ColorVariationTitle::after {
	content:"";
	display:block;
	width: 64px;
	height:1px;
	background: var(--color-border);
	border-radius:999px;
	margin-top: 10px;
}

.ColorVariationList {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
	padding: 0px;
	margin-bottom: 0;
	margin-right: -22px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width: none;
}

.ColorVariationList::-webkit-scrollbar  {
    display: none;
}

.ColorVariation_unit {
    display: flex;
    line-height: 0;
    flex:0 0 96px;   /* 好みで110〜140px */
    scroll-snap-align:start;
}

.ColorVariation_unit a{
	display:block;
	padding:12px;
	background: #f6f6f6;
	border-radius:12px;
}

.ColorVariation_unit a.is-current{
	border:2px solid var(--color-navy);
}

.ColorVariation_unit img {
	display: block;
	width:100%;
	object-fit:contain; /* 全体を見せる */
	padding:0;
	aspect-ratio:1/1;
}

.prdEntryColorTitle {
	margin-bottom: 22px;
}

.prdEntryColorList {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.prdEntryColorLabel {
	width: 100px;	
}

.prdEntryColor {
	text-align: center;
	text-decoration: none;
	width: 32px;
	height: 32px;
	border-radius : 50%;
	flex-shrink: 0;
	border: 1px solid #666;
}

.prdKeyword {
	display: block;
	border-top: 1px solid var(--color-border);
	font-size: 12px;
	color: #888;
	line-height: 1.8;
	margin-top: 28px;
	margin-bottom: 22px;
	padding-top: 22px;
}

/* ===========================
	URLコピー
=========================== */

.ShareCopy{
	width:100%;
	display:flex;
	align-items:center;
	gap:12px;
	padding: 4px 8px;
	border: 1px solid #666;
	border-radius: 999px;
	background:#fff;
	font-weight:600;
	color: #999;
	cursor:pointer;
	text-align:left;
	transition: .2s;
	background: transparent;
	outline: none;
}

.ShareCopy i{
	width:20px;
	text-align:center;
	color:var(--color-navy);
	font-size:18px;
}

.ShareCopy:active{
	background:#f6f8fc;
}

/* コピー完了トースト */
#CopyToast{
	position:fixed;
	left:50%;
	bottom:90px;
	transform:translateX(-50%) translateY(20px);
	padding:12px 18px;
	background:rgba(34,34,34,.92);
	color:#fff;
	border-radius:999px;
	font-size:14px;
	font-weight:700;
	white-space:nowrap;
	opacity:0;
	visibility:hidden;
	transition:.25s;
	z-index:9999;
}

#CopyToast.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}