/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS : 商品ページ専用
--------------------------------------------------------------------------------
1.0.0.0 MAIN CONTENTS
	1.1.0.0 ITEM BASIC AREA
	1.2.0.0 SUB ECPLANATION ARIA
	1.3.0.0 REVIEW & EXTRA INFO AREA
	1.5.0.0 ANIMATION
2.0.0.0 WIDTH  667px or OVER
	2.1.0.0 ITEM BASIC AREA
	2.2.0.0 SUB ECPLANATION ARIA
	2.3.0.0 REVIEW & EXTRA INFO AREA
3.0.0.0 WIDTH  960px or OVER
	3.1.0.0 ITEM BASIC AREA
	3.2.0.0 SUB ECPLANATION ARIA
	3.3.0.0 REVIEW & EXTRA INFO AREA
4.0.0.0 WIDTH 1024px or OVER
	4.1.0.0 ITEM BASIC AREA
	4.2.0.0 SUB ECPLANATION ARIA
	4.3.0.0 REVIEW & EXTRA INFO AREA
------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
// 1.0.0.0 MAIN CONTENTS
------------------------------------------------------------------------------*/
#item{
	/* BREAD CRUMB -----------------------------------------------------------*/
	.breadcrumb{
		display:flex;
		padding:.8rem 2.4rem;
		background:var(--surface);

		li{
			display:flex;
			font-size:1.1rem;
			font-weight:200;
			color:var(--text);
			align-items:center;

			&:not(:last-child)::after{
				content:'chevron_right';
				display:block;
				margin:0 .8rem;
				font-family:'Material Symbols Outlined';
				font-variation-settings:'wght' 100, 'GRAD' 0;
				font-size:1.1rem;
			}

			a{
				font-size:1.1rem;
				font-weight:400;
				color:var(--sub_accent);
				color:var(--accent);
			}
		}
	}

	h1{
		padding:2.0rem 2.0rem;
		width:100%;
		text-align:center;

		ruby{
			display:flex;
			line-height:1.2;
			font-size:2.0rem;
			font-weight:400;
			flex-direction:column;

			rt{
				font-size:1.2rem;
				text-align:center;
			}
		}
	}


	/*----------------------------------1.1.0.0 --------------ITEM BASIC AREA */
    .item-wrapper{
        &>div{
            /* SLIDER THUMBNAIL ----------------------------------------------*/
            #slider{
				position:relative;
				overflow:hidden;

				ul{
					display:flex;

					li{
						width:100vw;
						height:100vw;
						background:var(--gray);
						flex:0 0 100vw;
						cursor:pointer;

						img{
							width:100%;
							height:100%;
							object-fit:contain;
						}
                    }
                }

				p{
					position:absolute;
					bottom:1.6rem;
					font-size:1.2rem;
					font-weight:400;
					border-radius:50%;
					background:rgba(255, 255, 255, .9);

					/* THUMB NUMBER ------------------------------------------*/
					&:not(#wish){
						left:0;
						padding:.8rem .8rem .8rem 2.4rem;
						border-radius:0 .8rem .8rem 0;
					}

					/* FAVORITE ----------------------------------------------*/
					&#wish{
						right:1.6rem;
						display:flex;
						width:4rem;
						height:4rem;
						align-items:center;
						justify-content:center;

						&::before{
							content:'favorite';
							display:block;
							font-family:'Material Symbols Outlined';
							font-variation-settings:'wght' 400, 'GRAD' 0;
							font-size:3.2rem;
							color:var(--accent);
							transform:translateY(.2rem);
						}

						&.checked::before{
							font-variation-settings:'FILL' 1;
						}
					}
				}
			}

			/* MINI THUMBNAIL ------------------------------------------------*/
			.min-image{
				display:flex;
				padding:.8rem 2.4rem;
				overflow-x:auto;
				white-space:nowrap;

				li{
					margin-right:.8rem;
					width:20vw;
					border:2px solid var(--gray);

					&.current{
						border:2px solid var(--accent);
					}

					&:last-child{
						margin-right:0;
					}

					img{
						width:calc(20vw - 4px);
						height:calc(20vw - 4px);
					}
				}
			}

			/* EVALUATION STAR AREA ------------------------------------------*/
			.star{
				display:flex;
				margin:1.6rem 2.4rem 0;
				align-items:center;

				p{
					&:nth-child(1){
						font-family:'Material Symbols Outlined';
						font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
						font-size:1.8rem;
						color:transparent;
						background:linear-gradient(90deg, #ddd, #ddd);
						background-clip:text;
						letter-spacing:-.3rem;
					}

					&:nth-child(2){
						margin-left:.4rem;
						font-size:1.2rem;
					}
				}

				/* REVIW COUNT -----------------------------------------------*/
				.eva-count{
					display:flex;
					margin-left:.4rem;
					padding:.2rem .6rem;
					font-size:1rem;
					font-weight:400;
					border-radius:.4rem;
					background:var(--gray);
					align-items:center;

					&:empty{
						display:none;
					}

					&::before{
						content:'reviews';
						padding-right:.4rem;
						font-family:'Material Symbols Outlined';
						font-variation-settings:'wght' 400, 'GRAD' 0;
						font-size:1.4rem;
					}
				}
			}

			/* CATCHCOPY AREA ------------------------------------------------*/
			.catchcopy{
				margin:1.6rem 2.4rem 0;
				line-height:2;
				font-size:1.4rem;
			}

            /* SHOPPING AREA -------------------------------------------------*/
			.shopping-area{
				margin:2.4rem 0;

				.item-select{
					display:flex;
					margin:1.6rem 2.4rem;

					.price-area{
						display:flex;
						align-items:center;
						flex-wrap:wrap;
						flex:1;

						/* ASKING PRICE --------------------------------------*/
						#asking-price{
							display:flex;
							position:relative;
							margin-bottom:.8rem;
							padding:0 .4rem 0 0;
							border:2px solid var(--error);
							border-radius:4px;
							align-items:center;

							&::before{
								content:'希望小売価格';
								display:block;
								margin-right:.4rem;
								padding:.4rem;
								font-size:1rem;
								font-weight:400;
								color:var(--back);
								background:var(--error);
							}

							&:after{
								content:'';
								position:absolute;
								left:calc(50% - 4px);
								bottom:-18px;
								display:block;
								width:0;
								height:0;
								border:8px solid transparent;
								border-top:8px solid var(--error);
							}

							&:has(:empty){
								display:none;
							}

							s{
								font-size:1.4rem;
								font-weight:400;
								color:var(--error);
								text-decoration:line-through;

								span{
									color:var(--error);
								}
							}
						}

						&>div{
							display:flex;
							align-items:end;

							/* PRICE -----------------------------------------*/
							#price{
								margin-right:.8rem;
								font-size:2.4rem;
								font-weight:700;
								text-align:right;

								span{
									&:first-child{
										font-size:1.8rem;
										font-weight:700;
									}

									&:last-child{
										margin-left:.2rem;
										font-size:1.2rem;
										font-weight:400;
									}
								}
							}

							/* POINT -----------------------------------------*/
							#point{
								font-size:1.2rem;

								span{
									font-size:1rem;
								}

								&:empty{
									display:none;
								}
							}	
						}
					}

					/* NUMBER OF TYPE ----------------------------------------*/
					.num-item{
						display:flex;
						align-items:center;
						justify-content:space-between;

						&>p{
							margin-right:.8rem;
							font-size:1.4rem;
						}

						.num-of-item{
							display:flex;
							border-radius:0 .8rem .8rem 0;
							align-items:center;
							flex:1;
							justify-content:center;

							p{
								&:nth-child(2){
									margin:0 .8rem;
									font-size:1.4rem;
								}

								&:not(:nth-child(2)){
									transition:transform .1s ease-in-out;

									&::before{
										display:block;
										font-family:'Material Symbols Outlined';
										font-variation-settings:'FILL' 1, 'wght' 100, 'GRAD' 0;
										font-size:3.8rem;
										color:var(--accent);
									}
								}

								&:nth-child(1)::before{
									content:'remove_circle';
								}

								&:nth-child(3)::before{
									content:'add_circle'
								}

								&.limit::before{
									color:#ddd;
								}
							}
						}	
					}
				}

				/* SUB SELECTER ----------------------------------------------*/
				.sub-select{
					display:flex;
					margin:2.4rem 0;
					padding:0 2.4rem;
					overflow-x:auto;

					&:empty{
						display:none;
					}

					li{
						position:relative;
						margin-right:.8rem;
						margin:0 .8rem .8rem 0;
						width:calc((100vw - 6.4rem) / 3);
						border:2px solid var(--gray);
						border-radius:.8rem;
						background:var(--back);

						&:last-child{
							margin-right:0;
						}

						label{
							display:flex;
							padding:.8rem;
							border-radius:.8rem;
							flex-wrap:wrap;
							overflow:hidden;
							cursor:pointer;

							div{
								background:var(--gray);
							}

							img{
								width:100%;
								height:auto;
								object-fit:contain;
							}

							p{
								margin-top:.8rem;
								font-size:1.2rem;
							}
						}

						input{
							&:disabled+label{
							filter:brightness(0.7);
							cursor:auto;

							img{
								filter:grayscale(1);
							}
						}
					}

					&:has(input:checked+label){
					border:2px solid var(--accent);
					}

					&:has(input:disabled+label){
					border:2px solid #ddd;
					background:#ddd;
					}
					}
				}

				/* ORDER PLACEMENT -------------------------------------------*/
				.stock-order{
					margin:0 2.4rem 2.4rem;
					font-size:1.4rem;
					&:empty{
						display:none;
					}
				}

				/* CART IN ---------------------------------------------------*/
				.button-cart{
					display:flex;
					margin:0 2.4rem;
					padding:2rem 1.6rem;
					width:calc(100% - 4.8rem);
					color:var(--back);
					background:var(--cart);
					border-radius:.8rem;
					align-items:center;
					justify-content:center;
					cursor:pointer;

					span{
						line-height:1.5;
						font-size:1.8rem;
						color:var(--back);

						b{
							font-size:1.8rem;
							font-weight:400;
							color:var(--back);
						}
					}

					&::before{
						content:'shopping_bag';
						display:block;
						margin-right:.8rem;
						font-family:'Material Symbols Outlined';
						font-variation-settings:'wght' 100, 'GRAD' 0;
						font-size:2.4rem;
						animation:balloon .3s ease-in-out 3s infinite;
					}

					&:disabled{
						background:var(--gray);
					}
				}
			}

			/* DELIVERY DAYS -------------------------------------------------*/
			.delivery-date{
				display:flex;
				/*padding:.8rem 1.6rem 1rem;*/
				padding: 1.4rem 1.6rem;
				background:var(--gray);
				border: 1px solid #ebebeb;
				background: #fcf9f8;
				border-radius: 5px;
				margin: 15px;
				align-items:center;
				justify-content:center;
				flex-wrap:wrap;

				.text-form2{
					display:flex;
					width:10rem;
					align-items:center;

					p{
						margin-bottom:2px;
						font-size:1.8rem;
					}

					input[type='tel']{
						padding:.4rem;
						width:100%;
						height:2rem;
						font-size:1.4rem;
						border-bottom:1px solid var(--accent);
						border-radius:0;
						text-align: center;
					}
				}

				&>p{
					display:flex;
					margin-left:1.6rem;
					font-size:1.4rem;
					align-items:center;
				}

				#date{
					display:flex;
					margin:.8rem 0 0;
					width:100%;
					font-size:1.6rem;
					align-items:flex-end;
					justify-content:center;

					&:empty{
						display:none;
					}

					span{
						margin:0 .4rem;
						font-size:1.8rem;
						font-weight:600;
						color:var(--error);

						span{
							margin:0;
							font-size:1rem;
						}
					}

					&::before{
						content:'local_shipping';
						margin:0 .2rem -.5rem 0;
						font-family:'Material Symbols Outlined';
						font-variation-settings:'wght' 200, 'GRAD' 0;
						font-size:2.4rem;
						color:var(--accent);
					}
				}

				&>p.change{
					&::before{
						animation:bubu .3s linear 3 forwards;
					}
				}
			}

			/* EXPLANATION ---------------------------------------------------*/
			.explanation{
				margin:2.4rem;
				line-height:2;
				font-size:1.4rem;
			}
		}
	}


	/*----------------------------------1.2.0.0 ---------SUB ECPLANATION ARIA */
	.sub-explanation{
		margin:4.8rem 2.4rem 2.4rem;

		/* HEADLINE ----------------------------------------------------------*/
		summary{
			display:flex;
			margin-bottom:-.8rem;
			padding-bottom:.8rem;
			font-size:1.8rem;
			border-bottom:1px solid var(--accent);
			align-items:center;
			justify-content:space-between;

			h2{
				font-size:1.8rem;
			}

			&::after{
				content:'stat_1';
				margin-left:2.4rem;
				font-family:'Material Symbols Outlined';
				font-variation-settings:'wght' 400, 'GRAD' 0;
				font-size:2.4rem;
				color:var(--accent);
				transform:rotate(180deg);
				transition:transform .1s linear;
			}
		}

		/* DETAIL ------------------------------------------------------------*/
		div{
			margin-top:2.4rem;
			line-height:2;
			font-size:1.4rem;

			p{
				margin-top:2.4rem;
				line-height:2;
				font-size:1.4rem;

				strong{
					font-size:1.4rem;
					font-weight:400;
				}

				&:first-child{
					margin-top:0;
				}

				&.annotation{
					margin-top:1.2rem;
				}
			}

			h3{
				margin-top:2.4rem;
				font-size:1.6rem;

				&+p{
					margin-top:1.2rem;
				}
			}

			table{
				th{
					padding:.8rem;
					width:30%;
					font-weight:400;
					text-align:left;
				}

				td{
					padding:.8rem;
					width:70%;
				}
			}
		}

		&[open]{
			summary{
				border-bottom:none;
				line-height: 3.0rem;

				&::after{
					transform:rotate(0deg)
				}
			}
		}
	}


	/*----------------------------------1.3.0.0 -----REVIEW & EXTRA INFO AREA */
	section{
		margin-top:8rem;

		h2{
			font-size:1.8rem;
			text-align:center;
		}

		/* REVIEW WRITE ------------------------------------------------------*/
		#write-mode{
			margin-top:1.6rem;

			summary{
				display:flex;
				font-size:1.2rem;
				align-items:center;
				justify-content:center;

				&::after{
					content:'stylus';
					margin-left:.8rem;
					padding:.4rem;
					font-family:'Material Symbols Outlined';
					font-variation-settings:'fill' 1, 'wght' 200, 'GRAD' 0;
					font-size:1.6rem;
					color:var(--back);
					border-radius:50%;
					background:var(--accent);
				}
			}

			.review-form{
				display:grid;
				padding:2.4rem;
				grid-template-rows:0fr;
				transition:grid-template-rows 0.5s;
			}

			&[open]{
				margin-bottom:0;

				.review-form{
					grid-template-rows:1fr;

					.form-group{
						h2{
							margin-top:1.6rem;
							font-size:1.4rem;
						}

						/* EVALUATION FORM -----------------------------------*/
						.eva-form{
							display:flex;
							align-items:center;
							justify-content:center;

							p:nth-child(1){
								display:block;
								margin-right:1.6rem;
								padding:.4rem;
								border-radius:50%;
								background:var(--accent);

								&:before{
									content:'thumb_down';
									font-family:'Material Symbols Outlined';
									font-variation-settings:'wght' 400, 'GRAD' 0;
									font-size:1.6rem;
									color:var(--back);
								}
							}

							p:nth-child(2){
								display:flex;
								align-items:center;

								i{
									font-family:'Material Symbols Outlined';
									font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
									font-size:3.6rem;
									font-style:normal;
									color:var(--gray);

									&.active{
										color:#f9bf3b;
									}
								}
							}	

							p:nth-child(3){
								display:block;
								margin-left:1.6rem;
								padding:.4rem;
								border-radius:50%;
								background:var(--accent);

								&:before{
									content:'thumb_up';
									font-family:'Material Symbols Outlined';
									font-variation-settings:'wght' 400, 'GRAD' 0;
									font-size:1.6rem;
									color:var(--back);
								}	
							}
						}

						/* RADIO FORM ----------------------------------------*/
						.radio-form{
							display:flex;
							margin-top:1.6rem;
							justify-content:space-between;
							flex-wrap:wrap;

							li{
								width:calc(50% - .8rem);

								&:nth-child(n+3){
									margin-top:.8rem;
								}

								& label{
									display:flex;
									padding:1.4rem .8rem;
									font-size:1.4rem;
									background:var(--gray);
									border-radius:.8rem;
									align-items:center;
									justify-content:center;
									cursor:pointer;
								}

								& input{
									&:checked+label{
										padding:.8rem;
										color:var(--back);
										background:var(--accent);

										&::after{
											content:'done';
											display:block;
											margin-left:.8rem;
											font-family:'Material Symbols Outlined';
											font-size:2.4rem;
										}
									}

									&:disabled+label{
										color:var(--sub_text);
									}
								}
							}

							&.error-form{
								border:none;

								label{
									background:var(--error);
									color:var(--back);
								}
							}
						}

						/* INPUT FORM ----------------------------------------*/
						.text-form{
							margin-top:2.4rem;

							input[type='text']{
								background:var(--back);
							}

							&:focus-within p:not(.error),
							input:autofill+p:not(.error),
							input:not(:placeholder-shown)+p:not(.error){
								background:linear-gradient(180deg, var(--surface) 60%, var(--back) 60%)
							}

							&.error-form:focus-within::after{
								content:none;
							}					
						}

						/* TEXT AREA FORM ------------------------------------*/
						.area-form{
							display:block;
							position:relative;
							margin-top:2.4rem;
							width:100%;
							border:1px solid var(--gray);
							border-radius:.8rem;

							p{
								position:absolute;
								margin-top:0;
								top:1.6rem;
								left:1.6rem;
								padding:0 .4rem;
								line-height:1;
								font-size:1.4rem;
								transition:top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
							}

							textarea{
								padding:1.6rem;
								width:100%;
								height:6em;
								line-height:1.5;
								font-size:1.4rem;
								border-radius:.8rem;
								background:var(--back);
							}

							&:focus-within{
								border:2px solid var(--accent);

								p{
									font-weight:bold;
									color:var(--accent);
								}
							}

							&:focus-within p,
							textarea:not(:placeholder-shown)+p:not(.error){
								top:-.8rem;
								left:.8rem;
								font-size:1rem;
								background:linear-gradient(180deg, var(--surface) 60%, var(--back) 60%)
							}
						}

						/* ERROR FORM ----------------------------------------*/
						.error-form{
							&:not(.radio-form){
								border:2px solid var(--error);

								&::after{
									content:'error';
									position:absolute;
									top:50%;
									right:1.6rem;
									font-family:'Material Symbols Outlined';
									font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
									font-size:2.4rem;
									color:var(--error);
									transform:translateY(-50%);
								}

								&:focus{
									border:2px solid var(--accent);
								}

								&:not(.select-form) p{
									color:var(--error);
								}
							}
						}
					}

					.error{
						margin-top:.8rem;
						font-size:1.2rem;
						color:var(--error);

						&:empty{
							display:none;
						}
					}

					.button-fill{
						margin-bottom:0;
					}
				}

				summary.button-border{
					border:2px solid var(--back);

					&::after{
						transform:rotate(180deg);
					}
				}
			}
		}

		/* REVIEW LIST -------------------------------------------------------*/
		.review-list{
			padding:2.4rem;

			&:has(ul:empty){
				display:none;
			}

			li{
				position:relative;
				margin-bottom:1.6rem;
				padding:1.6rem;
				border-radius:.8rem;
				background:var(--back);
				overflow:hidden;

				&::before{
					content:'sentiment_content';
					position:absolute;
					top:-10rem;
					right:-10rem;
					display:block;
					margin-right:.8rem;
					font-family:'Material Symbols Outlined';
					font-variation-settings:'wght' 400, 'GRAD' 0;
					font-size:30rem;
					color:var(--gray);
					transform:rotate(-45deg);
					opacity:.3;
				}

				&[data-rate='1']::before{
					content:'sentiment_stressed';
				}

				&[data-rate='2']::before{
					content:'sentiment_sad';
				}

				&[data-rate='3']::before{
					content:'sentiment_content';
				}

				&[data-rate='4']::before{
					content:'sentiment_satisfied';
				}

				&[data-rate='5']::before{
					content:'sentiment_excited';
				}

				&:last-child{
					margin:0;
				}

				.r-twin{
					position:relative;
					display:flex;
					margin-bottom:.8rem;
					align-items:center;
					z-index:2;

					&>div:first-child{
						margin-right:.8rem;
						width:3rem;
						height:3rem;
						border:1px solid var(--text);
						border-radius:50%;
						overflow:hidden;

						img{
							width:100%;
							height:100%;
							object-fit:cover;	
						}
					}

					.star{
						margin:0;
						justify-content:flex-start;

						p{
							font-size:1.2rem;
						}
					}
				}

				p{
					position:relative;
					z-index:2;

					&.r-date{
						font-size:1rem;
						text-align:right;
					}

					&.r-name{
						margin-bottom:.4rem;
						font-size:1rem;
					}

					&.r-i-name{
						display:none;
						margin-left:1.6rem;
						font-size:1rem;

						&::after{
							content:' 購入者';
						}
					}

					&.r-subject{
						margin-bottom:1rem;
						font-size:1.3rem;
					}

					&.r-body{
						font-size:1.2rem;
						line-height:1.7;
					}

					&.r-good{
						display:flex;
						margin-top:.8rem;
						align-items:center;
						justify-content:flex-end;

						.good{
							font-style:normal;

							&::before{
								content:'recommend';
								display:block;
								margin-right:.4rem;
								font-family:'Material Symbols Outlined';
								font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
								font-size:1.8rem;
								color:var(--error);
							}
						}

						span{
							font-size:1rem;
						}
					}
				}
			}

			.button-fill{
				margin-bottom:0;
			}
		}

		/* RECOMMEND AREA ----------------------------------------------------*/
		.card-list-min{
			display:flex;
			margin: 3.5rem 2.4rem 0;
			flex-wrap:wrap;

			li{
				margin-right:.8rem;
				width:calc((100% - 1.6rem) / 3);

				&:nth-child(3n+3){
					margin-right:0;
				}

				a{
					position:relative;

					.item-thumb{
						img{
							width:100%;
							height:auto;
						}
					}

					.item-descript{
						padding:.8rem;

						.item-name{
							display:-webkit-box;
							height:3.119rem;
							line-height:1.3;
							font-size:1.2rem;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;
							overflow:hidden;
						}

						.item-price{
							margin-top:.8rem;
							font-size:1.4rem;
							text-align:right;

							span{
								&:first-of-type{
									font-size:1rem;
								}

								&:last-of-type{
									font-size:.8rem;
								}
							}
						}
					}

					.more{
						display:none;
					}
				}
			}
		}

		/* TAG AREA ----------------------------------------------------------*/
		&.tag-area{
			.tag{
				display:flex;
				margin: 2.4rem 2.4rem 5.5rem;
				flex-wrap:wrap;

				li{
					/*margin-right:.8rem;*/
					font-size: 1.4rem;
                    background-color: #f8f8f8;
                    border: 1px solid #e1e1e1;
                    border-radius: 8px;
                    margin: 3px 2px;
                    padding: 2px 4px;

					a{
						display:flex;
						padding:.8rem;
						font-size:1.4rem;
						align-items:center;

						&::before{
							content:'#';
							display:block;
							margin-right:.2rem;
							font-size:1.3rem;
						}
					}
				}
			}
		}

		/* CATEGORY AREA -----------------------------------------------------*/
		.list-category{
			display:flex;
			margin:2.4rem;
			flex-wrap:wrap;

			li{
				margin-right:.8rem;
				width:calc(50% - .4rem);
				font-size:1.4rem;
	
				&:nth-child(2n+2){
					margin-right:0;
				}
	
				a{
					display:flex;
					padding:.8rem;
					font-size:1.4rem;
					align-items:center;
	
					&::before{
						content:'home_storage';
						display:flex;
						margin-right:.8rem;
						width:2.4rem;
						height:2.4rem;
						font-family:'Material Symbols Outlined';
						font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
						font-size:1.8rem;
						border-radius:50%;
						background:var(--back);
						align-items:center;
						justify-content:center;
					}
	
					&.beauty::before{
						content:'self_care';
					}
	
					&.diet::before{
						content:'directions_run';
					}
	
					&.tableware::before{
						content:'local_bar';
					}
	
					&.kitchen::before{
						content:'skillet';
					}
				}
			}
		}
	}

	/* SHARE AREA ------------------------------------------------------------*/
	.share{
		display:flex;
		margin:2.4rem 2.4rem -5.6rem;
		align-items:center;

		&>*{
			margin-right:.8rem;
		}
	}

	/* SERACH AREA -----------------------------------------------------------*/
	.sub-search{
		position:relative;

		.search-form{
			margin: 5.5rem 2.4rem 2.4rem;
			width:calc(100% - 4.8rem);
			overflow:unset;

			input[type='search']{
				padding:.9rem 1.6rem;
			}

			&:has(+.suggest2:not(:empty)){
				border-radius:.8rem .8rem 0 0;
			}
		}

		/* SUGGEST -----------------------------------------------------------*/
		.suggest2{
			display:none;
			width:100%;

			&:not(:empty){
				display:block;
				position:absolute;
				top:3.6rem;
				left:2.4rem;
				width:calc(100% - 4.8rem);
				border:2px solid var(--accent);
				border-top:none;
				border-radius:0 0 .8rem .8rem;
				background:var(--back);

				li{
					display:flex;
					padding:.9rem 1.6rem .9rem .8rem;
					border-top:1px solid var(--gray);
					align-items:center;

					&::before{
						content:'query_stats';
						display:block;
						font-family:'Material Symbols Outlined';
						font-variation-settings:'wght' 100, 'GRAD' 0;
						font-size:24px;
					}

					&.item::before{
						content:'pageview';
					}

					&.word::before{
						content:'search';
					}
				}
			}
		}
	}

	#shipping{
		display:flex;
		align-items:center;

		&::before{
			content:'package_2';
			margin-right:.2rem;
			font-family:'Material Symbols Outlined';
			font-variation-settings:'wght' 200, 'GRAD' 0;
			font-size:2.4rem;
			color:var(--accent);
		}
	}

	.item-in{
	position:absolute;
	top:.8rem;
	left:.8rem;
	width:calc(((100vw - 6.4rem) / 3) - 1.6rem);
	height:calc(((100vw - 6.4rem) / 3) - 1.6rem);
	border:1px solid var(--cart);
	background:var(--cart);
	transition:all .1s ease-in-out;
	overflow:hidden;
	z-index:100;

	img{
		width:100%;
		height:100%;
		object-fit:contain;
		animation:cartActImg .2s ease-in forwards .2s;
	}
	}
}


