@charset "utf-8";

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

.l-main__dress-single {
	padding-block-start: var(--header-height-pc);
	background-color: var(--cc-back);
	@media (width <= 767px) {/* SP */
		padding-block-start: var(--header-height-sp);
	}
}
.l-main__dress-archive {
	padding-block-start: var(--header-height-pc);
	background-color: var(--cc-back);
	@media (width <= 767px) {/* SP */
		padding-block-start: var(--header-height-sp);
	}
}
.page-archive-dress {
	@media (width > 767px) {
		display: grid;
		grid-template-columns: auto 1fr;
		max-width: 160rem;
		margin-inline: auto;
		grid-template-rows: 32rem 1fr;
	}
}

/* component
----------------------------------------------------------------------------- */

[v-cloak] {
	display: none;
}

/* 絞り込みボタン */
.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;
	font-size: 1.4rem;
	letter-spacing: 0.07em;
	line-height: 1.8;
	transition: all 0.2s ease;

	@media (width > 767px) {/* PC */
		min-width: 26rem;
		height: 5rem;
		padding-inline: 3.2rem;
	}
	@media (width <= 767px) {/* SP */
		min-width: 22rem;
		height: 3.6rem;
		padding-inline: 7rem;
		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.07em;
	}

	&::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-btn-share {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cc-pinkgold);
	border-radius: 3rem;
	color: var(--cc-pinkgold);
	font-family: var(--ff-default);
	font-weight: var(--text-fw-ja);
	background: #FBFAF6;
	text-decoration: none;
	font-size: 1.4rem;
	letter-spacing: 0.07em;
	line-height: 1;
	transition: all 0.2s ease;

	@media (width > 767px) {/* PC */
		min-width: 23rem;
		height: 4.4rem;
		padding-inline: 7.8rem;
	}
	@media (width <= 767px) {/* SP */
		min-width: 22rem;
		max-width: 22rem;
		width: 100%;
		height: 4.8rem;
		padding-inline: 7rem;
	}

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

		@media (width > 767px) {/* PC */
			inset-inline-start: 2.9rem;
			width: 1.3rem;
			height: 1.7rem;
		}
		@media (width <= 767px) {/* SP */
			inset-inline-start: 2.8rem;
			width: 1.3rem;
			height: 1.7rem;
		}
	}
}

.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
============================================================================= */
/* 一覧ページ
----------------------------------------------------------------------------- */
/* MV */
.dress-mv {
	@media (width > 767px) {/* PC */
		grid-column: 2;
		grid-row: 1;
	}

  .dress-mv-content {
		position: relative;
		display: block;
		z-index: 1;
		@media (width > 767px) {/* PC */
			height: 100%;
		}

		.dress-mv-img {
			@media (width > 767px) {/* PC */
				height: 100%;
				img {
					height: 100%;
				}
			}
		}
	}

	.u-heading-mixed {
		position: absolute;
		top: 0;
		left: 10rem;
		bottom: 0;
		margin: auto;
		display: grid;
		place-content: center;
		color: var(--cc-white-A);
		z-index: 1;
		& span {
			font-size: 1.2rem;
			letter-spacing: 0;
			&::before {
				font-size: 3rem;
				letter-spacing: 0.16em;
				line-height: 1.8;
				font-weight: var(--text-fw-en);
				color: var(--cc-white-A);
			}
		}
		@media (width <= 767px) {/* SP */
			left: 1.6rem;
			& span {
				align-items: flex-start;
				
				&::before {
					font-size: 1.8rem;
					line-height: 1.4;
					letter-spacing: 0.22em;
					padding-bottom: 0.6rem;
				}
			}
		}
	}
}

/* カテゴリ */
.dress-category {
	@media (width > 767px) {/* PC */
		grid-column: 1;
		grid-row: 1 /-1;
		width: 38.4rem;
		border-right: 1px solid var(--cc-line-A);
	}

	/* フェード全体 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}
	.fade-enter-to,
	.fade-leave-from {
		opacity: 1;
	}
}

.dress-category-search {
	@media (width > 767px) {/* PC */
		position: sticky;
		top: var(--header-height-pc);
		max-height: 100vh;
		padding: 8rem 6rem 12rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		&::-webkit-scrollbar{
			display: none;
		}
	}
	@media (width <= 767px) {/* SP */
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		width: 100%;
		height: 100%;
	}
}

