/* --------------------------------------------------
Common
-------------------------------------------------- */
html, body { height: 100%; font-size: 10px; line-height: 1; }

body { font-family: "eb-garamond", serif; color: #000000; font-display: swap; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1; }
body img, body img[src$=".svg"] { 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.is-loaded #wrapper { opacity: 1 !important; transition: opacity 1s ease 0s; }

@media screen and (max-width: 767px) { .pc { display: none !important; } }
@media screen and (min-width: 768px) { .sp { display: none !important; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
@keyframes slide { 0% { opacity: 0; }
  49% { opacity: 0; }
  50% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; } }
body #wrapper .look .imagearea ul { position: relative; }
body #wrapper .look .imagearea ul li:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; animation: slide 5s linear 0s infinite; }
body #wrapper .look .imagearea img { aspect-ratio: 400 / 612; }
body #wrapper .look .textarea { padding: 8px 0 0; }
body #wrapper .look .textarea .credit ul { display: flex; flex-direction: column; row-gap: 5px; }
body #wrapper .look .textarea .credit ul li { font-size: .9rem; line-height: 1.33; }
body #wrapper .look .textarea .credit ul li span { display: inline-block; margin: 0 .25em 0 0; }
body #wrapper .look .textarea .credit ul li span.price { margin: 0 .5em 0 0; }
body #wrapper .look .textarea .credit ul li a { text-decoration: underline; }
body #wrapper .header { position: fixed; top: 35px; left: 0; right: 0; z-index: -1; }
body #wrapper .header .logo { width: 30px; margin: 0 auto 28px; }
body #wrapper .header .logo img { aspect-ratio: 34 / 46; }
body #wrapper .header .title { text-align: center; font-size: .8rem; letter-spacing: .05em; }
body #wrapper #main-contents { padding: 140px 0 0; }
body #wrapper #main-contents #mv { margin: 0 0 33.33%; }
body #wrapper #main-contents #mv .imagearea { width: 76.92%; margin: 0 auto; }
body #wrapper #main-contents #mv .imagearea img { aspect-ratio: 460 / 704; }
body #wrapper #main-contents #look-wrapper { margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; column-gap: 7.69%; row-gap: 25.64vw; }
body #wrapper #main-contents #look-wrapper .look { width: 39.23%; }
body #wrapper #main-contents #look-wrapper .look:nth-child(5n-4) { width: 65.38%; }
body #wrapper #modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #ffffff; z-index: 99; display: none; }
body #wrapper #modal .modal-inner { padding: 140px 0 0; height: 100%; box-sizing: border-box; overflow: auto; }
body #wrapper #modal .modal-inner #modal-close { position: fixed; top: 105px; left: 7px; font-size: .7rem; letter-spacing: .025em; }
body #wrapper #modal .modal-inner .modal-contents { width: 76.92%; max-width: calc(100% - 90px); margin: 0 auto; }
body #wrapper #modal .modal-inner .modal-contents .look + .look { margin: 30px 0 0; }
body #wrapper .footer { padding: 160px 0 10px; }
body #wrapper .footer .footer-inner .logo { width: 30px; margin: 0 auto 50px; }
body #wrapper .footer .footer-inner .logo img { aspect-ratio: 34 / 46; }
body #wrapper .footer .footer-inner .links { display: flex; justify-content: center; column-gap: 30px; margin: 0 0 80px; }
body #wrapper .footer .footer-inner .links li { font-size: 1.3rem; }
body #wrapper .footer .footer-inner small { display: block; text-align: center; font-size: .75rem; }

@media screen and (min-width: 768px) { body #wrapper .look .textarea { padding: 15px 0 0; }
  body #wrapper .look .textarea .credit ul { row-gap: 7px; }
  body #wrapper .look .textarea .credit ul li { font-size: 1.2rem; line-height: 1.33; }
  body #wrapper .look .textarea .credit ul li a { transition: opacity .2s ease 0s; }
  body #wrapper .look .textarea .credit ul li a:hover { opacity: .5; }
  body #wrapper .header { top: 40px; }
  body #wrapper .header .logo { width: 33px; margin: 0 auto 40px; }
  body #wrapper .header .title { font-size: 1.2rem; }
  body #wrapper #main-contents { padding: 175px 0 0; }
  body #wrapper #main-contents #mv { margin: 0 0 175px; }
  body #wrapper #main-contents #mv .imagearea { width: 460px; }
  body #wrapper #main-contents #look-wrapper { width: 938px; max-width: 90%; column-gap: 0; row-gap: 85px; justify-content: space-between; }
  body #wrapper #main-contents #look-wrapper .look { width: 29.1%; }
  body #wrapper #main-contents #look-wrapper .look:nth-child(5n-4) { width: 29.1%; }
  body #wrapper #main-contents #look-wrapper .look:nth-child(4), body #wrapper #main-contents #look-wrapper .look:nth-child(9) { margin-left: 35.45%; }
  body #wrapper #main-contents #look-wrapper .look:nth-child(1) .textarea .credit ul li:nth-child(3) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(3) .textarea .credit ul li:nth-child(3) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(5) .textarea .credit ul li:nth-child(3) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(6) .textarea .credit ul li:nth-child(3) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(7) .textarea .credit ul li:nth-child(3) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(10) .textarea .credit ul li:nth-child(3) .name { width: 100%; }
  body #wrapper #main-contents #look-wrapper .look:nth-child(2) .textarea .credit ul li:nth-child(4) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(4) .textarea .credit ul li:nth-child(4) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(9) .textarea .credit ul li:nth-child(4) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(11) .textarea .credit ul li:nth-child(4) .name { width: 100%; }
  body #wrapper #main-contents #look-wrapper .look:nth-child(8) .textarea .credit ul li:nth-child(2) .name, body #wrapper #main-contents #look-wrapper .look:nth-child(12) .textarea .credit ul li:nth-child(2) .name { width: 100%; }
  body #wrapper #modal .modal-inner { padding: 260px 0 0; }
  body #wrapper #modal .modal-inner #modal-close { top: 260px; left: calc((100vw - 400px) / 2 - 175px); font-size: 1.1rem; } }
@media screen and (min-width: 768px) and (max-width: 999px) { body #wrapper #modal .modal-inner #modal-close { left: calc((100vw - 300px) / 2 - 175px); } }
@media screen and (min-width: 768px) { body #wrapper #modal .modal-inner #modal-close a { transition: opacity .2s ease 0s; }
  body #wrapper #modal .modal-inner #modal-close a:hover { opacity: .5; }
  body #wrapper #modal .modal-inner .modal-contents { width: auto; max-width: 100%; margin: 0 0 0 calc((100vw - 400px) / 2); } }
@media screen and (min-width: 768px) and (max-width: 999px) { body #wrapper #modal .modal-inner .modal-contents { margin: 0 0 0 calc((100vw - 300px) / 2); } }
@media screen and (min-width: 768px) { body #wrapper #modal .modal-inner .modal-contents .look { display: flex; align-items: flex-end; }
  body #wrapper #modal .modal-inner .modal-contents .look .imagearea { width: 400px; margin: 0 30px 0 0; } }
@media screen and (min-width: 768px) and (max-width: 999px) { body #wrapper #modal .modal-inner .modal-contents .look .imagearea { width: 300px; } }
@media screen and (min-width: 768px) { body #wrapper #modal .modal-inner .modal-contents .look .textarea { flex: 1; }
  body #wrapper #modal .modal-inner .modal-contents .look + .look { margin: 35px 0 0; }
  body #wrapper .footer { padding: 180px 0 10px; }
  body #wrapper .footer .footer-inner .logo { width: 33px; margin: 0 auto 60px; }
  body #wrapper .footer .footer-inner .links { column-gap: 110px; margin: 0 0 75px; }
  body #wrapper .footer .footer-inner .links li { font-size: 1.4rem; letter-spacing: .03em; flex: 1; }
  body #wrapper .footer .footer-inner .links li a { transition: opacity .2s ease 0s; }
  body #wrapper .footer .footer-inner .links li a:hover { opacity: .5; }
  body #wrapper .footer .footer-inner .links li:nth-child(1) { text-align: right; }
  body #wrapper .footer .footer-inner small { font-size: 1rem; } }