@charset "utf-8";

:root {
	--pcv: / 747 * 100vw;
	--pcp: / 747 * 100%;
	
	--spv: / 167 * 100vw;
	--spp: / 167 * 100%;
}

/* -------------------------------------------------
	adobe fonts (Termina)
------------------------------------------------- */
/*
Termina Regular
	font-family: "termina", sans-serif;
	font-weight: 400;
	font-style: normal;

Termina Medium
	font-family: "termina", sans-serif;
	font-weight: 500;
	font-style: normal;
*/

/* -------------------------------------------------
	reset
------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
}

html {
}

body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	position: relative;
	font-family: 'termina', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-weight: 400;
	color: #231815;
}

p, h1, h2, h3, h4, th, td, li, dt, dd, figcaption, input, select, textarea {
	font-weight: 400;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

iframe {
	border: none;
}

a {
	text-decoration: none;
	color: #231815;
	outline: none !important;
}
a:focus {
	outline: none !important;
}

ul, ol {
	list-style-type: none;
}

main {
	display: block;
	width: 100%;
	overflow: hidden;
}

@media print, screen and (min-width:768px) {
	a[href^="tel:"] {
		cursor: default;
	}
}

/* -------------------------------------------------
	box
------------------------------------------------- */

.box1066 {
	width: 96%;
	max-width: 1066px;
	margin: 0 auto;
	position: relative;
}

@media screen and (max-width:767px) {
	.box-sp {
		width: calc(670 / 750 * 100%);
		margin: 0 auto;
		position: relative;
	}
}

/* -------------------------------------------------
	responsive
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.pc-none {
		display: none !important;
	}
}

@media screen and (max-width:767px) {
	.sp-none {
		display: none !important;
	}
}

/* -------------------------------------------------
	print
------------------------------------------------- */

@media print {
	body {
		width: 980px !important;
	}
}

/* -------------------------------------------------
	animation
------------------------------------------------- */

.anim {
	opacity: 0;
	transition: all 1.6s cubic-bezier(.12,.92,.31,.95);
	transform: translateY(3vw);
}

.anim.delay01 { transition-delay: 0.1s; }
.anim.delay02 { transition-delay: 0.2s; }
.anim.delay03 { transition-delay: 0.3s; }

@media print, screen and (min-width:768px) {
	.anim.pc-delay01 { transition-delay: 0.1s; }
	.anim.pc-delay02 { transition-delay: 0.2s; }
	.anim.pc-delay03 { transition-delay: 0.3s; }
}

@media screen and (max-width:767px) {
	.anim {
		transform: translateY(3vw);
	}
	.anim.sp-delay01 { transition-delay: 0.1s; }
	.anim.sp-delay02 { transition-delay: 0.2s; }
	.anim.sp-delay03 { transition-delay: 0.3s; }
}

.anim.on {
	opacity: 1;
	transform: translate(0,0);
}

/* -------------------------------------------------
	h1
------------------------------------------------- */

h1 {
	height: calc(108 var(--pcv));
	text-align: center;
}
h1 .logo1 {
	width: calc(106 var(--pcp));
	position: fixed;
	left: 50%;
	top: calc(45 var(--pcv));
	transform: translateX(-50%);
	z-index: 20;
	transition: opacity 0.2s ease-out;
}
h1 .logo2 {
	width: auto;
	height: calc(5 var(--pcv));
	position: relative;
	top: calc(70 var(--pcv));
	display: inline-block;
}

@media screen and (max-width:767px) {
	h1 {
		height: calc(55 var(--spv));
	}
	h1 .logo1 {
		width: calc(65 var(--spp));
		top: calc(19 var(--spv));
	}
	h1 .logo1.op0 {
		opacity: 0;
	}
	h1 .logo2 {
		height: calc(4 var(--spv));
		top: calc(33 var(--spv));
	}
}

/* -------------------------------------------------
	.top-looks
------------------------------------------------- */