.dress-category-search-modal {
	@media (width <= 767px) {/* SP */
		padding: 4.3rem 1.8rem 6.8rem;
		margin: calc(var(--header-height-sp) + 1.7rem) auto 0;
		width: calc(100% - 2.4rem);
		height: calc(100vh - (var(--header-height-sp) + 1.7rem));
		height: calc(100dvh - (var(--header-height-sp) + 1.7rem));
		background-color: #F5F4F2;
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		pointer-events: auto;
		overscroll-behavior: none;
		border-radius: 0.8rem;
		position: relative;
	}

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

.dress-category-search-actions{
	@media (width <= 767px) {/* SP */
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 11;
		width: 100%;
		background-color: var(--cc-back);
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		pointer-events: auto;
		overscroll-behavior: none;
		padding: 1.6rem 2.4rem;
		display: flex;
		gap: 1.6rem;
		align-items: center;
		justify-content: center;
		border-top: 1px solid var(--cc-line-A);
	}
	.c-btn-search {
		@media (width <= 767px) {/* SP */
			min-width: 15.5rem;
			padding-inline: 4.8rem;
		}
	}
}

.dress-category-list {
	margin-bottom: 8rem;
	@media (width <= 767px) {/* SP */
		margin-bottom: 4rem;
	}
}

.dress-category-item {
	overflow: hidden;
	&:not(:first-of-type) {
		margin-top: 4rem;
		
		@media (width <= 767px) {/* SP */
			margin-top: 2.4rem;
		}
	}
}

.dress-category-search-head {
	position: relative;
	padding-bottom: 0.8rem;
	@media (width <= 767px) {/* SP */
		padding-bottom: 1.6rem;
	}

	&::before,
	&::after {
		content: "";
		position: absolute;
		bottom: 1px;
		left: 0;
		height: 1px;
	}

	&::before {
		width: 5.6rem;
		z-index: 1;
		background-color: var(--cc-pinkgold);
	}
	&::after {
		width: 100%;
		height: 1px;
		background-color: var(--cc-line-B);
	}
}

.dress-category-heading {
	@media (width > 767px) {/* PC */
		font-size: 1.5rem;
		line-height: 2.4;
		font-weight: var(--text-fw-ja);
		letter-spacing: 0;
		position: relative;
		cursor: pointer;
		&:before {
			content: "";
			display: block;
			position: absolute;
			top: calc(50% - 0.8rem);
			right: 0.4rem;
			width: 0.8rem;
			height: 0.8rem;
			margin: auto;
			border-top: 1px solid  var(--cc-black-B);
			border-right: 1px solid  var(--cc-black-B);
			transform: rotate(135deg);
			transition: transform 0.3s;
		}
		.dress-category-item.is-open & {
			&::before {
				transform: rotate(-45deg);
			}
		}
	}
	@media (width <= 767px) {/* SP */
		font-size: 1.5rem;
		line-height: 1;
		font-weight: var(--text-fw-ja);
	}
}

.dress-category-search-cat-box {
	@media (width > 767px) {/* PC */
		display: flex;
		flex-wrap: wrap;
	}
	&:has(.dress-category-search-cat) {
		margin-block: 0.8rem;
	}

	&.-brand {
		.dress-category-search-cat {
			font-family: var(--ff-loniki);
			font-weight: var(--text-fw-en);
			letter-spacing: 0.167em;
		}
	}

	.dress-category-search-cat {
		transition-duration:.5s;
		color: var(--cc-icon-A);
		font-size: 1.2rem;
		line-height: 1.6;
		&:not(:last-of-type) {
			&::after {
				content: "／";
				margin-right: 0.1rem;
				margin-left: -0.3rem;
			}
		}
	}
}

.dress-category-search-detail {
	@media (width > 767px) {/* PC */
		display: none;
		.dress-category-item.is-open & {
			display: block;
		}
	}
}

.dress-category-search-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem 0.8rem;
	padding-top: 3.2rem;

	@media (width <= 767px) {/* SP */
		padding-top: 1.6rem;
		gap: 0.8rem;
	}
}

.dress-category-search-item {
	line-height: 1;
}

