section.sera_section {
	a{
		text-decoration: none;
		color: #323232;
	}
	&.background1 {
		position: relative;
		
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: var(--background1);
			background-size: cover;
			z-index: -1;
		}
	}
	
	&.background2 {
		position: relative;
		
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: var(--background2);
			background-size: cover;
			z-index: -1;
		}
	}
	
	.section_wrap {
		padding: 50px 20px;
		border-bottom: 2px solid rgba(237, 237, 237, 1);
		@media screen and (max-width: 989px) {
			padding: 10px 10px 30px 10px;
		}
		&.no_border{
			border-bottom: none;
		}
		
		.h1 {
			margin-top: 0;
			margin-bottom: 30px;
		}
		
		.h2 {
			margin-top: 30px;
			margin-bottom: 30px;
		}
		
		.nocard {
			width: 230px;
			height: 250px;
			display: block;
		}
		
		.block_wrap {
			display: flex;
			gap: 30px;
			
			& > div:nth-child(1) {
				width: 100%;
			}
			
			& > div:nth-child(2) {
				width: 50%;
			}
			
			.collection_list {
				
				&.count5 .product_items {
					gap: 10px;
					
					&#special_feature_items{
						gap: 15px;
						
							@media screen and (max-width: 989px) {
								gap: 10px;
								flex-wrap: wrap;
							}
						.product_item{
							width: 100%;
							img{
								border-radius: 5px;
							}
							
							@media screen and (max-width: 989px) {
								width: calc(50% - 5px);
								
							}
						}
					}
						.product_item{
							width: calc(100% / 5);
						}
				}
				
				&.count3 .product_items {
					gap: 20px;
					
						.product_item{
							width: calc(100% / 3);
						}
				}
				@media screen and (max-width: 989px) {
					
					&.count5 .product_items {
						gap: 10px;
						.product_item{
							width: calc((100% / 5) - 5px);
							
							@media screen and (max-width: 989px) {
								width: calc(50% - 5px);
								
							}
						}
					}
					
					&.count3 .product_items {
						gap: 10px;
						.product_item{
							width: calc((100% / 3) - 5px);
							
							@media screen and (max-width: 989px) {
								width: calc(50% - 5px);
								
							}
						}
					}
					&.count1 .product_items .product_item{
						width: 100%;
					}
				}
				.product_items {
					display: flex;
					@media screen and (max-width: 989px) {
						flex-wrap: wrap;
						
					}
					&.random .product_item{
						display: none;
					}
					
					
					
					.product_item {
						position: relative;
						background: #FFFFFF;
						display: flex;
						flex-direction: column;
						border: 1px solid #F3F3F3;
						
						&:hover {
							img{
								
								transform: scale(1.04);
							}
						}
						.image_wrap {
							/*height: 50%;*/
							background: rgba(243, 243, 243, 1);
							padding: 16px;
							
							img {
								transition: transform 0.3s ease;
								margin: 0 auto;
								display: block;
								max-width: 160px;
								max-height: 225px;
								object-fit: contain;
								
								@media screen and (max-width: 989px) {
									max-width: none;
									width: 100%;
									height: auto;
								}
							}
						}
						
						.content_body {
							
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							/*min-height: 50%;*/
							flex-grow: 2;
							
							.card_title {
								font-size: 16px;
								line-height: 150%;
								font-weight: bold;
								a{
									display: block;
									width: 100%;
									padding: 15px 8px 0 8px;
								}
								@media screen and (max-width: 989px) {
									font-weight: 700;
									font-size: 12px;
									line-height: 150%;
									letter-spacing: 0;
									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									
									
								}
							}
							@media screen and (max-width: 989px) {
								.card_body {
									flex-grow: 2;
									display: flex;
									flex-direction: column;
								}
							}
							.price_list {
								margin-top: 15px;
								@media screen and (max-width: 989px) {
									margin-top: 10px;
									flex-grow: 2;
								}
								
								.single_condition_area {
									padding: 0 8px;
									.price_area {
										color: #B22525;
										margin-right: 10px;
										font-weight: bold;
										
										.big {
											font-family: "Lato", sans-serif;
											font-size: 22px;
											margin-right: 6px;
										}
									}
								}
								
								
								.condition_area {
									padding: 10px 8px;
									display: flex;
									justify-content: space-between;
									flex-direction: column;
									line-height: 100%;
									
									&:nth-child(odd){
										background: #F9F9F9;
									}
									
									.condition_name {
										
										font-weight: 400;
										font-size: 10px;
										line-height: 100%;
										letter-spacing: 0;
										vertical-align: middle;
										&.sp{
											display: none;
										}
										@media screen and (max-width: 989px) {
											&.pc{
												display: none;
											}
											&.sp{
												display: block;
											}
										}
									}
									
									.condition_body {
										display: flex;
										align-items: center;
										justify-content: space-between;
										
										.price_area {
											color: #B22525;
											margin-right: 10px;
											display: flex;
											align-items: baseline;
											@media screen and (max-width: 989px) {
												font-weight: 400;
												font-size: 10px;
												line-height: 100%;
												letter-spacing: 0;
												vertical-align: middle;
												flex-direction: column;
												gap: 7px;
												.condition_name{
													color: #565656;
												}
											}
											
											.big {
												font-family: "Lato", sans-serif;
												font-size: 18px;
												font-weight: bold;
												margin-right: 3px;
												@media screen and (max-width: 989px) {
													font-weight: 700;
													font-size: 14px;
													line-height: 100%;
													letter-spacing: 0;
													vertical-align: middle;
												}
											}
										}
										
										.count {
											display: inline-flex;
											align-items: end;
											margin-right: 10px;
											font-family: "Lato", sans-serif;
											color: #565656;
											font-size: 12px;
											@media screen and (max-width: 989px) {
												font-weight: 400;
												font-size: 10px;
												line-height: 100%;
                                                letter-spacing: 0;
												text-align: center;
												vertical-align: middle;
												margin-right: 0;
											}
											.input_wrap {
												width: 35px;
												text-align: center;
												min-height: 27px;
												display: inline-flex;
												align-items: center;
												justify-content: center;
												@media screen and (max-width: 989px) {
													margin-right: 2px;
												}
												input[type="number"]::-webkit-inner-spin-button,
												input[type="number"]::-webkit-outer-spin-button {
													-webkit-appearance: none;
													margin: 0;
													-moz-appearance: textfield;
												}
												
												input[type="text"], input[type="number"] {
													font-size: 14px;
													border: 1px solid #D6D6D6;
													border-radius: 5px;
													width: 100%;
													padding: 4px 5px;
													text-align: center;
													
													&:focus-visible {
														outline: none;
														outline-offset: inherit;
														box-shadow: none;
													}
												}
												 input[type="number"] {
													 font-family: "Lato", sans-serif;
													 @media screen and (max-width: 989px) {
														padding: 12px 5px;
														font-weight: 400;
														font-size: 10px;
														line-height: 100%;
														letter-spacing: 0;
														text-align: center;
														vertical-align: middle;

													}
												 }
												
											}
											.delimiter{
												margin: 0 2px;
											}
										}
									}
								}
							}
							
							.cart_button_wrap {
								display: flex;
								justify-content: space-between;
								margin-top: 15px;
								padding: 0 8px 15px 8px;
								
								.cart_button {
									width: 100%;
									
									font-size: 12px;
									padding: 10px 15px;
									border: 1px solid rgba(223, 223, 223, 1);
									border-radius: 25px;
									line-height: 120%;
									letter-spacing: 2%;
									color: rgba(136, 136, 136, 1);
									font-weight: 500;
									transition: 300ms all ease-out;
                                    background: transparent;
									
									&.enable{
										background: #FFC824;
										color: #323232;
										font-weight: bold;
										border: 1px solid #FFC824;
										cursor: pointer;
										&:hover{
											background: #FFC82426;
											border: 1px solid #FFC824;
										}
									}
									&.one_enable{
										background: #FFC824;
										border: 1px solid #FFC824;
										color: #323232;
										font-weight: bold;
										cursor: pointer;
										&:hover{
											background: #FFC82426;
											border: 1px solid #FFC824;
										}
									}
								}
								
								.favorite_button {
									display: none;
									justify-content: center;
									align-items: center;
									width: 25px;
									height: 25px;
									border-radius: 250px;
									padding: 3.57px 2.38px;
									position: relative;
									box-shadow: 0px 0px 7px 0px #0000004D;
									transition: 300ms all ease-out;
									
									&:after {
										content: "";
										position: absolute;
										width: 13px;
										height: 13px;
										background-image: var(--h_favorite);
										background-position: center center;
										background-repeat: no-repeat;
										background-size: cover;
										
										
									}
									
									&.in{
										background: #FBF4F4;
										box-shadow: none;
										&:after {
											background-image: var(--r_h_favorite);
										}
										
									}
								}
							}
						}
						.swym-wishlist-collections-v2-container{
							
							top: auto;
							left: auto;
							bottom: 15px;
							right: 8px;
							padding: 0;
							.swym-wishlist-collections-v2{
								transform: none !important;
								svg{
									display: none;
								}
								display: flex;
								justify-content: center;
								align-items: center;
								width: 25px;
								height: 25px;
								border-radius: 250px;
								padding: 3.57px 2.38px;
								position: relative;
								box-shadow: 0px 0px 7px 0px #0000004D;
								transition: 300ms all ease-out;
								
								&:after {
									content: "";
									position: absolute;
									width: 13px;
									height: 13px;
									background-image: var(--h_favorite);
									background-position: center center;
									background-repeat: no-repeat;
									background-size: cover;
								}
								
								&[aria-pressed="true"]{
									background: #FBF4F4;
									box-shadow: none;
								&:after {
									background-image: var(--r_h_favorite);
								}
								
								}
							}
						}
					}
				}
			}
			
			.special_feature_list {
				.special_feature_list_wrap {
					display: flex;
					/*align-items: start;*/
					align-content: baseline;
					flex-wrap: wrap;
					gap: 15px;
					
					a {
						display: block;
						border-radius: 5px;
						overflow: hidden;
						width: calc(50% - 7.5px);
						height: 110px;
						&:hover {
							img{
								transform: scale(1.04);
							}
						}
						img {
							transition: transform 0.3s ease;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
			
			.image_banner {
				overflow: hidden;
				&:hover {
					img{
						transform: scale(1.04);
					}
				}
				a {
					
					img {
						transition: transform 0.3s ease;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				
				& + .collection_list.count1 {
					align-self: stretch;
					display: flex;
					flex-direction: column;
					
					.h2 {
						
						margin-top: 10px;
						margin-bottom: 10px;
					}
					
					.product_items {
						height: 100%;
						flex: 1 1 auto;
						
						.product_item {
							width: 100%;
							height: 100%;
							
							.image_wrap {
								background: transparent;
							}
							
							.content_body {
								flex: 1;
								display: flex;
								flex-direction: column;
								
								.card_title {
									font-size: 12px;
									font-weight: normal;
								}
								
								.card_body {
									flex: 1;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
								}
							}
							
						}
					}
				}
			}
			
			@media screen and (max-width: 989px) {
				flex-direction: column;
				
				& > div:nth-child(2) {
					width: 100%;
				}
				
				.image_banner + .collection_list.count1 {
					.product_items {
						height: auto;
						
						.product_item {
							height: auto;
						}
					}
				}
			}
		}
		
		.button_wrap {
			display: flex;
			justify-content: space-around;
			margin-top: 50px;
		}
	}
	
	.section_button {
		height: 50px;
		padding: 10px 70px;
		border: 1px solid rgba(50, 50, 50, 1);
		color: rgba(255, 255, 255, 1);
		background: rgba(50, 50, 50, 1);
		border-radius: 52px;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
		display: inline-block;
		position: relative;
		transition: 300ms all ease-out;
		
		&:before, &:after {
			content: '';
			background-image: var(--chevron_forward_white);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
			width: 20px;
			height: 20px;
			
		}
		
		&:after {
			opacity: 0;
			background-image: var(--chevron_forward);
		}
		
		&:hover {
			background: rgba(50, 50, 50, 0.15);
			color: rgba(50, 50, 50, 1);
		}
		
		&:hover:after {
			opacity: 1;
		}
		
		&:hover:before {
			opacity: 0;
		}
	}
}