/*--------------------------------------1.4.0.0 --------------------ANIMATION */
@keyframes bubu{
	0%{
	  transform:rotate(0);
  }
   25%{
	  transform:rotate(7deg);
  }
   50%{
	  transform:rotate(0);
  }
   75%{
	  transform:rotate(-7deg);
  }
  100%{
	  transform:rotate(0);
  }
}

@keyframes balloon{
	0%{
	  transform:scale(1);
  }

  100%{
	  transform:scale(1.2);
  }
}

@keyframes cartActImg{
	0%{
		transform:scale(1);
		border-radius:0;
	}

	2%{
		border-radius:50%;
	}

	100%{
		border-radius:50%;
		transform:scale(0);
	}
}


/*------------------------------------------------------------------------------
// 2.0.0.0 WIDTH  667px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:667px){
	#item{
		/* BREAD CRUMB -------------------------------------------------------*/
		.breadcrumb{
			padding:.8rem 2.4rem;

			li{
				font-size:1.1rem;

				&:not(:last-child)::after{
					margin:0 .8rem;
					font-size:1.1rem;
				}

				a{
					font-size:1.1rem;
				}
			}
		}

		h1{
			ruby{
				font-size:2.4rem;

				rt{
					font-size:1.2rem;
				}
			}
		}


		/*------------------------------1.1.0.0 --------------ITEM BASIC AREA */
		.item-wrapper{
			display:flex;
			justify-content:space-between;

			&>div{
				position:relative;
				width:calc(50% - 1.2rem);

				/* SLIDER THUMBNAIL ------------------------------------------*/
				#slider{
					ul{
						li{
							width:calc((100vw / 2) - 1.2rem);
							height:calc((100vw / 2) - 1.2rem);
							flex:0 0 calc((100vw / 2) - 1.2rem);
						}
					}

					p{
						/* FAVORITE ------------------------------------------*/
						&#wish{
							margin-left:2.4rem;

							&::before{
								font-size:3.2rem;
							}
						}
					}
				}

				/* MINI THUMBNAIL --------------------------------------------*/
				.min-image{
					margin:2.4rem 0 0 6.4rem;
					padding:0;
					flex-wrap:wrap;
					overflow-x:unset;
					white-space:unset;

					li{
						margin:.8rem;
						width:calc((((100vw / 2) - 7.6rem) - 4.8rem)  / 3 );
						height:calc((((100vw / 2) - 7.6rem) - 4.8rem)  / 3 );
						border:1px solid transparent;
						background:var(--gray);
						cursor:pointer;

						&.current{
							border:1px solid var(--accent);
						}

						img{
							width:100%;
							height:100%;
							object-fit:contain;
						}
					}
				}

				/* EVALUATION STAR AREA --------------------------------------*/
				.star{
					margin:0 6.4rem 0 0;

					/* REVIW COUNT -------------------------------------------*/
					.eva-count{
						margin-left:.4rem;
						padding:.2rem .6rem;
						font-size:1rem;
						border-radius:.4rem;

						&::before{
							padding-right:.4rem;
							font-size:1.4rem;
						}
					}
				}

				/* CATCHCOPY AREA --------------------------------------------*/
				.catchcopy{
					margin:1.6rem 6.4rem 0 0;
				}

				/* SHOPPING AREA ---------------------------------------------*/
				.shopping-area{
					margin:2.4rem 6.4rem 2.4rem 0;

					.item-select{
						margin:1.6rem 0;
					}

					/* SUB SELECTER ----------------------------------------------*/
					.sub-select{
						padding:0;

						li{
							margin-right:.8rem;
							margin:0 .8rem .8rem 0;
							width:calc((50vw - 6rem) / 3 - .8rem);

							label{
								padding:.8rem;
								border-radius:.8rem;

								div{
								}

								p{
									margin-top:.8rem;
									font-size:1.1rem;
								}
							}
						}
					}

					/* CART IN ---------------------------------------------------*/
					.button-cart{
						margin:0;
						width:100%;
					}
				}

				/* DELIVERY DAYS ---------------------------------------------*/
				.delivery-date{
					padding:.8rem 6.4rem 1rem 1.6rem;
				}

				/* EXPLANATION -----------------------------------------------*/
				.explanation{
					margin:2.4rem 6.4rem 2.4rem 0;
				}
			}
		}


		/*------------------------------1.2.0.0 ---------SUB ECPLANATION ARIA */
		.sub-explanation{
			margin:4.8rem 6.4rem 2.4rem;

			/* HEADLINE ----------------------------------------------------------*/
			summary{
				margin-bottom:-.8rem;
				font-size:2.2rem;

				h2{
					font-size:2.2rem;
				}
			}

			/* DETAIL ------------------------------------------------------------*/
			div{
				margin-top:2.4rem;
			}
		}


		/*------------------------------1.3.0.0 -----REVIEW & EXTRA INFO AREA */
		section{
			margin-top:8rem;

			h2{
				font-size:2.4rem;
			}

			/* REVIEW WRITE --------------------------------------------------*/
			#write-mode{
				margin-top:1.6rem;

				summary{
					font-size:1.2rem;

					&::after{
						margin-left:.8rem;
						padding:.4rem;
						font-size:1.6rem;
					}
				}

				.review-form{
					padding:2.4rem 14rem;
				}

				&[open]{
					.review-form{
						.form-group{
							h2{
								margin-top:1.6rem;
								font-size:1.4rem;
							}

							/* EVALUATION FORM ---------------------------------------*/
							.eva-form{
								p:nth-child(1){
									margin-right:1.6rem;
									padding:.4rem;

									&:before{
										font-size:1.6rem;
									}
								}

								p:nth-child(2){
									i{
										font-size:3.6rem;
									}
								}	

								p:nth-child(3){
									margin-left:1.6rem;
									padding:.4rem;

									&:before{
										font-size:1.6rem;
									}	
								}
							}

							/* RADIO FORM --------------------------------------------*/
							.radio-form{
								margin-top:1.6rem;

								li{
									width:calc(50% - .8rem);

									&:nth-child(n+3){
										margin-top:.8rem;
									}

									& label{
										padding:1.4rem .8rem;
										font-size:1.4rem;
										border-radius:.8rem;
									}

									& input{
										&:checked+label{
											padding:.8rem;

											&::after{
												margin-left:.8rem;
												font-size:2.4rem;
											}
										}
									}
								}
							}

							/* INPUT FORM --------------------------------------------*/
							.text-form{
								margin-top:2.4rem;
							}

							/* TEXT AREA FORM ----------------------------------------*/
							.area-form{
								margin-top:2.4rem;
								border-radius:.8rem;

								p{
									top:1.6rem;
									left:1.6rem;
									padding:0 .4rem;
									font-size:1.4rem;
								}

								textarea{
									padding:1.6rem;
									height:6em;
									font-size:1.4rem;
									border-radius:.8rem;
								}

								&:focus-within p,
								textarea:not(:placeholder-shown)+p:not(.error){
									top:-.8rem;
									left:.8rem;
									font-size:1rem;
								}
							}

							/* ERROR FORM --------------------------------------------*/
							.error-form{
								&:not(.radio-form){
									&::after{
										right:1.6rem;
										font-size:2.4rem;
									}
								}
							}
						}

						.error{
							margin-top:.8rem;
							font-size:1.2rem;
						}
					}
				}
			}

			/* REVIEW LIST ---------------------------------------------------*/
			.review-list{
				padding:2.4rem 9.6rem;

				li{
					margin-bottom:1.6rem;
					padding:1.6rem;
					border-radius:.8rem;

					&::before{
						top:-10rem;
						right:-10rem;
						margin-right:.8rem;
						font-size:30rem;
					}

					.r-twin{
						margin-bottom:.8rem;

						&>div:first-child{
							margin-right:.8rem;
							width:3rem;
							height:3rem;
						}

						.star{
							p{
								font-size:1.2rem;
							}
						}
					}

					p{
						&.r-date{
							font-size:1rem;
						}

						&.r-name{
							margin-bottom:.4rem;
							font-size:1rem;
						}

						&.r-i-name{
							margin-left:1.6rem;
							font-size:1rem;
						}

						&.r-subject{
							margin-bottom:1rem;
							font-size:1.3rem;
						}

						&.r-body{
							font-size:1.2rem;
						}

						&.r-good{
							margin-top:.8rem;

							.good{
								&::before{
									margin-right:.4rem;
									font-size:1.8rem;
								}
							}

							span{
								font-size:1rem;
							}
						}
					}
				}
			}

			/* RECOMMEND AREA ------------------------------------------------*/
			.card-list-min{
				margin:2.4rem 6.4rem;

				li{
					width:calc((100% - 4rem) / 6);

					&:nth-child(3n+3){
						margin-right:.8rem;
					}

					&:last-child{
						margin-right:0;
					}

					a{
						.item-descript{
							padding:.8rem 0;
						}
					}
				}
			}

			/* TAG AREA ------------------------------------------------------*/
			&.tag-area{
				display:flex;
				margin:8rem 6.4rem 0;
				justify-content:space-between;

				div{
					width:calc((100% - 3.2rem) / 3);

					&:last-child{
						margin-right:0;
					}

					h2{
						padding-bottom:1.2rem;
						font-size:1.8rem;
						border-bottom:1px solid var(--gray);
					}

					.tag{
						margin:1.2rem 0 0;
					}
				}
			}

			/* CATEGORY AREA -------------------------------------------------*/
			.list-category{
				margin:2.4rem 6.4rem;

				li{
					width:calc((100% - 1.6rem) / 3);

					&:nth-child(2n+2){
						margin-right:.8rem;
					}

					&:nth-child(3n+3){
						margin-right:0;
					}

					a{
						font-size:1.6rem;

						&::before{
							width:3.2rem;
							height:3.2rem;
							font-size:2.4rem;
						}
					}
				}
			}
		}

		/* SHARE AREA --------------------------------------------------------*/
		.share{
			margin:2.4rem 6.4rem;
		}

		/* SERACH AREA -------------------------------------------------------*/
		.sub-search{
			.search-form{
				margin:2.4rem 6.4rem;
				width:calc(100% - 12.8rem);
			}
		
			/* SUGGEST -------------------------------------------------------*/
			.suggest2{
				&:not(:empty){
					left:6.4rem;
					width:calc(100% - 12.8rem);
				}
			}
		}

		#shipping{
			&::before{
				margin-right:.2rem;
				font-size:2.4rem;
			}
		}
	
		.item-in{
			width:calc((((100vw / 2) - 6rem) / 3) - 2.4rem);
			height:calc((((100vw / 2) - 6rem) / 3) - 2.4rem);
		}
	}
}


