/* --------------------------------------------------
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: 360 / 520; }
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 .look.feature .imagearea img { aspect-ratio: 360 / 468; }
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: 175px 0 0; }
body #wrapper #main-contents #mv { width: 66.67%; margin: 0 auto 46.15%; }
body #wrapper #main-contents #mv .imagearea img { aspect-ratio: 400 / 574; }
body #wrapper #main-contents #mv .textarea { padding: 8px 0 0; }
body #wrapper #main-contents #mv .textarea .credit ul { display: flex; flex-direction: column; row-gap: 5px; }
body #wrapper #main-contents #mv .textarea .credit ul li { font-size: .9rem; line-height: 1.33; }
body #wrapper #main-contents #mv .textarea .credit ul li span { display: inline-block; margin: 0 .25em 0 0; }
body #wrapper #main-contents #mv .textarea .credit ul li span.price { margin: 0 .5em 0 0; }
body #wrapper #main-contents #mv .textarea .credit ul li a { text-decoration: underline; }
body #wrapper #main-contents #look-wrapper .group { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 5.13%; row-gap: 19.23vw; }
body #wrapper #main-contents #look-wrapper .group .look { width: 41.54%; }
body #wrapper #main-contents #look-wrapper .group .look.feature { width: 76.92%; }
body #wrapper #main-contents #look-wrapper .group + .group { margin: 25.64% 0 0; }
body #wrapper #main-contents #look-wrapper .group.group3 .look:nth-child(1) { margin: 0 20%; }
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: 180px 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: 80px 0 0; }
body #wrapper .footer { padding: 100px 0 10px; }
body #wrapper .footer .footer-inner .all-link { width: 120px; height: 30px; font-size: 1.6rem; letter-spacing: .03em; margin: 0 auto 125px; }
body #wrapper .footer .footer-inner .all-link a { height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: solid 1px #000000; border-radius: 15px; }
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: 25px 0 0; }
  body #wrapper .look .textarea .credit ul { row-gap: 5px; }
  body #wrapper .look .textarea .credit ul li { font-size: 1rem; line-height: 1.6; }
  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: 185px 0 0; }
  body #wrapper #main-contents #mv { width: 400px; margin: 0 auto 185px; }
  body #wrapper #main-contents #mv .textarea { padding: 25px 0 0; }
  body #wrapper #main-contents #mv .textarea .credit ul { row-gap: 5px; }
  body #wrapper #main-contents #mv .textarea .credit ul li { font-size: 1rem; line-height: 1.6; }
  body #wrapper #main-contents #mv .textarea .credit ul li a { transition: opacity .2s ease 0s; }
  body #wrapper #main-contents #mv .textarea .credit ul li a:hover { opacity: .5; }
  body #wrapper #main-contents #look-wrapper { width: 1000px; max-width: 90%; margin: 0 auto; }
  body #wrapper #main-contents #look-wrapper .group { column-gap: 4%; row-gap: 0; }
  body #wrapper #main-contents #look-wrapper .group .look { width: 24.2%; }
  body #wrapper #main-contents #look-wrapper .group .look .imagearea { height: 400px; display: flex; align-items: flex-end; } }
@media screen and (min-width: 768px) and (max-width: 1110px) { body #wrapper #main-contents #look-wrapper .group .look .imagearea { height: 35.92vw; } }
@media screen and (min-width: 768px) { body #wrapper #main-contents #look-wrapper .group .look.feature { width: 30.7%; }
  body #wrapper #main-contents #look-wrapper .group + .group { margin: 20% 0 0; }
  body #wrapper #main-contents #look-wrapper .group.group1, body #wrapper #main-contents #look-wrapper .group.group2 { justify-content: flex-start; }
  body #wrapper #main-contents #look-wrapper .group.group1 .look.feature, body #wrapper #main-contents #look-wrapper .group.group2 .look.feature { margin: 0 6% 0 0; }
  body #wrapper #main-contents #look-wrapper .group.group3 .look .imagearea { height: auto; }
  body #wrapper #main-contents #look-wrapper .group.group3 .look:nth-child(1) { margin: 0; }
  body #wrapper #main-contents #look-wrapper .group.group4, body #wrapper #main-contents #look-wrapper .group.group5 { justify-content: flex-end; }
  body #wrapper #main-contents #look-wrapper .group.group4 .look.feature, body #wrapper #main-contents #look-wrapper .group.group5 .look.feature { margin: 0 0 0 6%; }
  body #wrapper #modal .modal-inner { padding: 260px 0 0; }
  body #wrapper #modal .modal-inner #modal-close { top: 260px; left: calc((100vw - 360px) / 2 - 190px); 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 - 190px); } }
@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 - 360px) / 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: 360px; margin: 0 40px 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: 150px 0 10px; }
  body #wrapper .footer .footer-inner .all-link { margin: 0 auto 155px; }
  body #wrapper .footer .footer-inner .all-link a { transition: background .2s ease 0s, color .2s ease 0s; }
  body #wrapper .footer .footer-inner .all-link a:hover { background: #000000; color: #ffffff; }
  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; } }