@charset "utf-8";

/* main
----------------------------------------------------------------------------- */

.l-main__favorite {
	padding-block-start: var(--header-height-pc);
	background-color: var(--cc-back);
	@media (width <= 767px) {/* SP */
		padding-block-start: var(--header-height-sp);
	}

	/* フェードイン・フェードアウト用 モーダル */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s ease;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}
	.fade-enter-to,
	.fade-leave-from {
		opacity: 1;
	}
}

/* component
----------------------------------------------------------------------------- */
/* 絞り込みボタン */
.c-btn-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 5rem;
	background: var(--cc-black-B);
	color: var(--cc-white-A);
	font-weight: var(--text-fw-ja);
	text-decoration: none;
	letter-spacing: 0.14em;
	line-height: 1.8;
	transition: all 0.2s ease;

	@media (width > 767px) {/* PC */
		min-width: 26rem;
		height: 5rem;
		padding-inline: 3.2rem;
		font-size: 1.4rem;
	}
	@media (width <= 767px) {/* SP */
		min-width: 22rem;
		height: 3.6rem;
		padding-inline: 7rem;
		font-size: 1.4rem;
		white-space: nowrap;
	}

	&::before {
		content: '';
		position: absolute;
		background-image: url('/assets/img/icon-search-w.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: all 0.3s ease-out;

		@media (width > 767px) {/* PC */
			inset-inline-start: 3.2rem;
			width: 1.6rem;
			height: 1.4rem;
		}
		@media (width <= 767px) {/* SP */
			inset-inline-start: 1.6rem;
			width: 1.4rem;
			height: 1.2rem;
		}
	}
}

/* モーダル閉じるボタン */
.c-btn-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 5rem;
	background: var(--cc-white-A);
	color: var(--cc-pinkgold);
	font-weight: var(--text-fw-ja);
	text-decoration: none;
	line-height: 1.8;
	transition: all 0.2s ease;
	border: 1px solid var(--cc-pinkgold);

	@media (width <= 767px) {/* SP */
		min-width: 15.6rem;
		height: 3.6rem;
		padding-inline: 1.2rem;
		font-size: 1.4rem;
		letter-spacing: 0.14em;
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
    top: 0;
    left: 1.6rem;
    bottom: 0;
    width: 1rem;
    height: 1px;
    margin: auto;
    background-color: var(--cc-pinkgold);
	}
	&::before{
		transform: rotate(45deg);
	}
	&::after{
		transform: rotate(-45deg);
	}
}

.c-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1.3rem;
	min-width: 10.8rem;
	margin: 8rem auto 0;

	.c-loading-spinner {
		border: 1px solid var(--cc-line-B);
		border-top: 1px solid var(--cc-pinkgold);
		border-right: 1px solid var(--cc-pinkgold);
		border-bottom: 1px solid var(--cc-pinkgold);
		border-radius: 50%;
		width: 1.4rem;
		height: 1.4rem;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.c-loading-txt {
		font-size: 1.6rem;
		color: var(--cc-pinkgold);
		font-family: var(--ff-loniki);
		font-weight: var(--text-fw-en);
		line-height: 1;
		letter-spacing: 0.125em;
	}
}

