@charset 'UTF-8';
:root {
	/* FONT COLOR */
	--mat-black: #363636; --flat-black: #1a1a1a;
	--mat-white: #c5c4c2; --flat-white: #f5f4f2;
}


/* title wrap */
.lookbook.title__wrap .lookbook__num { width: 100%; margin: 0 0 5%; text-align: center; }
.title__wrap.lookbook .lookbook__num.didot.name > span { display: block; text-align: center; margin: 5% 0 0; font-family: 'Didot-htf'; }
@media screen and (max-width:960px){
	.title__wrap.lookbook { margin: 30% 0 0; }
	.title__wrap.lookbook.pickup h2 { width: 90%; margin: 0 5%; font-size: 3.5vw; font-weight: 700; text-align: left; }
	.title__wrap.lookbook h2 { width: 90%; margin: 0 5%; font-size: 3.5vw; font-weight: 700; text-align: center; }
	.title__wrap.lookbook p { font-size: 3.25vw; letter-spacing: .02em; line-height: 1.5; margin: 5% 5% 0; }
	.title__wrap.lookbook .lookbook__num.didot { margin: 15% 0 20%; font-size: 20vw; }
}
@media screen and (min-width:960px){
	.lookbook.title__wrap { margin: 10% 0; }
	.lookbook.title__wrap h2 { font-size: 2rem; margin: 0 0 2.5%; width: 100%; text-align: center; }
	.lookbook.title__wrap p { width: 50%; }
	.lookbook.title__wrap .lookbook__num { font-size: 6rem; margin: 0 0 5%; }
}

@media screen and (max-width:1024px){ /* Phone style */
	
	/* lookbook */
	.section-wrap.lookbook { overflow: hidden; background-color: black; color: white; }
	.page.lookbook.wrap { margin: 0; background-color: black; overflow: hidden; color: var(--mat-white); }
	
	.page.lookbook.keyvisual__wrap { margin: 20% 0 0; }
	.page.lookbook.keyvisual__wrap > h1 { text-align: center; margin: 12rem 0 2rem; }
	.keyvisual.mov.front { width: 100%; }
	
	.product__link.lookbook { margin: 0 5% 20%; display: flex; flex-flow: column; }
	.product__link.lookbook > div { margin: 5%; font-weight: 700; }
	.product__link.lookbook a { color: var(--mat-white); display: flex; align-items: baseline; margin: 5% 0; width: 100%; font-size: .8rem; }
	.product__link.lookbook a::before { display: inline-block; font-family: "Font Awesome 5 Free"; content: "\f360"; font-weight: 900; margin-right: 1rem; }
	.product__link.lookbook a > span { display: block; flex-shrink: 0; }
	.product__link.lookbook a > span:nth-child(1) { margin-right: 1em; }
	.product__link.lookbook a > span:nth-child(2) { white-space: nowrap; }
	.product__link.lookbook a > span:nth-child(2) > span:first-child,.product__link.lookbook a > span:nth-child(2) > span:last-child { font-weight: 400; margin: 0 1%; font-size: 1vw; }
	.product__link.lookbook a .fs06 { margin-left: .5rem; }
	
	.note.lookbook { margin: 40% 5% 10%; }
	.note.lookbook .titile__lv2 { display: flex; justify-content: center; margin: 0 0 5%; }
	.note.lookbook p { font-size: .75rem; line-height: 1.75; letter-spacing: .03em; }
	
	.column.layout__01 { margin: 0 0 15% 0; }
	.column.layout__02 { margin: 15% 15% 15% 0; }	.column.layout__02.right { margin: 15% 0 15% 15%; }
	.column.layout__03,.column.layout__04 { margin: 15% 0 15% 0; display: flex; align-items: flex-start; }
	.column.layout__03 > img,.column.layout__04 > img { display: block; width: 50%; }
	.column.layout__04 > img:last-child { margin: 15% 0 0 0; }
	.column.layout__05 { margin: 15% 10% 15% 10%; }
	.column.layout__06 { margin: 10% 0; }
	.column.layout__07 { margin: 10% 0; }
	.column.layout__07 img { width: 90%; }
	.column.layout__07 img:first-child { margin: 0 10% 0 0; }
	.column.layout__07 img:last-child { margin: 0 0 0 10%; }
	.column.artist { margin: 15% 10% 15% 10%; }

	.other__book { margin: 0 0 20%; }
}

@media screen and (min-width:1024px){ /* Desktop style */
	
	.page.lookbook.keyvisual__wrap { display: flex; width: 100%; margin: 0 0 10%; align-items: center; justify-content: space-between; flex-flow: row wrap; }
	.page.lookbook.keyvisual__wrap > figure { width: 50%; height: 100vh; overflow: hidden; }
	.page.lookbook.keyvisual__wrap h1 { width: 50%; text-align: center; }
	.page.lookbook.keymov { min-height: 100%; min-width: 100%; position: relative; }
	.keyvisual.mov { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
	.page.lookbook.keyvisual > img { width: 72.5%; }
	
	.page.lookbook.wrap { background-color: black; color: var(--flat-white); overflow: hidden; }
	.page.lookbook.wrap a { color: var(--mat-white); }
	.page.lookbook.wrap a:hover { color: dodgerblue; }
	
	
	.other__book.title__lv2 { text-align: center; }
	.other__book.contents__wrap { margin: 10% 0 0; }
	
	.lookbook.columns { display: flex; flex-flow: row wrap; max-width: 1000px; margin: 0 auto; }
	.lookbook.columns > .column { margin: 0 0 10%; }
	.lookbook.columns.artist { justify-content: center; }
	.lookbook.columns.artist .column.artist { width: 50%; }

	.column.w30 { width: 30%; }	.column.w60 { width: 60%; }	.column.w90 { width: 90%; }
	.column.w40 { width: 40%; }	.column.w70 { width: 70%; }	.column.w100 { width: 100%; }
	.column.w50 { width: 50%; }	.column.w80 { width: 80%; }
	
	.column.layout__02 { display: flex; flex-flow: column; align-items: center; justify-content: center; }	.column.layout__02 > img { width: 80%; }
	.column.layout__03 { display: flex; flex-flow: row; align-items: center; }	.column.layout__03 > img { width: 50%; }	.column.layout__03 > img:first-child { width: 40%; margin: 0 10% 0 0; }
	.column.layout__04 { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 50%; }	.column.layout__04 > img { width: 50%; }
	.column.layout__05 { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 50%; }	.column.layout__05 > img { width: 80%; }
	.column.layout__06 { width: 50%; margin-left: auto!important; margin-right: auto!important; margin-bottom: 10%; }
	.column.layout__07 { width: 50%; } .column.layout__07 img { width: 90%; margin: 0 0 0 10%; }
	
	.lookbook.product__link a { display: block; margin: 0 0 5% 10%; line-height: 1.5; }
	.lookbook.product__link a i { display: inline-block; margin: 0 5% 0 0; line-height: 1.5; }
	
	.flick__list.lookbook { display: flex; flex-flow: row wrap; margin: 10%; }
	.flick__list.lookbook li { width: calc(100% / 4 - 2%); margin: 1%; }
	
	.front.lookbook.flick__list,.front.lookbook.flick__list li { margin: 0; }

}