/*------------------------------------------------------------------------------
// 3.0.0.0 WIDTH  960px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:960px){
	/*----------------------------------1.4.0.0 --------------------ANIMATION */
	#item{
		/* BREAD CRUMB -------------------------------------------------------*/
		.breadcrumb{
			padding:1rem 3rem;

			li{
				font-size:1.4rem;

				&:not(:last-child)::after{
					margin:0 1rem;
					font-size:1.4rem;
				}

				a{
					font-size:1.4rem;
				}
			}
		}

		h1{
			padding:3rem;

			ruby{
				font-size:3rem;

				rt{
					font-size:1.5rem;
				}
			}
		}


		/*------------------------------1.1.0.0 --------------ITEM BASIC AREA */
		.item-wrapper{
			margin:auto;
			width:96rem;

			&>div{
				position:relative;
				width:46.5rem;

				/* SLIDER THUMBNAIL ------------------------------------------*/
				#slider{
					ul{
						li{
							width:46.5rem;
							height:46.5rem;
							flex:0 0 46.5rem;
						}
					}

					p{
						/* THUMB NUMBER --------------------------------------*/
						&:not(#wish){
							bottom:2rem;
							padding:1rem 1rem 1rem 3rem;
							font-size:1.5rem;
						}

						/* FAVORITE ------------------------------------------*/
						&#wish{
							margin-left:3rem;

							&::before{
								font-size:4rem;
							}
						}
					}
				}

				/* MINI THUMBNAIL --------------------------------------------*/
				.min-image{
					margin:3rem 0 0 calc(8rem - (100vw - 96rem));

					li{
						margin:1rem;
						width:10.8rem;
						height:10.8rem;
					}
				}

				/* EVALUATION STAR AREA --------------------------------------*/
				.star{
					margin:0 calc(8rem - (100vw - 96rem)) 0 0;

					p{
						&:nth-child(1){
							font-size:2.25rem;
						}

						&:nth-child(2){
							margin-left:.5rem;
							font-size:1.5rem;
						}
					}

					/* REVIW COUNT -------------------------------------------*/
					.eva-count{
						margin-left:.5rem;
						padding:.25rem .75rem;
						font-size:1.25rem;
						border-radius:.4rem;

						&::before{
							padding-right:.5rem;
							font-size:1.75rem;
						}
					}
				}

				/* CATCHCOPY AREA --------------------------------------------*/
				.catchcopy{
					margin:2rem calc(8rem - (100vw - 96rem)) 0 0;
					font-size:1.75rem;
				}

				/* SHOPPING AREA ---------------------------------------------*/
				.shopping-area{
					margin:3rem calc(8rem - (100vw - 96rem)) 3rem 0;

					.item-select{
						margin:2rem 0;

						.price-area{
							/* ASKING PRICE ----------------------------------*/
							#asking-price{

								&::before{
								}

								&:after{
								}

								&:has(s:empty){
								}

								s{
									span{
									}
								}
							}

							&>div{
								/* PRICE -------------------------------------*/
								#price{
									margin-right:1rem;
									font-size:3rem;

									span{
										&:first-child{
											font-size:2.25rem;
										}

										&:last-child{
											margin-left:.25rem;
											font-size:1.5rem;
										}
									}
								}

								/* POINT -------------------------------------*/
								#point{
									font-size:1.5rem;

									span{
										font-size:1.25rem;
									}
								}
							}
						}

						/* NUMBER OF TYPE ------------------------------------*/
						.num-item{
							&>p{
								margin-right:1rem;
								font-size:1.75rem;
							}

							.num-of-item{
								p{
									&:nth-child(2){
										margin:0 1rem;
										font-size:1.75rem;
									}

									&:not(:nth-child(2)){
										&::before{
											font-size:4.75rem;
										}
									}
								}
							}	
						}
					}

					/* SUB SELECTER ------------------------------------------*/
					.sub-select{
						margin:3rem 0;

						li{
							margin:0 1rem 1rem 0;
							width:12.5rem;

							label{
								padding:1rem;

								p{
									margin-top:1rem;
									font-size:1.4rem;
								}
							}
						}
					}

					/* CART IN -----------------------------------------------*/
					.button-cart{
						padding:2.5rem 2rem;

						span{
							font-size:2.25rem;

							b{
								font-size:2.25rem;
							}
						}

						&::before{
							margin-right:1rem;
							font-size:3rem;
						}
					}
				}

				/* DELIVERY DAYS ---------------------------------------------*/
				.delivery-date{
					padding:1rem 8rem 1.25rem 2rem;

					.text-form2{
						width:10rem;

						p{
							margin-bottom:.25rem;
							font-size:2.25rem;
						}

						input[type='tel']{
							padding:.5rem;
							height:2.5rem;
							font-size:1.75rem;
						}
					}

					&>p{
						margin-left:2rem;
						font-size:1.75rem;
					}

					#date{
						margin-top:1rem;
						font-size:2rem;

						span{
							margin:0 .5rem;
							font-size:2.25rem;

							span{
								font-size:1.25rem;
							}
						}

						&::before{
							font-size:3rem;
						}
					}
				}

				/* EXPLANATION ---------------------------------------------------*/
				.explanation{
					margin:3rem calc(8rem - (100vw - 96rem)) 3rem 0;
					font-size:1.75rem;
				}
			}
		}


		/*------------------------------1.2.0.0 ---------SUB ECPLANATION ARIA */
		.sub-explanation{
			margin:6rem auto 3rem;
			width:80rem;

			/* HEADLINE ------------------------------------------------------*/
			summary{
				margin-bottom:-1rem;
				padding-bottom:1rem;
				font-size:2.75rem;

				h2{
					font-size:2.75rem;
				}

				&::after{
					margin-left:3rem;
					font-size:3rem;
				}
			}

			/* DETAIL --------------------------------------------------------*/
			div{
				margin-top:3rem;
				font-size:1.75rem;

				p{
					margin:3rem 8rem;
					font-size:1.75rem;
				}
			}
		}


		/*------------------------------2.3.0.0 -----REVIEW & EXTRA INFO AREA */
		section{
			margin:10rem auto 0;
			width:96rem;

			h2{
				font-size:3rem;
			}

			#write-mode{
				margin-top:2rem;

				summary{
					font-size:1.5rem;

					&::after{
						margin-left:1rem;
						padding:.5rem;
						font-size:2rem;
					}
				}

				.review-form{
					padding:3rem 17.5rem;
				}

				&[open]{
					.review-form{
						.form-group{
							h2{
								margin-top:2rem;
								font-size:1.75rem;
							}

							/* EVALUATION FORM ---------------------------------------*/
							.eva-form{
								p:nth-child(1){
									margin-right:2rem;
									padding:.5rem;

									&:before{
										font-size:2rem;
									}
								}

								p:nth-child(2){
									i{
										font-size:4.5rem;
									}
								}	

								p:nth-child(3){
									margin-left:2rem;
									padding:.5rem;

									&:before{
										font-size:2rem;
									}	
								}
							}

							/* RADIO FORM --------------------------------------------*/
							.radio-form{
								margin-top:2rem;

								li{
									width:calc(50% - 1rem);

									&:nth-child(n+3){
										margin-top:1rem;
									}

									label{
										padding:1.75rem 1rem;
										font-size:1.75rem;
										border-radius:1rem;
									}

									input{
										&:checked+label{
											padding:1rem;

											&::after{
												margin-left:1rem;
												font-size:3rem;
											}
										}
									}
								}
							}

							/* INPUT FORM --------------------------------------------*/
							.text-form{
								margin-top:3rem;
							}

							/* TEXT AREA FORM ----------------------------------------*/
							.area-form{
								margin-top:3rem;
								border-radius:1rem;

								p{
									top:2rem;
									left:2rem;
									padding:0 .5rem;
									font-size:1.75rem;
								}

								textarea{
									padding:2rem;
									height:6em;
									font-size:1.75rem;
									border-radius:1rem;
								}

								&:focus-within p,
								textarea:not(:placeholder-shown)+p:not(.error){
									top:-1rem;
									left:1rem;
									font-size:1.25rem;
								}
							}

							/* ERROR FORM --------------------------------------------*/
							.error-form{
								&:not(.radio-form){
									&::after{
										right:2rem;
										font-size:3rem;
									}
								}
							}
						}

						.error{
							margin-top:1rem;
							font-size:1.5rem;
						}
					}
				}
			}

			/* REVIEW LIST -------------------------------------------------------*/
			.review-list{
				padding:3rem 12rem;

				li{
					display:flex;
					margin-bottom:2rem;
					padding:2rem;
					border-radius:1rem;
					align-items:center;
					flex-wrap:wrap;

					&::before{
						top:-12.5rem;
						right:-12.5rem;
						margin-right:1rem;
						font-size:37.5rem;
					}

					.r-twin{
						margin-bottom:0;
						width:calc(25% - 2.8rem);
						flex-wrap:wrap;

						&>div:first-child{
							margin-right:1rem;
							width:3.75rem;
							height:3.75rem;
						}

						&>div:nth-child(2){
							flex:1;
						}

						.star{
							p{
								font-size:1.5rem;
							}
						}
					}

					p{
						&.r-date{
							margin-bottom:1.5rem;
							width:100%;
							font-size:1.25rem;
						}

						&.r-name{
							margin-bottom:.5rem;
							font-size:1.25rem;
						}

						&.r-i-name{
							display:block;
							margin:1.25rem 0 0;
							width:100%;
							font-size:1.25rem;
							text-align:center;
						}

						&.r-subject{
							margin-bottom:1.25rem;
							font-size:1.63rem;
						}

						&.r-body{
							font-size:1.5rem;
						}

						&.r-good{
							margin-top:1rem;

							.good{
								&::before{
									margin-right:.5rem;
									font-size:2.25rem;
								}
							}

							span{
								font-size:1.25rem;
							}
						}
					}

					&>div:last-child{
						margin-left:2.8rem;
						width:75%;
					}
				}

				.button-fill{
				}
			}

			/* RECOMMEND ITEM ----------------------------------------------------*/
			.card-list-min{
				margin:3rem auto;
				width:80rem;

				li{
					margin-right:1rem;
					width:12.5rem;

					&:nth-child(3n+3){
						margin-right:1rem;
					}

					&:last-child{
						margin-right:0;
					}

					a{
						.item-descript{
							padding:1rem 0;

							.item-name{
								height:3.9rem;
								font-size:1.5rem;
							}

							.item-price{
								margin-top:1rem;
								font-size:1.75rem;

								span{
									&:first-of-type{
										font-size:1.25rem;
									}

									&:last-of-type{
										font-size:1rem;
									}
								}
							}
						}
					}
				}
			}

			/* TAG AREA ----------------------------------------------------------*/
			&.tag-area{
				margin:10rem auto 0;
				width:80rem;

				div{
					width:calc((100% - 2.8rem) / 3);

					h2{
						padding-bottom:1.5rem;
						font-size:2.25rem;
					}

					.tag{
						margin-top:1.5rem;

						li{
							margin-right:1rem;

							a{
								padding:1rem;
								font-size:1.25rem;

								&::before{
									margin-right:.25rem;
									font-size:1.625rem;
								}
							}
						}
					}
				}
			}

			/* CATEGORY AREA -----------------------------------------------------*/
			.list-category{
				margin:3rem auto;
				width:80rem;

				li{
					margin-right:1rem;
					width:calc((100% - 2rem) / 3);

					&:nth-child(2n+2){
						margin-right:1rem;
					}

					a{
						padding:1rem;
						font-size:2rem;

						&::before{
							margin-right:1rem;
							width:4rem;
							height:4rem;
							font-size:3rem;
						}
					}
				}
			}
		}

		/* SHARE BUTTON ------------------------------------------------------*/
		.share{
			margin:3rem auto;
			width:80rem;
		}

		/* SERACH AREA -----------------------------------------------------------*/
		.sub-search{
			margin:auto;
			width:80rem;

			.search-form{
				margin:3rem auto;
				width:80rem;

				input[type='search']{
					padding:1.1rem 2rem;
					font-size:1.75rem;
				}

				p{
					top:1.1rem;
					left:3.25rem;
					font-size:1.75rem;
				}

				&:focus-within p,
				input:autofill+p,
				form:has(input:not(:placeholder-shown))+p{
					top:-.8rem;
					left:.8rem;
					font-size:1.25rem;
				}    
			}

			/* SUGGEST -----------------------------------------------------------*/
			.suggest2{
				&:not(:empty){
					top:4.4rem;
					left:0;
					width:80rem;

					li{
						padding:1.12rem 2rem 1.12rem 1rem;
						font-size:1.75rem;

						&::before{
						}

						&.item::before{
						}

						&.word::before{
						}
					}
				}
			}
		}
	}
}