/* contents
============================================================================= */
/* マイセレクト
----------------------------------------------------------------------------- */
.favorite-myselect {
	@media (width > 767px) {/* PC */
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 8rem;
		padding: 13.6rem 0 12rem;
		border-bottom: 1px solid var(--cc-line-A);
	}
	@media (width <= 767px) {/* SP */
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.favorite-myselect-heading {
		display: block;
		@media (width <= 767px) {/* SP */
			padding-top: 6rem;
			& span {
				&::before {
					font-size: 2.8rem;
				}
			}
		}
	}

	.favorite-myselect-button {
		@media (width <= 767px) {/* SP */
			border-top: 1px solid var(--cc-line-A);
			border-bottom: 1px solid var(--cc-line-A);
			background-color: var(--cc-pinkgold);
			width: 100%;
			height: 4.6rem;
			padding-inline: 2.9rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&::after {
				content: "";
				width: 0.6rem;
				height: 0.6rem;
				border-bottom: 1px solid var(--cc-white-A);
				border-left: 1px solid var(--cc-white-A);
				transform: rotate(135deg);
				transition: transform 0.3s;
			}

			&.is-open {
				&::after {
					transform: rotate(-45deg);
				}
			}
		}
		> span {
			@media (width <= 767px) {/* SP */
				font-size: 1.8rem;
				color: var(--cc-white-A);
				font-family: var(--ff-loniki);
				font-weight: var(--text-fw-en);
				line-height: 1.4;
				letter-spacing: 0.22em;
			}
		}
	}

	.favorite-myselect-content {
		@media (width > 767px) {/* PC */
			max-width: 92rem;
			margin: 0 auto;
			width: 100%;
		}
		@media (width <= 767px) {/* SP */
			padding-inline: 2.8rem;
			backdrop-filter: blur(5px);
			background-color: rgba(255, 255, 255, 0.8);
		}

		.in {
			@media (width <= 767px) {/* SP */
				padding-bottom: 2.4rem;
			}
		}

		.favorite-myselect-content-wrap {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			@media (width > 767px) {/* PC */
				gap: 4rem;
			}
			@media (width <= 767px) {/* SP */
				gap: 1.5rem;
				padding-top: 3.2rem;
			}

			.favorite-myselect-title {
				display: inline-block;
				text-align: center;
				font-family: var(--ff-loniki);
				font-weight: var(--text-fw-en);
				color: var(--cc-pinkgold);
				@media (width > 767px) {/* PC */
					font-size: 2rem;
					line-height: 1.8;
					letter-spacing: 0.2em;
					min-width: 100%;
					padding-block-end: 1.6rem;
				}
				@media (width <= 767px) {/* SP */
					font-size: 1.2rem;
					line-height: 1;
					letter-spacing: 0.167em;
					padding-block-end: 0;
				}
			}
	
			.favorite-myselect-detail {
				@media (width <= 767px) {/* SP */
					display: flex;
					flex-direction: column-reverse;
					justify-content: flex-end;
				}
			}
	
			.favorite-myselect-content-item {
				position: relative;
				line-height: 1;
				@media (width > 767px) {/* PC */
					display:grid;
					grid-template-columns: 1fr auto;
					grid-template-rows: 1fr auto auto;
					column-gap: 0.4rem;
					margin-bottom: auto;
		
					@media (hover:hover) {
							&:hover {
								.-of:not(.no-back) > img {
									&.f {
										opacity:0;
									}
									&.b {
										opacity:1;
									}
								}
								.-of.no-back > img {
									&.f {
										opacity: 0.7;
									}
								}
							}
					}
				}
				@media (width <= 767px) {/* SP */
					margin-bottom: 0.8rem;
				}
				
				.favorite-myselect-content-item-link {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 1;
				}
	
				.-of {
					grid-column: 1 /-1;
					grid-row: 1;
					position:relative;
					pointer-events: none;
					aspect-ratio:280/439;
					width:100%;
					height:auto;
					@media (width > 767px) {/* PC */
						margin-bottom: 2.4rem;
					}
					@media (width <= 767px) {/* SP */
						aspect-ratio:156/244;
					}
	
					> img {
						position:absolute;
						top:0;
						transition-property: opacity;
						transition-duration:.5s;
						width:100%;
						height:auto;
						aspect-ratio:280/439;
						@media (width <= 767px) {/* SP */
							aspect-ratio:156/244;
						}
						
						&.b {
							opacity:0;
						}
					}
				}
	
				.favorite-myselect-content-mylist-btn {
					cursor: pointer;
					z-index: 2;
					@media (width > 767px) {/* PC */
						grid-column: 2;
						grid-row: 2 /-1;
						place-self: start;
						position: relative;
					}
					@media (width <= 767px) {/* SP */
						position:absolute;
						top: 20.6rem;/* 21.8rem */
						right: 0;/* 1.2rem */
						padding: 1.2rem;
					}
					span {
						display: block;
						width: 1.6rem;
						height: 1.4rem;

						> svg{
							overflow: visible;
							path {
								@media (width <= 767px) {/* SP */
									fill: var(--cc-white-A);
								}
							}
						}
					}
				}
	
				.favorite-myselect-content-item-title {
					grid-column: 1;
					grid-row: 2;
					font-size:1.4rem;
					color: var(--cc-black-B);
					font-family: var(--ff-loniki);
					font-weight: var(--text-fw-en);
					line-height: 1;
					letter-spacing: 0.14em;
					@media (width <= 767px) {/* SP */
						font-size:1.3rem;
						letter-spacing: 0.15em;
					}
				}
	
				.favorite-myselect-content-item-cat-box {
					grid-column: 1;
					grid-row: 3;
					margin-top: 0.8rem;
					display: flex;
					flex-direction: column;
					@media (width <= 767px) {/* SP */
						margin-top: 0;
					}

					.favorite-myselect-content-item-cat-group {
						line-height: 1;
						&.-brand {
							.favorite-myselect-content-item-cat {
								font-family: var(--ff-loniki);
								font-weight: var(--text-fw-en);
								letter-spacing: 0.2em;
							}
						}
					}

					.favorite-myselect-content-item-cat-wrap {
						word-break: break-all;
						line-height: 1.2;
					}
					
					.favorite-myselect-content-item-cat {
						font-size:1.0rem;
						color: var(--cc-icon-A);
						line-height: 1;
						&:not(:last-of-type){
							&::after {
								content: "/";
								padding-right: 0.25rem;
							}
						}
					}
				}
	
				.favorite-myselect-content-myselect-box {
					.favorite-myselect-content-myselect-btn-box {
						position: absolute;
						top: 0;
						right: 0;
						padding: 1rem;
						z-index: 2;
						cursor: pointer;
						@media (width <= 767px) {/* SP */
							top: -1.6rem;
							right: -1.6rem;
							padding: 0.8rem;
						}
					}
					.favorite-myselect-content-myselect-btn {
						width: 2.6rem;
						height: 2.6rem;
						background: rgba(255, 255, 255, 0.8);
						border: 1px solid var(--cc-pinkgold);
						border-radius: 50%;
						transition: 0.3s;
						display: block;
	
						@media (width <= 767px) {/* SP */
							width: 2rem;
							height: 2rem;
						}
	
						.favorite-myselect-content-myselect-bar {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							width: 0.945rem;
							height: 1px;
							margin: auto;
							background-color: var(--cc-pinkgold);
						}
					}
	
					.favorite-mylist-content-myselect-wrap {
						visibility: hidden;
						opacity: 0;
						transition: 0.3s;
	
						&.selected {
							visibility: visible;
							opacity: 1;
							position: absolute;
							top: 0;
							left: 0;
							aspect-ratio: 239 / 375;
							width: 100%;
							height: auto;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 1;
							background: rgba(255, 255, 255, 0.5);
						}
	
						.favorite-mylist-content-myselect-wrap-text {
							font-size: 1.4rem;
							line-height: 1;
							text-align: center;
							pointer-events: none;
	
							> span {
								font-family: var(--ff-loniki);
								font-weight: var(--text-fw-en);
								line-height: 1.8;
								letter-spacing: var(--text-a-ls-pc);
							}
						}
					}
				}
			}
			
			.favorite-myselect-content-noselect {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				row-gap: 1.2rem;
				width: 100%;
				background: #F5F4F2;
				line-height: 2.4;
				@media (width > 767px) {/* PC */
					height: 43.9rem;
					aspect-ratio: 280 / 439;
				}
				@media (width <= 767px) {/* SP */
					height: 15rem;
					aspect-ratio: 96 / 150;
				}
	
				.favorite-myselect-content-noselect-text {
					font-size: 1.4rem;
					@media (width <= 767px) {/* SP */
						font-size: 1rem;
					}
				}
	
				.favorite-myselect-content-noselect-label{
					font-size: 1.2rem;
				}
	
				.favorite-myselect-content-noselect-link {
					width: 3rem;
					height:3rem;
					border-radius: 50%;
					background-color: var(--cc-white-A);
					border:  1px solid var(--cc-black-B);
					display: flex;
					align-items: center;
					justify-content: center;
					&:before {
						content: "";
						width: 0.5rem;
						height: 0.5rem;
						border-bottom: 1px solid var(--cc-black-B);
						border-left: 1px solid var(--cc-black-B);
						transform: rotate(-45deg);
					}
				
					@media(hover) {
						& {
							transition: 0.2s;
						}
						&:hover {
							opacity:.6;
						}
					}
				}
			}
		}
		
		.c-btn-search {
			@media (width <= 767px) {/* SP */
				display: flex;
				min-width: 15.6rem;
				padding-inline: 4.8rem;
				margin: 1.6rem auto 2.4rem;
				margin-bottom: 0;
				&::before {
					content: none;
				}
			}
		}
	}

	.favorite-myselect-modal {
		@media (width <= 767px) {/* SP */
			position: fixed;
			top: var(--header-height-sp);
			left: 50%;
			transform: translateX(-50%);
			z-index: 101;
			width: 100%;
			height: calc(100vh - var(--header-height-sp));
			height: calc(100dvh - var(--header-height-sp));
			background-color: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(5px);
			-webkit-overflow-scrolling: touch;
			overflow: auto;
			pointer-events: auto;
			overscroll-behavior: none;
		}

		.favorite-myselect-modal-wrap {
			padding: 2.4rem 2.4rem 6.4rem;

			.c-btn-close {
				@media (width <= 767px) {/* SP */
					width: 3.6rem;
					height: 3.6rem;
					border-radius: 50%;
					min-width: auto;
					position: absolute;
					top: 2rem;
					right: 2rem;
					z-index: 2;
					&::before,
					&::after{
						left: 0;
						right: 0;
						bottom: 0;
						width: 1.2rem;
					}
				}
			}

			.favorite-myselect-modal-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 4.8rem;
				margin-top: 6rem;

				.favorite-myselect-modal-item {
					width: 100%;
				}

				.favorite-myselect-modal-title {
					display: grid;
					grid-template-columns: repeat(2,1fr);
					column-gap: 1.6rem;
					position: relative;
					margin-bottom: 2rem;
		
					&::before,
					&::after {
						content: '';
						position: absolute;
  				  top: 0;
						right: 0;
  				  left: 0;
  				  bottom: 0;
  				  width: 1.2rem;
  				  height: 1px;
  				  margin: auto;
  				  background-color: var(--cc-pinkgold);
					}
					&::before{
						transform: rotate(45deg);
					}
					&::after{
						transform: rotate(-45deg);
					}
		
					> span {
						@media (width <= 767px) {/* SP */
							width: 100%;
							text-align: center;
							font-size: 1.8rem;
							font-family: var(--ff-loniki);
							font-weight: var(--text-fw-en);
							letter-spacing: 0.22em;
							line-height: 1.4;
							color: var(--cc-pinkgold);
						}
					}
				}
		
				.favorite-myselect-pair {
					display: grid;
					grid-template-columns: repeat(2,1fr);
					column-gap: 1.6rem;
		
					.favorite-myselect-modal-item-content {
						position: relative;
						line-height: 1;
			
						.favorite-myselect-content-item-link {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							z-index: 1;
						}
			
						.-of {
							@media (width <= 767px) {/* SP */
								position:relative;
								pointer-events: none;
								width:100%;
								height:auto;
								aspect-ratio:156/244;
							}
			
							> img {
								@media (width <= 767px) {/* SP */
									position:absolute;
									top:0;
									width:100%;
									height:auto;
									aspect-ratio:156/244;
								}
							}
						}
			
						.favorite-myselect-content-mylist-btn {
							cursor: pointer;
							z-index: 2;
							@media (width <= 767px) {/* SP */
								position:absolute;
								top: 20.6rem;/* 21.8rem */
								right: 0;/* 1.2rem */
								padding: 1.2rem;
							}
							span {
								display: block;
								width: 1.6rem;
								height: 1.4rem;

								> svg{
									overflow: visible;
									path {
										@media (width <= 767px) {/* SP */
											fill: var(--cc-white-A);
										}
									}
								}
							}
						}
			
						.favorite-myselect-content-item-title {
							@media (width <= 767px) {/* SP */
								color: var(--cc-black-B);
								font-family: var(--ff-loniki);
								font-weight: var(--text-fw-en);
								letter-spacing: 0.14em;
								line-height: 1;
								font-size:1.4rem;
								margin-top: 1.1rem;
							}
						}
			
						.favorite-myselect-content-item-cat-box {
							margin-top: 0.4rem;
							display: flex;
							flex-direction: column;
							@media (width <= 767px) {/* SP */
								margin-top: 0.5rem;
								gap: 0.2rem;
							}

							.favorite-myselect-content-item-cat-group {
								line-height: 1;
								&.-brand {
									.favorite-myselect-content-item-cat {
										font-family: var(--ff-loniki);
										font-weight: var(--text-fw-en);
										letter-spacing: 0.18em;
									}
								}
							}

							.favorite-myselect-content-item-cat-wrap {
								word-break: break-all;
								line-height: 1.2;
							}
							
							.favorite-myselect-content-item-cat {
								font-size:1.1rem;
								color: var(--cc-icon-A);
								line-height: 1;
								&:not(:last-of-type){
									&::after {
										content: "/";
										padding-right: 0.25rem;
									}
								}
							}
						}
					}
			
					.favorite-myselect-modal-item-content-noselect {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						row-gap: .8rem;
						width: 100%;
						background: #F5F4F2;
						line-height: 2.4;
						@media (width <= 767px) {/* SP */
							height: 24.4rem;
							aspect-ratio: 156 / 244;
						}
			
						.favorite-myselect-content-noselect-text {
							@media (width <= 767px) {/* SP */
								font-size: 1.2rem;
							}
						}
			
						.favorite-myselect-content-noselect-label{
							@media (width <= 767px) {/* SP */
								font-size: 1rem;
							}
						}
					}
				}
			}
	
		}

		.favorite-myselect-modal-btn-box {
			padding-block: 1.6rem;
			background-color: var(--cc-back);
			border-top: 1px solid var(--cc-line-A);
			text-align: center;
		}
	}

	/* 開閉アニメーション */
	.accordion-enter-active,
	.accordion-leave-active {
		transition: all 0.3s;
		max-height: 30rem;
	}
	.accordion-enter-from,
	.accordion-leave-to {
		opacity: 0;
		max-height: 0;
		overflow: hidden;
	}
}