.dress-category-cat {
	cursor: pointer;
	transition-duration:.5s;
	display: inline-block;
	border: 1px solid var(--cc-pinkgold);
	background-color: #FBFAF6;
	border-radius: 3rem;
	padding-block: 0.55rem 0.85rem;
	padding-inline: 1.2rem;
	line-height: 1;
	@media (width <= 767px) {
		padding: 1.2rem;
	}
	
	input[type="checkbox"] {
		display: none;
	}
	
	&:has(input[type="checkbox"]:checked) {
		background-color: var(--cc-pinkgold);
		.dress-category-cat-txt {
			color: var(--cc-white-A);
		}
	}

	&:has(input[type="checkbox"]:disabled) {
		opacity:.6;
		cursor: not-allowed;
		background-color: #FBFAF6;
		.dress-category-cat-txt {
			color: var(--cc-pinkgold);
		}
	}

	&.-brand {
		.dress-category-cat-txt {
			font-family: var(--ff-loniki);
			font-weight: var(--text-fw-en);
			letter-spacing: 0.167em;
		}
	}

	.dress-category-cat-txt{
		display: inline-block;
		font-size: 1.2rem;
		letter-spacing: 0;
		color: var(--cc-pinkgold);
		text-align: center;
	}
}

.dress-category-search-sp {
	padding-inline-start: 1.6rem;
	padding-top: 1.6rem;
	display: flex;
	column-gap: 3.2rem;

	.c-btn-search {
		@media (width <= 767px) {/* SP */
			min-width: 11.4rem;
			padding-inline: 3.5rem 2rem;
			letter-spacing: 0.07em;
			line-height: 1;
		}

		&::after {
			@media (width <= 767px) {/* SP */
				content: "";
				position: absolute;
				top: 0;
				right: -1.6rem;
				width: 1px;
				height: 100%;
				background-color: var(--cc-line-B);
				pointer-events: none;
			}
		}
	}
}

.dress-category-search-sp-scroll {
	overflow-x: auto;
	.in {
		.dress-category-search-sp-scroll-select-wrap {
			display: flex;
			align-items: center;
			max-width: calc(100% - 0.6rem);
			width: 100%;
			padding: 0;
			gap: 0.8rem;
			white-space: nowrap;
		}

		.dress-category-search-sp-scroll-select {
			display: flex;
			gap: 0.8rem;
			&:last-of-type {
				padding-right: 1.6rem;
			}
			.dress-category-search-sp-scroll-tag {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border: none;
				border-radius: 3rem;
				background: var(--cc-pinkgold);
				color: var(--cc-white-A);
				font-size: 1.2rem;
				font-weight: var(--text-fw-ja);
				text-decoration: none;
				letter-spacing: 0;
				line-height: 1;
				padding: 1.2rem;
				padding-right: 3.2rem;
				height: 3.6rem;

				&.-brand {
					font-family: var(--ff-loniki);
					font-weight: var(--text-fw-en);
					letter-spacing: 0.167em;
				}
			
				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 0;
					right: 1.6rem;
					bottom: 0;
					width: 1rem;
					height: 1px;
					margin: auto;
					background-color: var(--cc-white-A);
				}
				&::before{
					transform: rotate(45deg);
				}
				&::after{
					transform: rotate(-45deg);
				}
			}
		}
	}
}

/* SP用絞り込みの追従ボタン */
.dress-search-follow {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	background-color: var(--cc-back);
	border-top: 1px solid var(--cc-line-A);
	border-bottom: 1px solid var(--cc-line-A);
	padding: 1.6rem 2.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dress-search-follow-count {
	color: var(--cc-pinkgold);
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: 1;
	font-size:1.4rem;
	letter-spacing: 0.14em;
}
.dress-search-follow-btn {
	min-width: 11.4rem;
	padding-inline: 3.5rem 2rem;
}


/* 一覧 */
.dress-archive-contents {
	@media (width > 767px) {/* PC */
		grid-column: 2;
		grid-row: 2;
		padding: 10rem;
		padding-bottom: 16rem;
	}
	@media (width <= 767px) {/* SP */
		position: relative;
		padding-bottom: 8rem;
	}

/* リストアイテムのフェードイン */
.fade-enter-active {
  transition: opacity 0.5s ;
}
.fade-leave-active {
  transition: opacity 0.5ms;
}
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
}

.dress-archive-contents-count {
	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;

	@media (width <= 767px) {/* SP */
		font-size:1.4rem;
		letter-spacing: 0.14em;
		padding: 1.7rem 2.4rem;
	}
}

.dress-archive-contents-list {
	display: grid;
	padding-top: 6.4rem;
	@media (width > 767px) {/* PC */
		max-width: 101.6rem;
		grid-template-columns: repeat(4, 1fr);
		gap: 5.6rem 2.0rem;
	}
	@media (width <= 767px) {/* SP */
		grid-template-columns: repeat(2, 1fr);
		gap: 3.2rem 1.5rem;
		padding-inline: 2.4rem;
		padding-top: 2.4rem;
		border-top: 1px solid var(--cc-line-A);
	}
}
.dress-archive-contents-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;

		@media (hover:hover) {
			&:hover {
				.-of:not(.no-back) > img {
					&.f {
						opacity:0;
					}
					&.b {
						opacity:1;
					}
				}
				.-of.no-back > img {
					&.f {
						opacity: 0.7;
					}
				}
			}
		}
	}
}