/*------------------------------------------------------------------------------
// 4.0.0.0 WIDTH 1024px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
#item{
	/* BREAD CRUMB -------------------------------------------------------*/
	.breadcrumb{
		li{
			&:not(:last-child)::after{
			}

			a{
			}
		}
	}

	h1{
		ruby{
			rt{
			}
		}
	}


	/*------------------------------1.1.0.0 --------------ITEM BASIC AREA */
	.item-wrapper{
		&>div{
			/* MINI THUMBNAIL --------------------------------------------*/
			.min-image{
				margin:3rem 0 0;

				li{
					margin:.8rem;
					width:10.025rem;
					height:10.025rem;
				}
			}

			/* EVALUATION STAR AREA --------------------------------------*/
			.star{
				margin:0;
			}

			/* CATCHCOPY AREA --------------------------------------------*/
			.catchcopy{
				margin-right:0;
			}

			/* SHOPPING AREA ---------------------------------------------*/
			.shopping-area{
				margin-right:0;
				width:46.5rem;

				.item-select{
					.price-area{
						/* margin:3rem 0; */
					}
				}

				/* SUB SELECTER ------------------------------------------*/
				/* .sub-select{
					li{
						margin:0 1.5rem 1rem 0;
						width:14.8rem;
					}
				} */
			}

			/* DELIVERY DAYS ---------------------------------------------*/
			.delivery-date{
				padding-left:8rem;
			}

			/* EXPLANATION -----------------------------------------------*/
			.explanation{
				margin:3rem 0;
			}
		}
	}