/* マイリスト
----------------------------------------------------------------------------- */
.favorite-mylist {
	@media (width > 767px) {/* PC */
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12rem 0 11rem;
	}
	@media (width <= 767px) {/* SP */
		padding-bottom: 6.8rem;
	}
	
	.favorite-mylist-title {
		display: flex;
		@media (width > 767px) {/* PC */
			min-width: auto;
			border-bottom: 1px solid var(--cc-line-B);
			padding: 0 0 1.6rem 4rem;
			column-gap: 2.4rem;
			align-items: baseline;
		}
		@media (width <= 767px) {/* SP */
			width: calc(100% - 4.8rem);
			margin: auto;
			flex-direction: column;
			align-items: flex-start;
			border-bottom: 1px solid var(--cc-line-A);
			padding-block-end: 1.6rem;
		}
		& span {
			&::before {
				@media (width > 767px) {/* PC */
					font-size: 2.4rem;
					line-height: 1.8;
					letter-spacing: 0.21em;
					padding-block-end: 0;
				}
				@media (width <= 767px) {/* SP */
					padding-block-end: 1.8rem;
				}
			}
		}
	}

	.favorite-mylist-catch {
		.favorite-mylist-catch-count {
			font-family: var(--ff-loniki);
			font-weight: var(--text-fw-en);
			color: var(--cc-pinkgold);
			font-size: 1.6rem;
			letter-spacing: 0.125em;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 2.4rem;
			@media (width > 767px) {/* PC */
				margin-block: 8rem 3rem;
			}
			
			@media (width <= 767px) {/* SP */
				justify-content: space-between;
				padding: 2.4rem 2.4rem;
			}
	
			.favorite-mylist-catch-count-text {
				display: flex;
				align-items: center;
				column-gap: 1rem;
				@media (width > 767px) {/* PC */
				}
				@media (width <= 767px) {/* SP */
					font-size: 1.8rem;
					letter-spacing: 0.22em;
					line-height: 1.4;
				}
				svg {
					@media (width > 767px) {/* PC */
						width: 1.5rem;
						height: 1.3rem;
						margin-right: 1.2rem;
					}
					@media (width <= 767px) {/* SP */
						display: none;
					}
				}
			}
		}
	
		.favorite-mylist-catch-text {
			@media (width > 767px) {/* pc */
				font-size: 1.2rem;
				letter-spacing: 0;
				line-height: 2.4;
				margin-top: 3.2rem;
			}
		}
	}

	.favorite-mylist-link-box {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 1px;
			width: 100%;
			border-bottom: 1px solid var(--cc-line-A);
		}
		
		.favorite-mylist-link-wrap {
			overflow-x: auto;
			overflow-y: visible;
			padding-inline-start: 2.4rem;
			padding-bottom: 2px;
			z-index: 1;
			position: relative;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		
		.favorite-mylist-link-list {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0;
			white-space: nowrap;
			position: relative;

			.favorite-mylist-link-item {
				&:last-of-type {
					padding-right: 2.4rem;
				}
				&.active {
					.favorite-mylist-link {
						cursor: inherit;
					}
				}
				.favorite-mylist-link {
					display: block;
					padding: 1.8rem 1rem 1.1rem;
					font-size: 1.2rem;
					line-height: 1;
					letter-spacing: 0.08em;
					
				}
			}
		}

		.favorite-mylist-underline{
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 3px;
			background-color: var(--cc-pinkgold);
			transition: all 0.3s ease;
		}
	}


	.favorite-mylist-content {
		@media (width > 767px) {/* PC */
			max-width: 120rem;
			margin: 3rem auto 0;
			width: 100%;
		}
		@media (width <= 767px) {/* SP */
			padding-top: 3.2rem;
		}

		.favorite-mylist-detail {
			@media (width > 767px) {/* PC */
				padding-block: 5rem;
			}
			@media (width <= 767px) {/* SP */
				padding-block: 3.2rem;
			}
		}
	
		.favorite-mylist-content-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			@media (width > 767px) {/* PC */
				max-width: 112rem;
				margin: 0 auto;
				gap: 5.6rem 2.0rem;
				padding-top: 6.4rem;
			}
			@media (width <= 767px) {/* SP */
				gap: 3.2rem 1.5rem;
				width: calc(100% - 4.8rem);
				margin: auto;
				padding-top: 4.8rem;
			}
	
			.favorite-mylist-content-item {
				position: relative;
				line-height: 1;
				@media (width > 767px) {/* PC */
					display:grid;
					grid-template-columns: 1fr auto;
					grid-template-rows: 1fr auto auto;
					margin-bottom: auto;
					column-gap: 0.4rem;
					width: 20.8rem;
	
					@media (hover:hover) {
						&:hover {
							.-of:not(.no-back) > img {
								&.f {
									opacity:0;
								}
								&.b {
									opacity:1;
								}
							}
							.-of.no-back > img {
								&.f {
									opacity: 0.7;
								}
							}
						}
					}
				}
				@media (width <= 767px) {/* SP */ 
					width: calc(100% / 2 - 0.8rem );
				}
				&.-kimono {
					.favorite-mylist-content-item-title,
					.favorite-mylist-content-item-cat {
						font-family: var(--ff-default);
						font-weight: var(--text-fw-ja);
						letter-spacing: 0;
					}
				}
	
				.favorite-mylist-content-item-link {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 2;
				}
	
				.-of {
					grid-column: 1 /-1;
					grid-row: 1;
					position:relative;
					pointer-events: none;
					aspect-ratio:208/326;
					width:100%;
					height:auto;
					margin-bottom: 1.6rem;
					@media (width <= 767px) {/* SP */
						aspect-ratio:156/244;
					}
	
					> img {
						position:absolute;
						top:0;
						transition-property: opacity;
						transition-duration:.5s;
						width:100%;
						height:auto;
						aspect-ratio:208/326;
						@media (width <= 767px) {/* SP */
							aspect-ratio:156/244;
						}
						
						&.b {
							opacity:0;
						}
					}
				}

				.favorite-mylist-content-myselect-box {
					.favorite-mylist-content-myselect-btn-box {
						position: absolute;
						top: 0;
						right: 0;
						padding: 0.8rem;
						z-index: 2;
						cursor: pointer;

						&.selected {
							.favorite-mylist-content-myselect-btn {
								background: rgba(255, 255, 255, 0.5);
								border: 1px solid var(--cc-pinkgold);
								.favorite-mylist-content-myselect-bar {
									background-color: var(--cc-pinkgold);
									&:nth-child(1) {
										transform: rotate(0);
									}
								}
							}
						}
					}
					.favorite-mylist-content-myselect-btn {
						display: block;
						background: var(--cc-black-B);
						border: 1px solid var(--cc-black-B);
						border-radius: 50%;
						transition: 0.3s;
						width: 2.2rem;
						height: 2.2rem;

						.favorite-mylist-content-myselect-bar {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							width: 0.8rem;
							height: 1px;
							margin: auto;
							background-color: var(--cc-white-A);
							transition: 0.3s;
							&:nth-child(1) {
								transform: rotate(90deg);
							}
						}
					}

					.favorite-mylist-content-myselect-btn-hover{
						position: absolute;
						width: 17rem;
						height: 3.3rem;
						top: -3.7rem;
						right: 0;
						background-image: url('/assets/img/favorite/favorite-hover-text.svg');
						background-repeat: no-repeat;
						background-position: center;
						background-size: contain;
						opacity: 0;
						visibility: hidden;
						transition: opacity 0.3s ease,  visibility 0.3s ease;
					}
					@media (hover:hover) {
						.favorite-mylist-content-myselect-btn-box:hover + .favorite-mylist-content-myselect-btn-hover {
							opacity: 1;
							visibility: visible;
						}
					}

					.favorite-mylist-content-myselect-wrap {
						opacity: 0;
						visibility: hidden;
						position: absolute;
						top: 0;
						left: 0;
						aspect-ratio: 239 / 375;
						width: 100%;
						height: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: 0.3s;

						&.selected {
							opacity: 1;
							visibility: visible;
							z-index: 1;
							background: rgba(255, 255, 255, 0.5);
						}

						.favorite-mylist-content-myselect-wrap-text {
							font-size: 1.4rem;
							line-height: 1;
							text-align: center;
							pointer-events: none;

							> span {
								font-family: var(--ff-loniki);
								font-weight: var(--text-fw-en);
								line-height: 1.8;
								letter-spacing: var(--text-a-ls-pc);
							}
						}
					}
				}

				.favorite-mylist-content-mylist-btn {
					cursor: pointer;
					z-index: 2;
					@media (width > 767px) {/* PC */
						grid-column: 2;
						grid-row: 2 /-1;
						place-self: start;
						position: relative;
					}
					@media (width <= 767px) {/* SP */
						position:absolute;
						top: 20.6rem;/* 21.8rem */
						right: 0;/* 1.2rem */
						padding: 1.2rem;
					}
					span {
						display: block;
						width: 1.6rem;
						height: 1.4rem;

						> svg{
							overflow: visible;
							path {
								@media (width <= 767px) {/* SP */
									fill: var(--cc-white-A);
								}
							}
						}
					}
				}

				.favorite-mylist-content-item-title {
					grid-column: 1;
					grid-row: 2;
					font-size:1.4rem;
					color: var(--cc-black-B);
					font-family: var(--ff-loniki);
					font-weight: var(--text-fw-en);
					letter-spacing: 0.14em;
					line-height: 1.4;
					@media (width <= 767px) {/* SP */
						font-size:1.3rem;
						letter-spacing: 0.15em;
					}
				}
				.favorite-mylist-content-item-cat-box {
					grid-column: 1;
					grid-row: 3;
					margin-top: 0.4rem;
					display: flex;
					flex-direction: column;
					gap: 0.1rem;
					@media (width <= 767px) {/* SP */
						margin-top: 0.4rem;
						gap: 0.2rem;
					}

					.favorite-mylist-content-item-cat-group {
						line-height: 1;
						&.-brand {
							.favorite-mylist-content-item-cat {
								font-family: var(--ff-loniki);
								font-weight: var(--text-fw-en);
								letter-spacing: 0.2em;
							}
						}
					}

					.favorite-myselect-content-item-cat-wrap {
						word-break: break-all;
						line-height: 1.2;
					}
					
					.favorite-mylist-content-item-cat {
						font-size:1.0rem;
						color: var(--cc-icon-A);
						line-height: 1.4;
						letter-spacing: 0;
						&:not(:last-of-type){
							&::after {
								content: "/";
								padding-right: 0.25rem;
							}
						}
					}
				}
			}
		}

		.favorite-mylist-content-nouitems {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 3.3rem;
			padding-top: 1.6rem;
			@media (width <= 767px) {/* SP */
				justify-content: flex-start;
				align-items: flex-start;
				gap: 1.6rem;
				padding-top: 0;
				margin-top: -1.6rem;
			}

			.favorite-mylist-content-nouitems-text {
				@media (width > 767px) {/* PC */}
				@media (width <= 767px) {/* SP */
					font-size: 1.1rem;
					line-height: 2.4;
					letter-spacing: 0;
				}
			}
		}
	}
}