.dress-archive-contents-item-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;

}

.dress-archive-contents-item-pict {
	grid-column: 1 /-1;
	grid-row: 1;
	position:relative;
	aspect-ratio:239/375;
	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:239/375;
		@media (width <= 767px) {/* SP */
			aspect-ratio:156/244;
		}
		
		&.b {
			opacity:0;
		}
	}
}

.dress-archive-contents-mylist {
	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;
	}
	span > svg{
		width: 1.6rem;
		height: 1.4rem;
		display: block;
		overflow: visible;

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

.dress-archive-contents-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;
	}
}
.-kimono {
	.dress-archive-contents-item-title{
		font-family: var(--ff-default);
		font-weight: var(--text-fw-ja);
		letter-spacing: 0;
	}
}

.dress-archive-contents-item-cat-box {
	grid-column: 1;
	grid-row: 3;
	margin-top: 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;

	@media (width <= 767px) {/* SP */
		margin-top: 0.4rem;
		gap: 0.2rem;
	}

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

	.dress-archive-contents-item-cat-wrap {
		word-break: break-all;
		line-height: 1.2;
	}
	
	.dress-archive-contents-item-cat {
		font-size:1.1rem;
		color: var(--cc-icon-A);
		line-height: 1.2;
		&:not(:last-of-type){
			&::after {
				content: "/";
				padding-right: 0.25rem;
			}
		}
	}
}

.dress-archive-contents-empty{
	@media (width > 767px){
		padding-top: 10rem;
	}
	@media (width <= 767px){
		padding: 1.6rem;
	}
}
.dress-archive-noitems {
	@media (width > 767px){
		padding: 10rem;
	}
	@media (width <= 767px){
		padding: 5rem 1.6rem 8rem;
	}
}

/* 詳細ページ
----------------------------------------------------------------------------- */
.dress-single-contents-wrap {
	@media (width > 767px) {/* PC */
		max-width: 120rem;
		margin: 0 auto;
		display:grid;
		grid-template-rows:1fr;
		grid-template-columns:calc(50% - 5.8rem) 1fr;
	}
	@media (width <= 767px) {/* SP */
			position: relative;
	}
}