.top-looks {
	margin: 0 auto;
}
.top-looks li a {
	display: block;
	overflow: hidden;
}

@media print, screen and (min-width:768px) {
	.top-looks {
		width: calc(587 var(--pcp));
		display: flex;
		flex-wrap: wrap;
		gap: calc(5 var(--pcv)) calc(5 / 587 * 100%);
	}
	.top-looks li {
		width: calc(143 / 587 * 100%);
	}
	.top-looks li a img {
		transition: opacity 0.6s ease;
	}
	.top-looks li a:hover img {
		opacity: 0.5;
	}
}

@media screen and (max-width:767px) {
	.top-looks {
		width: calc(161 var(--spp));
	}
	.top-looks li + li:not(.sp-none) {
		margin-top: calc(2 var(--spv));
	}
}

/* -------------------------------------------------
	.btn-area
------------------------------------------------- */

.btn-area {
	padding: calc(90 var(--pcv)) 0 calc(27 var(--pcv));
	text-align: center;
}
.btn-area img {
	width: calc(91 var(--pcv));
	display: inline-block;
}

@media screen and (max-width:767px) {
	.btn-area {
		padding: calc(30 var(--spv)) 0 calc(15 var(--spv));
	}
	.btn-area img {
		width: calc(67 var(--spv));
	}
}

/* -------------------------------------------------
	.looks2
------------------------------------------------- */

.looks2 .num {
	font-size: calc(6 var(--pcv));
	letter-spacing: 0.05em;
	color: #9fa0a0;
	transform-origin: left center;
	transform: scaleX(0.8);
}
.looks2 .num strong {
	color: #231815;
	font-weight: 400;
}

.looks2 .products li {
	font-size: calc(7 var(--pcv));
	letter-spacing: 0.05em;
	transform-origin: left center;
	transform: scaleX(0.8);
}
.looks2 .products li.nowrap {
	white-space: nowrap;
}
.looks2 .products li + li {
	margin-top: 0.9em;
}
.looks2 .products li .small {
	margin-left: 1.6em;
	display: inline-block;
	font-size: calc(5.5 var(--pcv));
	letter-spacing: 0.05em;
	vertical-align: middle;
}
.looks2 .products li .small.block {
	margin: 0.5em 0 0;
	display: block;
}
.looks2 .products li a {
	font-weight: 500;
	letter-spacing: 0.05em;
}

.slick-dotted.slick-slider {
	margin-bottom: 0;
}

.looks2 .slick-dots {
	display: flex;
	justify-content: center;
}
.looks2 .slick-dots li {
	width: calc(3 var(--pcv));
	height: calc(3 var(--pcv));
	margin: 0;
	border-radius: 50%;
	background: #b5b5b6;
	cursor: pointer;
	overflow: hidden;
}
.looks2 .slick-dots li.slick-active {
	background: #231815;
}
.looks2 .slick-dots li + li {
	margin-left: calc(4 var(--pcv));
}
.looks2 .slick-dots li button {
	width: 100%;
	height: 100%;
	background: transparent;
	font-size: 1px;
	color: transparent;
	border: none;
}

/* カレントスライドによる商品リンクの表示制御 */
/*
#look3[data-current="2"] .products .dress,
#look4[data-current="2"] .products .pants,
#look5[data-current="2"] .products .coat,
#look8[data-current="2"] .products .skirt,
#look11[data-current="1"] .products .scarf,
#look11[data-current="2"] .products .cardigan,
#look11[data-current="2"] .products .shirt,
#look11[data-current="2"] .products .skirt {
	display: none;
}
*/

/* カレントスライドにによって商品リンクのが一部非表示になり、高さが減る部分を埋める */
/*
#look3[data-current="2"] .group::after,
#look4[data-current="2"] .group::after,
#look5[data-current="2"] .group::after,
#look8[data-current="2"] .group::after {
	height: calc(8 var(--pcv));
	margin-top: 0.9em;
	content: "";
	display: block;
	font-size: calc(8 var(--pcv));
}
#look11[data-current="2"] .group::after {
	height: calc(16 var(--pcv));
	margin-top: 1.8em;
	content: "";
	display: block;
	font-size: calc(8 var(--pcv));
}
*/