/*------------------------------1.2.0.0 ---------SUB ECPLANATION ARIA */
.sub-explanation{
	margin:6rem auto 3rem;
/* HEADLINE ----------------------------------------------------------*/
summary{
	margin:0 0 -1rem;
}

/* DETAIL ------------------------------------------------------------*/
div{
	margin:3rem 0;

p{
}
}
}


/*------------------------------1.3.0.0 -----REVIEW & EXTRA INFO AREA */
section{
	#write-mode{
		.review-form{
			padding:3rem 9.5rem;
		}
	}

	/* REVIEW LIST ---------------------------------------------------*/
	.review-list{
		padding:3rem 4rem;
	}
/* RECOMMEND ITEM --------------------------------------------------------*/
.card-list-min{

	li{
	
	&:nth-child(3n+3){
	}
	
	a{
	
	.item-thumb{
	img{
	}
	}
	
	.item-descript{
	
	.item-name{
	}
	
	.item-price{
	
	span{
	&:first-of-type{
	}
	
	&:last-of-type{
	}
	}
	}
	}
	
	.more{
	}
	}
	}
	}
/* TAG LINK --------------------------------------------------------------*/
.tag{
	margin:3rem 0;
	}
	
	.list-category{
	
	li{
	
	&:nth-child(2n+2){
	}
	
	a{
	
	&::before{
	}
	
	&.beauty::before{
	}
	
	&.diet::before{
	}
	
	&.tableware::before{
	}
	
	&.kitchen::before{
	}
	}
	}
	}
}

/* SHARE BUTTON ------------------------------------------------------*/
.share{        
}


/* SERACH AREA -----------------------------------------------------------*/
.sub-search{

	.search-form{

	input[type='search']{
	}

	&:has(+.suggest2:not(:empty)){
	}
}

/* SUGGEST -----------------------------------------------------------*/
.suggest2{

&:not(:empty){

li{

&::before{
}

&.item::before{
}

&.word::before{
}
}
}
}
}

}

.item-in{
width:12.4rem;
height:12.4rem;
}
}