.dress-single-contents-view-icon {
	.c-btn-close {
		@media (width <= 767px) {/* SP */
			position: absolute;
			top: 1.2rem;
			left: 1.6rem;
			width: 3.6rem;
			height: 3.6rem;
			border-radius: 50%;
			min-width: auto;
			z-index: 2;
			&::before,
			&::after{
				left: 0;
				right: 0;
				bottom: 0;
				width: 1.8rem;
			}
		}
	}
}
.dress-single-contents-view-mylist {
	@media (width <= 767px) {/* SP */
		position: absolute;
		top: 1.2rem;
		right: 1.6rem;
		z-index: 2;
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 50%;
		background-color: var(--cc-white-A);
		border: 1px solid var(--cc-pinkgold);
		span {
			display: flex;
			align-items: center;
			justify-content: center;
			> svg {
				overflow: visible;
				display: block;
				width: 1.6rem;
				height: 1.4rem;
			}
		}
	}
}
.dress-single-contents-kv {
	@media (width > 767px) {/* PC */
		grid-row:1/2;
		grid-column:1/2;
		margin-right: 6.4rem;
		margin-block: 5.6rem;
	}
	@media (width <= 767px) {/* SP */
	}
	.dress-single-js-kv {
		height:74.9rem;
		position:relative;
		overflow:visible;
		@media (width <= 767px) {/* SP */
			height:58.8rem;
		}
		.splide__track {
			height:100%;
		}
		.splide__list {
			height:100%;
		}
		.splide__slide {
			width:100%;
			height:100%;

			> img {
				width: 100%;
				aspect-ratio: 478 / 749;
			}
		}
	}
	.dress-single-js-thumbnail {
		margin-top:.8rem;

		.splide__track {
			touch-action: pan-y;
		}
		.splide__list:not(:has(.splide__slide:nth-child(5))) {
			justify-content: center;
			.splide__slide:last-child {
				margin-right:0;
			}
		}
		.splide__slide {
			position: relative;
			&::after {
				transition-property: background-color;
				transition-duration:.5s;
			}

			> img {
				@media (width > 767px) {
					width: 9.2rem;
					height:14.4rem;
				}
			}

			&:not(.is-active) {
				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.2);
					cursor: pointer;
				}
			}
		}
	}

	.splide__arrows {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		@media (width <= 767px) {/* SP */
			left: 1.7rem;
			bottom: -1.7rem;
			gap: 3rem;
		}
		.splide__arrow {
			width: 5rem;
			height: 5rem;
			border-radius: 50%;
			border: 1px solid var(--cc-pinkgold);
			background-color: rgba(255, 255, 255, 0.7);
			svg {
				display: none;
			}
			@media (width > 767px) {/* PC */
				position: relative;
				&:before {
					content: "";
					display: block;
					width: 1.2rem;
					height: 1.2rem;
					margin: auto;
					position: absolute;
					top: 50%;
					left: 50%;
					transition: transform 0.3s;
				}
			}

			@media (width <= 767px) {/* SP */
			}
			@media (hover) {
				& {
					transition: opacity 0.3s ease-out;
				}
				&:hover {
					opacity: 0.7;
				}
			}
		}
		.splide__arrow--next {
			@media (width > 767px) {/* PC */
				left: 2.4rem;
				&:before {
					border-top: 1px solid var(--cc-pinkgold);
					border-right: 1px solid var(--cc-pinkgold);
					transform: rotate(45deg) translate(-80%, 10%);
				}
			}
		}
		.splide__arrow--prev {
			@media (width > 767px) {/* PC */
				right: 2.4rem;
				&:before {
					border-bottom: 1px solid var(--cc-pinkgold);
					border-left: 1px solid var(--cc-pinkgold);
					transform: rotate(45deg) translate(-60%, -10%);
				}
			}
		}
	}

	.splide__pagination {
		@media (width <= 767px) {/* SP */
			position: absolute;
			justify-content: space-between;
			flex-wrap: nowrap;
			gap: 0.4rem;
			bottom: 2.4rem;
			left: 50%;
			transform: translateX(-50%);
			width: 87vw;

			li {
				display: flex;
				align-items: center;
				width: 100%;
			}
			button {
				transition: background-color .3s;
				width: 100%;
				height: 0.5rem;
				border-radius: 0.3rem;
				opacity: 0.5;
				background-color: var(--cc-white-A);
			
				&.is-active  {
					opacity: 0.9;
				}
			}
		}
	}
	&:not(.is-overflow) .splide__pagination {
		display: flex;
	}
}

.dress-single-contents-text {
	@media (width > 767px) {
		grid-row:1/2;
		grid-column:2/3;
		padding-top: 14.8rem;
		padding-left: 14.8rem;
		border-left: 1px solid var(--cc-line-A);
	}
	@media (width <= 767px) {/* SP */
		padding: 3.2rem 2.4rem 5.6rem;
	}
}
.dress-single-contents-text-header {
	font-family:var(--ff-loniki);
	font-weight:var(--text-fw-en);
	line-height:1.8;
	margin-bottom: 6.4rem;
	@media (width > 767px) {/* PC */
		transition-property: transform;
		transition-duration: 1s;
	}
	@media (width <= 767px) {/* SP */
		margin-bottom: 2.4rem;
	}
}
.dress-single-contents-title {
	margin-bottom:.8rem;
	font-size:3.0rem;
	color: var(--cc-pinkgold);
	font-weight: var(--text-fw-en);
	letter-spacing: 0.17em;
	@media (width <= 767px) {/* SP */
		font-size: 2.4rem;
		letter-spacing: 0.14em;
	}
}
.-kimono {
	.dress-single-contents-title {
		font-family: var(--ff-default);
		font-weight: var(--text-fw-ja);
		letter-spacing: 0;
	}
}
.dress-single-contents-id {
	font-size:1.4rem;
	letter-spacing: 0.14em;
	color:var(--cc-icon-A);
	@media (width <= 767px) {/* SP */
		font-size: 1.2rem;
		letter-spacing: 0.167em;
	}
}