@media print, screen and (min-width:768px) {
	.looks2 {
		width: calc(586 var(--pcp));
		margin: 0 auto;
	}
	.looks2 .look {
		display: flex;
	}
	.looks2 .look:nth-child(odd) {
		justify-content: flex-end;
	}
	.looks2 .look:nth-child(even) {
		flex-direction: row-reverse;
	}
	.looks2 .look + .look {
		margin-top: calc(41 var(--pcv));
	}
	.looks2 .look .slide-wrap {
		width: calc(294 / 586 * 100%);
	}
	.looks2 .look:nth-child(odd) .slide-wrap {
		margin-left: calc(43 / 586 * 100%);
	}
	.looks2 .look:nth-child(even) .slide-wrap {
		margin-right: calc(43 / 586 * 100%);
	}
	.looks2 .look .texts {
		width: calc(250 / 544 * 100%);
		display: flex;
		align-items: center;
	}
	.looks2 .look .texts .group {
		margin-left: calc(64 / 250 * 100%);
	}
	.looks2 .look .texts .products {
		margin-top: calc(40 var(--pcv));
	}
	.looks2 .products li a:hover {
		text-decoration: underline;
	}
	
	.looks2 .slick-dots {
		width: 100%;
		padding-top: calc(11 var(--pcv));
		position: absolute;
		top: 100%;
	}
}

@media screen and (max-width:767px) {
	.looks2 .look {
		position: relative;
	}
	.looks2 .look + .look {
		margin-top: calc(18 var(--spv));
	}
	
	.looks2 .slide-wrap {
		width: calc(162 var(--spp));
		margin: 0 auto;
	}
	
	.looks2 .num {
		font-size: calc(4 var(--spv));
		position: absolute;
		right: calc(8 var(--spv));
		top: calc(210 var(--spv));
		transform-origin: right center;
	}
	
	.looks2 .products {
		margin: calc(11 var(--spv)) 0 0 calc(8 var(--spv));
	}
	.looks2 .products li {
		font-size: calc(5.5 var(--spv));
	}
	.looks2 .products li.sp-nowrap {
		white-space: nowrap;
	}
	.looks2 .products li + li {
		margin-top: 0.6em;
	}
	.looks2 .products li .small {
		font-size: calc(4 var(--spv));
	}
	
	.looks2 .slick-dots {
		margin: calc(6 var(--spv)) 0 0;
		position: static;
	}
	.looks2 .slick-dots li {
		width: calc(3 var(--spv));
		height: calc(3 var(--spv));
		margin: 0;
	}
	.looks2 .slick-dots li + li {
		margin-left: calc(4 var(--spv));
	}
	
	/* カレントスライドにによって商品リンクのが一部非表示になり、高さが減る部分を埋める */
	/*
	#look3[data-current="2"] .group::after,
	#look4[data-current="2"] .group::after,
	#look5[data-current="2"] .group::after,
	#look8[data-current="2"] .group::after {
		height: calc(6.5 var(--spv));
		margin-top: 0.6em;
		font-size: calc(6.5 var(--spv));
	}
	#look11[data-current="2"] .group::after {
		height: calc(13 var(--spv));
		margin-top: 1.2em;
		font-size: calc(6.5 var(--spv));
	}
	*/
}

/* -------------------------------------------------
	footer
------------------------------------------------- */

footer p {
	padding-bottom: calc(12 var(--pcv));
	font-size: calc(5.5 var(--pcv));
	text-align: center;
	transform: scaleX(0.8);
}

@media screen and (max-width:767px) {
	footer p {
		padding-bottom: calc(8 var(--spv));
		font-size: calc(4 var(--spv));
	}
}