/* --------------------------------------------------
Common
-------------------------------------------------- */
html, body { height: 100%; font-size: 10px; line-height: 1; }
@media screen and (min-width: 768px) and (max-width: 1000px) { html, body { font-size: 8px; } }

body { font-family: var(--font-family); color: var(--primary-color); font-display: swap; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; text-rendering: optimizeLegibility; line-height: 1; }
body img, body img[src$=".svg"], body video { width: 100%; aspect-ratio: 100/1; }
body main { display: block; }
body h1, body h2, body h3, body h4, body h5, body p { font-weight: inherit; }
body sup { line-height: inherit; }
body *:focus { outline: none; }
body button[data-js] { opacity: 0; pointer-events: none; }
body *:not(img)::selection { background: #cdcdcd; }
body *:not(img)::-moz-selection { background: #cdcdcd; }
body.is-loaded #wrapper { opacity: 1 !important; transition: opacity 0.2s ease 0s; }

@media screen and (orientation: portrait) { .pc { display: none !important; } }
@media screen and (orientation: landscape) { .sp { display: none !important; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
:root { --font-family: ibm-plex-sans, sans-serif; --font-footer: poppins, sans-serif; --primary-color: #000; --bg-color: #fff; --white-color: #fff; --acc-color: #c3a249; --ease: cubic-bezier(0.46, 0.1, 0.29, 1); --bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); --back: cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes hoverLine { 0% { transform: translate(0, 0); opacity: 1; }
  49% { transform: translate(100%, 0); opacity: 1; }
  50.3% { transform: translate(100%, 0); opacity: 0; }
  50.6% { transform: translate(-100%, 0); opacity: 0; }
  51% { transform: translate(-100%, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; } }
@keyframes slider { 0% { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
body #wrapper img.logoimage { aspect-ratio: 1000 / 1371; }
body #wrapper .imagearea.full img { height: 100vh; object-fit: cover; }
body #wrapper .header { width: 11.97%; position: fixed; right: 7.69%; bottom: 8.55vw; z-index: 9; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease) 0s; }
body #wrapper .top { position: relative; }
body #wrapper .top .imagearea { opacity: 0; }
body #wrapper .top .titlearea { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); }
body #wrapper .top .titlearea .collection-title { width: 83.33%; margin: 0 auto; }
body #wrapper .top .titlearea .collection-title img { aspect-ratio: 500 / 76; }
body #wrapper .top .titlearea .logo { width: 17.95%; position: absolute; left: 69.49%; top: 96%; opacity: 0; }
body #wrapper .look-wrapper .look .panel .image-container .imagearea { opacity: 0; }
body #wrapper .look-wrapper .look .panel .image-container .imagearea .image-slider { position: relative; }
body #wrapper .look-wrapper .look .panel .image-container .imagearea .image-slider li:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; }
body #wrapper .look-wrapper .look .panel .image-container .imagearea.is-show { opacity: 1; transition: opacity 1s var(--ease) 0s; }
body #wrapper .look-wrapper .look .panel .image-container .imagearea.is-show .image-slider li:nth-child(2) { animation: slider 8s linear 0s infinite; }
body #wrapper .look-wrapper .look .panel .textarea { padding: 3rem 0 0; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul { display: flex; flex-direction: column; row-gap: 1.2rem; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li { display: flex; align-items: center; column-gap: 1.2rem; font-size: 1rem; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .iteminfo { width: 50%; display: flex; justify-content: flex-end; column-gap: 0.35em; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn { width: 9rem; height: 1.2rem; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn a { height: 100%; display: flex; justify-content: center; align-items: center; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn:not(.ask) { color: var(--white-color); }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn:not(.ask) a { background: var(--primary-color); }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a { position: relative; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::before, body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::after { display: block; content: ""; width: 0.1rem; top: 0; bottom: 0; background: currentColor; position: absolute; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::before { left: 0; }
body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::after { right: 0; }
body #wrapper .look-wrapper .look01 { margin: 0 0 51.28%; display: flex; flex-direction: column; }
body #wrapper .look-wrapper .look01 .panel--2 { display: contents; }
body #wrapper .look-wrapper .look01 .panel--2 .image-container { width: 87.18%; margin: 0 auto; order: 100; }
body #wrapper .look-wrapper .look01 .panel--2 .image-container .imagearea img { aspect-ratio: 340 / 508; }
body #wrapper .look-wrapper .look01 .panel--2 .textarea { margin: 0 0 16.67%; }
body #wrapper .look-wrapper .look02 { margin: 0 0 33.33%; }
body #wrapper .look-wrapper .look02 .panel--1 .image-container .imagearea img { aspect-ratio: 535 / 800; }
body #wrapper .look-wrapper .look03 { margin: 0 0 28.21%; }
body #wrapper .look-wrapper .look03 .panel--1 .image-container { width: 66.67%; margin: 0 auto 26.92%; }
body #wrapper .look-wrapper .look03 .panel--1 .image-container .imagearea img { aspect-ratio: 310 / 463; }
body #wrapper .look-wrapper .look04 { margin: 0 0 34.62%; }
body #wrapper .look-wrapper .look04 .panel--1 .image-container { width: 66.67%; margin: 0 0 25.64%; }
body #wrapper .look-wrapper .look04 .panel--1 .image-container .imagearea img { aspect-ratio: 260 / 388; }
body #wrapper .look-wrapper .look04 .panel--2 .image-container { width: 84.62%; margin: 0 0 0 auto; }
body #wrapper .look-wrapper .look04 .panel--2 .image-container .imagearea img { aspect-ratio: 469 / 700; }
body #wrapper .look-wrapper .look05 { margin: 0 0 34.62%; }
body #wrapper .look-wrapper .look06 { margin: 0 0 39.74%; }
body #wrapper .look-wrapper .look06 .panel--1 .image-container { width: 77.95%; margin: 0 0 20.51%; }
body #wrapper .look-wrapper .look06 .panel--1 .image-container .imagearea img { aspect-ratio: 304 / 454; }
body #wrapper .look-wrapper .look07 { margin: 0 0 44.87%; }
body #wrapper .look-wrapper .look07 .panel--1 .image-container { width: 64.1%; margin: 0 0 25.64% auto; }
body #wrapper .look-wrapper .look07 .panel--1 .image-container .imagearea img { aspect-ratio: 260 / 388; }
body #wrapper .look-wrapper .look07 .panel--2 .image-container { width: 84.62%; margin: 0 0 0 auto; }
body #wrapper .look-wrapper .look07 .panel--2 .image-container .imagearea img { aspect-ratio: 469 / 700; }
body #wrapper .look-wrapper .look08 { margin: 0 0 43.59%; }
body #wrapper .look-wrapper .look08 .panel--1 .image-container .imagearea img { aspect-ratio: 535 / 800; }
body #wrapper .look-wrapper .look09 .panel--1 .image-container { width: 87.18%; margin: 0 0 15.38%; }
body #wrapper .look-wrapper .look09 .panel--1 .image-container .imagearea img { aspect-ratio: 469 / 700; }
body #wrapper .look-wrapper .look09 .panel--2 .image-container { width: 74.36%; margin: 0 0 0 19.23%; }
body #wrapper .look-wrapper .look09 .panel--2 .image-container .imagearea img { aspect-ratio: 469 / 700; }
body #wrapper .footer { padding: 23rem 0 1rem; font-family: var(--font-footer); font-weight: 500; }
body #wrapper .footer .inner { padding: 0 7.18%; }
body #wrapper .footer .inner .flex-container { margin: 0 0 11rem; }
body #wrapper .footer .inner .flex-container .logo { width: 6.2rem; margin: 0 0 4.5rem; }
body #wrapper .footer .inner .flex-container .links { margin: 0 0 8rem; }
body #wrapper .footer .inner .flex-container .links ul { display: flex; flex-direction: column; row-gap: 3rem; }
body #wrapper .footer .inner .flex-container .links ul li { font-size: 2.2rem; letter-spacing: 0.06em; }
body #wrapper .footer .inner .flex-container .staff-credit p { font-size: 1rem; line-height: 2.2; }
body #wrapper .footer .inner .flex-container .staff-credit.cast { margin: 0 0 4rem; }
body #wrapper .footer .inner small { display: block; text-align: right; font-size: 0.9rem; }
body.is-loaded #wrapper .top .imagearea { opacity: 1; transition: opacity 1s var(--ease) 1.2s; }
body.is-loaded #wrapper .top .titlearea .collection-title img { filter: invert(1); transition: filter 0.2s var(--ease) 1.2s; }
body.is-loaded #wrapper .top .titlearea .logo { opacity: 1; transition: opacity 1s var(--ease) 1.2s; }
body.is-scroll #wrapper .header { opacity: 1; pointer-events: auto; }

@media screen and (min-width: 768px) { body #wrapper .header { width: 7.9rem; right: 4.69%; bottom: 2.34vw; }
  body #wrapper .top { display: flex; align-items: center; }
  body #wrapper .top .imagearea { width: 50%; }
  body #wrapper .top .titlearea { position: relative; top: 0; transform: none; width: 33.09%; margin: 0 auto; }
  body #wrapper .top .titlearea .collection-title { width: 100%; }
  body #wrapper .top .titlearea .logo { width: 26.11%; left: 69.91%; top: 115.94%; }
  body #wrapper .look-wrapper .look .panel .textarea { padding: 0; }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li { justify-content: flex-end; }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .iteminfo { width: auto; }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn a { transition: color 0.4s var(--ease) 0s, background 0.4s var(--ease) 0s; }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn:not(.ask) a:hover { color: var(--primary-color); background: var(--acc-color); }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::before, body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a::after { transition: transform 0.4s var(--ease) 0s; }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a:hover::before { transform: translate(0.5rem, 0); }
  body #wrapper .look-wrapper .look .panel .textarea .credit ul li .link-btn.ask a:hover::after { transform: translate(-0.5rem, 0); }
  body #wrapper .look-wrapper .look01 { margin: 0 0 14.64%; flex-direction: row; align-items: center; }
  body #wrapper .look-wrapper .look01 .panel--1 { width: 50%; }
  body #wrapper .look-wrapper .look01 .panel--2 { width: 50%; display: flex; align-items: flex-end; column-gap: 2.93%; }
  body #wrapper .look-wrapper .look01 .panel--2 .image-container { width: 44.51%; margin: 0; }
  body #wrapper .look-wrapper .look01 .panel--2 .textarea { margin: 0; flex: 1; }
  body #wrapper .look-wrapper .look02 { margin: 0 0 16.47%; }
  body #wrapper .look-wrapper .look02 .panel--1 { display: flex; align-items: flex-end; flex-direction: row-reverse; }
  body #wrapper .look-wrapper .look02 .panel--1 .image-container { width: 39.17%; margin: 0 30.42% 0 0; }
  body #wrapper .look-wrapper .look02 .panel--1 .textarea { flex: 1; display: flex; justify-content: center; }
  body #wrapper .look-wrapper .look03 { margin: 0 0 14.64%; display: flex; align-items: flex-start; }
  body #wrapper .look-wrapper .look03 .panel--1 { width: 22.69%; margin: 0 auto 0 8.71%; }
  body #wrapper .look-wrapper .look03 .panel--1 .image-container { width: 100%; margin: 0; }
  body #wrapper .look-wrapper .look03 .panel--2 { width: 50%; position: relative; }
  body #wrapper .look-wrapper .look03 .panel--2 .textarea { position: absolute; right: 103.95%; bottom: 0; width: 96.05%; }
  body #wrapper .look-wrapper .look04 { margin: 0 0 13.18%; display: flex; align-items: flex-start; flex-direction: row-reverse; }
  body #wrapper .look-wrapper .look04 .panel--1 { width: 19.03%; margin: 11.57% 19.4% 0 18.3%; }
  body #wrapper .look-wrapper .look04 .panel--1 .image-container { width: 100%; margin: 0; }
  body #wrapper .look-wrapper .look04 .panel--2 { width: 34.33%; }
  body #wrapper .look-wrapper .look04 .panel--2 .image-container { width: 100%; margin: 0 0 3rem; }
  body #wrapper .look-wrapper .look05 { margin: 0 0 16.84%; }
  body #wrapper .look-wrapper .look05 .panel--1 { display: flex; align-items: flex-end; flex-direction: row-reverse; }
  body #wrapper .look-wrapper .look05 .panel--1 .image-container { width: 39.17%; margin: 0 30.42% 0 0; }
  body #wrapper .look-wrapper .look05 .panel--1 .textarea { flex: 1; display: flex; justify-content: center; }
  body #wrapper .look-wrapper .look06 { margin: 0 0 16.84%; display: flex; align-items: flex-end; }
  body #wrapper .look-wrapper .look06 .panel--1 { width: 22.25%; }
  body #wrapper .look-wrapper .look06 .panel--1 .image-container { width: 100%; margin: 0; }
  body #wrapper .look-wrapper .look06 .panel--2 { flex: 1; display: flex; align-items: flex-end; flex-direction: row-reverse; column-gap: 2.82%; }
  body #wrapper .look-wrapper .look06 .panel--2 .image-container { width: 64.31%; }
  body #wrapper .look-wrapper .look06 .panel--2 .textarea { flex: 1; }
  body #wrapper .look-wrapper .look07 { margin: 0 0 13.91%; display: flex; align-items: flex-start; flex-direction: row-reverse; }
  body #wrapper .look-wrapper .look07 .panel--1 { width: 19.03%; margin: 0 18.37% 0 19.4%; }
  body #wrapper .look-wrapper .look07 .panel--1 .image-container { width: 100%; margin: 0; }
  body #wrapper .look-wrapper .look07 .panel--2 { width: 34.33%; margin: 10.4% 0 0; }
  body #wrapper .look-wrapper .look07 .panel--2 .image-container { width: 100%; margin: 0 0 3rem; }
  body #wrapper .look-wrapper .look08 { margin: 0 0 14.64%; }
  body #wrapper .look-wrapper .look08 .panel--1 { display: flex; align-items: flex-end; flex-direction: row-reverse; }
  body #wrapper .look-wrapper .look08 .panel--1 .image-container { width: 39.17%; margin: 0 30.42% 0 0; }
  body #wrapper .look-wrapper .look08 .panel--1 .textarea { flex: 1; display: flex; justify-content: center; }
  body #wrapper .look-wrapper .look09 { display: flex; align-items: flex-start; }
  body #wrapper .look-wrapper .look09 .panel--1 { width: 34.33%; margin: 0 0.88% 0 0; }
  body #wrapper .look-wrapper .look09 .panel--1 .image-container { width: 100%; margin: 0; }
  body #wrapper .look-wrapper .look09 .panel--2 { width: 34.33%; }
  body #wrapper .look-wrapper .look09 .panel--2 .image-container { width: 100%; margin: 0 0 3rem; }
  body #wrapper .footer { padding: 28rem 0 2rem; }
  body #wrapper .footer a { transition: opacity 0.4s var(--ease) 0s; }
  body #wrapper .footer a:hover { opacity: 0.5; }
  body #wrapper .footer .inner { padding: 0 1.68%; max-width: 136.6rem; margin: 0 auto; }
  body #wrapper .footer .inner .flex-container { margin: 0 0 8rem; display: flex; }
  body #wrapper .footer .inner .flex-container .logo { width: 21.21%; margin: 0; display: flex; justify-content: center; }
  body #wrapper .footer .inner .flex-container .logo img { width: 7.5rem; }
  body #wrapper .footer .inner .flex-container .links { width: 29.92%; margin: 0; }
  body #wrapper .footer .inner .flex-container .staff-credit.cast { width: 21.59%; margin: 0; }
  body #wrapper .footer .inner .flex-container .staff-creditstaff { flex: 1; }
  body.is-loaded #wrapper .top .titlearea .collection-title img { filter: none; } }