.dress-single-contents-text-detail {
	@media (width > 767px) {/* PC */
	}
}
.dress-single-contents-heading {
	margin-bottom: 2.4rem;
	font-family:var(--ff-shuei);
	font-weight:500;
	font-size:1.8rem;
	line-height:2.4;
	letter-spacing: 0.2em;
	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
		font-size:1.4rem;
	}
}
.dress-single-contents-desc {
	font-family:var(--ff-default);
	letter-spacing: 0;
	text-align: justify;
	@media (width > 767px) {/* PC */
		font-size: 1.4rem;
		line-height:2.4;
		margin-bottom:5.6rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 1.1rem;
		line-height: 2.1;
		margin-bottom: 4rem;
	}
}
.dress-single-contents-table {
	display:grid;
	grid-template-columns:auto 1fr;
	gap: 1.8rem;
	@media (width <= 767px) {/* SP */
		grid-template-columns: 1fr 1fr;
		gap: 1.9rem;
	}

	> div {
		grid-column:1/-1;
		display:grid;
		column-gap: 2.8rem;
		grid-template-columns:subgrid;
	}
	dt {
		font-family:var(--ff-loniki);
		font-weight:var(--text-fw-en);
		font-size: 1.4rem;
		line-height:1;
		letter-spacing: 0.14em;
		color: var(--cc-pinkgold);
	}
	dd {
		display:flex;
		flex-wrap:wrap;
		gap:.5em;
		font-size: 1.2rem;
		letter-spacing: 0;
		line-height:1;
		color: var(--cc-icon-A);

		span {
			&:not(:last-of-type){
				&::after {
					content: "、";
				}
			}
		}
	}
}
.dress-single-contents-button {
	display: flex;
	align-items: center;
	gap:3.2rem;
	margin-top:8.8rem;
	@media (width <= 767px) {/* SP */
		flex-direction: column;
		gap:1.6rem;
		margin-top:4rem;
	}
}

.dress-single-contents-button-mylist {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cc-pinkgold);
	border-radius: 5rem;
	background: var(--cc-pinkgold);
	color: var(--cc-white-A);
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	text-decoration: none;
	font-size: 1.4rem;
	letter-spacing: 0.14em;
	line-height: 1.8;
	transition: all 0.2s ease;

	@media (width > 767px) {/* PC */
		min-width: 31.5rem;
		height: 6rem;
		padding-inline: 4rem;
	}
	@media (width <= 767px) {/* SP */
		min-width: 22rem;
		max-width: 22rem;
		width: 100%;
		height: 4.8rem;
		padding-inline: 6rem 3rem;
		justify-content: flex-start;
	}

	.dress-single-contents-button-mylist-icon {
		position: absolute;
		transition: all 0.3s ease-out;

		> svg {
			overflow: visible;
			display: block;
			path {
				fill: var(--cc-white-A);
			}
		}

		@media (width > 767px) {/* PC */
			inset-inline-start: 2.9rem;
			width: 1.8rem;
			height: 2rem;
		}
		@media (width <= 767px) {/* SP */
			width: 1.5rem;
			height: 1.3rem;
			inset-inline-start: 2.8rem;
		}
	}

	&.is-active {
		color: var(--cc-pinkgold);
		background: #FBFAF6;;
		border: 1px solid var(--cc-pinkgold);
		.dress-single-contents-button-mylist-icon {
			> svg {
				path {
					fill: var(--cc-pinkgold);
				}
			}
		}
	}

	span {
		&.ja {
			font-family: var(--ff-default);
			font-weight: var(--text-fw-ja);
			letter-spacing: 0;
		}
	}

	@media(hover) {
		&:hover {
			opacity: 0.6;
		}
	}
}

.dress-single-contents-share-pc {
	display: flex;
	column-gap: 0.8rem;
	align-items: center;

	.dress-single-contents-sns-ttl {
		font-family: var(--ff-loniki);
		font-weight: var(--text-fw-en);
		font-size: 1.4rem;
		line-height: 1.8;
		letter-spacing: 0.14em;
		color: var(--cc-pinkgold);
	}

	.dress-single-contents-sns-box {
		display: flex;
		@media (width > 767px) {/* PC */
			gap: 0.8rem;
		}
		& a {
			@media (width > 767px) {/* PC */
				width: 4.4rem;
				height: 4.4rem;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				background-color: var(--cc-pinkgold);
				border-radius: 50%;
			}
			@media (hover) {
				& {
					transition: opacity 0.3s;
				}
				&:hover {
					opacity: 0.6;
				}
			}
		}
		.dress-single-contents-sns-line {
			background-image: url('/assets/img/icon-line.svg');
			background-size: 2.5rem 2.4rem;
		}
		.dress-single-contents-sns-mail {
			background-image: url('/assets/img/icon-mail.svg');
			background-size: 2.1rem 1.7rem;
		}
	}
}

/* レコメンド・ブランド　一覧
----------------------------------------------------------------------------- */
.dress-single-row {
	display: flex;
	flex-direction: column;
	
	&:has(.dress-single-row-contents) {
		border-top: 1px solid var(--cc-line-A);
		@media (width > 767px){
			padding-block: 12rem 16rem;
		}
		@media (width <= 767px){
			padding-block: 5.6rem 8rem;
			gap: 5.6rem;
		}
	}
}

.dress-single-row-contents {
	&:last-of-type {
		.dress-single-row-contents-wrap {
			@media (width > 767px){
				border-bottom: 1px solid var(--cc-line-A);
			}
		}
	}
}

.dress-single-row-contents-wrap {
	@media (width > 767px){
		margin: 0 auto;
		max-width: 120rem;
		width: 100%;
		padding-bottom: 6.4rem;
	}
}

.dress-single-row-contents-heading {
	display: flex;
	border-top: 1px solid var(--cc-line-A);
	border-bottom: 1px solid var(--cc-line-A);
	line-height:2.4;
	letter-spacing: 0;
	@media (width > 767px){
		padding: 2.4rem 4rem;
		font-size:1.4rem;
		align-items: baseline;
		column-gap: 2.4rem;
	}
	@media (width <= 767px){
		flex-direction: column;
		width: calc(100% - 4.8rem);
		margin: 0 auto;
		padding: 1.6rem 0.8rem;
		font-size:1rem;
		gap: 0.4rem;
		align-items: flex-start;
	}
	& span {
		&::before {
			font-size:2.4rem;
			line-height:1.8;
			letter-spacing: 0.16em;
			padding-bottom: 0;
			@media (width <= 767px){
				line-height:1;
			}
		}
	} 
}

.dress-single-row-contents-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: 4rem;
	}
}
.dress-single-row-contents-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 );
	}
}

.dress-single-row-contents-item-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.dress-single-row-contents-item-pict {
	grid-column: 1 /-1;
	grid-row: 1;
	position:relative;
	pointer-events: none;
	aspect-ratio:239/375;
	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:239/375;
		@media (width <= 767px) {/* SP */
			aspect-ratio:156/244;
		}
		
		&.b {
			opacity:0;
		}
	}
}

.dress-single-row-contents-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);
				}
			}
		}
	}
}

.dress-single-row-contents-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.4;
	letter-spacing: 0.14em;
	@media (width <= 767px) {/* SP */
		font-size:1.3rem;
		letter-spacing: 0.15em;
	}
}
.-kimono {
	.dress-single-row-contents-item-title {
		font-family: var(--ff-default);
		font-weight: var(--text-fw-ja);
		letter-spacing: 0;
	}
}

.dress-single-row-contents-item-cat-box {
	grid-column: 1;
	grid-row: 3;
	margin-top: 0.4rem;
	display: flex;
	flex-direction: column;
	@media (width <= 767px) {/* SP */
		margin-top: 0;
	}

	.dress-single-row-contents-item-cat-group {
		line-height: 1;

		&.-brand {
			.dress-single-row-contents-item-cat {
				font-family: var(--ff-loniki);
				font-weight: var(--text-fw-en);
				letter-spacing: 0.2em;
			}
		}
	}

	.dress-single-row-contents-item-cat-wrap {
		word-break: break-all;
		line-height: 1.2;
	}
	
	.dress-single-row-contents-item-cat {
		font-size:1.0rem;
		color: var(--cc-icon-A);
		line-height: 1.2;
		&:not(:last-of-type){
			&::after {
				content: "/";
				padding-right: 0.25rem;
			}
		}
	}
}