@charset "UTF-8"; :root { --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-black60: rgba(0, 0, 0, .6); --color-black50: rgba(0, 0, 0, .5); --color-bdr: #d9d9d9; --color-gray: #666666; --border-r2: 2px; --fs-copyright: 1.2rem; --fs-title-h2: 3.2rem; --fs-title-h3: 3.2rem; --fs-archives-title: 5.2rem; --fs-collaboration-about-title: 1.4rem; --fs-52-175: min(13.23vw,52px); --fs-77-175: min(19.59vw,77px); --fs-26-42: min(6.62vw,26px); --fs-32-56: 3.2rem; --fs-24-32: 2.4rem; --fs-20-24: 2.0rem; --fs-18-20: 1.8rem; --fs-16-43: min(4.07vw,16px); --fs-14-16: 1.4rem; --fs-13-16: 1.3rem; --fs-13-14: 1.3rem; --fs-13-12: 1.3rem; --fs-12-14: 1.2rem; --fs-11-14: 1.1rem; --fs-11-12: 1.1rem; --fs-10-12: 1.0rem; --fs-10-11: 1.0rem; --fs-9-10: 0.9rem; --fs-32: 3.2rem; --fs-20: 2.0rem; --fs-14: 1.4rem; --fs-13: 1.3rem; --fs-12: 1.2rem; --fs-11: 1.1rem; --fs-10: 1.0rem; --inner-width: calc(100% - 40px); --color-v2-blue: #6295C5; --color-v2-yellow: #EFDD6F; --color-v2-green: #467761; --color-v2-gold: #5E5D5B; --color-v2-red: #B85D6F; } @media all and (min-width: 769px) { :root { --fs-copyright: 1.2rem; --fs-collaboration-about-title: min(1.56vw,20px); --fs-archives-title: 13.36vw; --fs-77-175: 13.67vw; --fs-52-175: 13.67vw; --fs-26-42: min(3.28vw,42px); --fs-32-56: min(4.38vw,56px); --fs-24-32: min(2.5vw,32px); --fs-20-24: min(1.88vw,24px); --fs-18-20: min(1.56vw,20px); --fs-16-43: min(3.36vw,43px); --fs-14-16: min(1.25vw,16px); --fs-13-16: min(1.25vw,16px); --fs-13-14: min(1.09vw,14px); --fs-13-12: min(0.94vw,12px); --fs-12-14: min(1.09vw,14px); --fs-11-14: min(1.09vw,14px); --fs-11-12: min(0.94vw,12px); --fs-10-12: min(0.94vw,12px); --fs-10-11: min(0.86vw,11px); --fs-11: min(0.86vw,11px); --fs-9-10: min(0.78vw,10px); --grid-margin: 72px; } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ .lpEyeperformance { /* Reapply the pointer cursor for anchor tags */ /* Remove list styles (bullets/numbers) */ /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ /* Safari - solving issue when using user-select:none on the text input doesn't working */ /* revert the 'white-space' property for textarea elements on Safari */ /* minimum style to allow to style meter element */ /* preformatted text - use only for this feature */ /* reset default text opacity of input placeholder */ /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ /* apply back the draggable feature - exist only in Chromium and Safari */ /* Revert Modal native behavior */ /* Remove details summary webkit styles */ /* Preferred box-sizing value */ } .lpEyeperformance a, .lpEyeperformance button { cursor: revert; } .lpEyeperformance ol, .lpEyeperformance ul, .lpEyeperformance menu, .lpEyeperformance summary { list-style: none; } .lpEyeperformance img { max-inline-size: 100%; max-block-size: 100%; } .lpEyeperformance table { border-collapse: collapse; } .lpEyeperformance input, .lpEyeperformance textarea { -webkit-user-select: auto; } .lpEyeperformance textarea { white-space: revert; } .lpEyeperformance meter { -webkit-appearance: revert; appearance: revert; } .lpEyeperformance :where(pre) { all: revert; box-sizing: border-box; } .lpEyeperformance ::placeholder { color: unset; } .lpEyeperformance :where([hidden]) { display: none; } .lpEyeperformance :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } .lpEyeperformance :where([draggable=true]) { -webkit-user-drag: element; } .lpEyeperformance :where(dialog:modal) { all: revert; box-sizing: border-box; } .lpEyeperformance ::-webkit-details-marker { display: none; } .lpEyeperformance *, .lpEyeperformance *::before, .lpEyeperformance *::after { box-sizing: border-box; } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ :root { --vh: 100vh; } .color__isBlack { background: var(--color-black); } .lpEyeperformance { font-family: "dnp-shuei-gothic-gin-std", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, sans-serif; font-weight: 400; font-style: normal; line-height: 128%; color: var(--color-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; } .lpEyeperformance a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } .lpEyeperformance li { list-style: none; } .lpEyeperformance h1, .lpEyeperformance h2, .lpEyeperformance h3, .lpEyeperformance h4, .lpEyeperformance h5, .lpEyeperformance h6 { font-weight: normal; } .lpEyeperformance footer { width: 100%; padding: 240px 0 24px 0; } .lpEyeperformance footer:has(#archives) { padding: 0 0 24px 0; } .lpEyeperformance footer .footer__title { width: 100%; overflow: hidden; margin-bottom: 40px; } .lpEyeperformance footer .footer__title p { width: 101.2%; margin-left: -0.56%; } .lpEyeperformance .footer__copy { width: calc(100% - 40px); margin-inline: auto; } .lpEyeperformance .footer__copy p { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; font-size: var(--fs-copyright); color: var(--color-black60); } .lpEyeperformance .footer__copy.footer__copy--isWhite p { color: var(--color-white); } .lpEyeperformance #archives .archives__inner { width: calc(100% - 10px); margin-inline: auto; padding: 72px 0 144px 0; border-top: 1px solid rgba(255, 255, 255, 0.5); } .lpEyeperformance #archives h3 { width: calc(100% - 32px); margin-inline: auto; color: var(--color-white); font-size: var(--fs-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; line-height: 1; margin-bottom: 48px; } .lpEyeperformance footer.color_isBlack2 { background: #1A1A1A; } .lpEyeperformance footer.color_isBlack2 .footer__copy p { color: rgba(255, 255, 255, 0.6); } .lpEyeperformance footer .about .about__inner { padding: 72px 0 72px 0; width: calc(100% - 42px); margin-inline: auto; } .lpEyeperformance footer .about :is(h3) { color: var(--color-white); } .lpEyeperformance footer .about .about__title { margin-bottom: 46px; } .lpEyeperformance footer .about .about__title h3 { font-size: var(--fs-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance footer .about p { font-size: var(--fs-13-12); line-height: 1.84; margin-bottom: 2em; } .lpEyeperformance footer .about p:nth-last-of-type(1) { margin-bottom: 0px; } .lpEyeperformance footer .about a { text-decoration: underline; letter-spacing: 0em; text-underline-offset: 4px; } @media all and (min-width: 769px) { .lpEyeperformance footer { padding: 335px 0 16px 0; } .lpEyeperformance footer:has(#archives) { padding: 0 0 20px 0; } .lpEyeperformance footer .footer__title { margin-bottom: 18px; } .lpEyeperformance footer .footer__title p { width: 100.7%; margin-left: -0.35%; } .lpEyeperformance footer .about .about__inner { padding: 148px 0 148px 0; /* width: calc(100% - 96px);*/ width: 92.5%; } .lpEyeperformance footer .about .about__cols { display: flex; } .lpEyeperformance footer .about .about__cols .about__title { width: 50.17%; } .lpEyeperformance footer .about .about__cols .about__content { width: 49.83%; position: relative; padding: 0; left: auto; bottom: auto; } .lpEyeperformance footer .about .about__cols .about__content .aboutContent__inner { width: 100%; } .lpEyeperformance footer .about .about__title { margin-bottom: 46px; } .lpEyeperformance footer .about .about__title h3 { font-size: var(--fs-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance footer .about p { font-size: var(--fs-13-12); line-height: 1.84; margin-bottom: 2em; } .lpEyeperformance footer .about p:nth-last-of-type(1) { margin-bottom: 0px; } .lpEyeperformance footer .about a { text-decoration: underline; letter-spacing: 0em; text-underline-offset: 4px; } .lpEyeperformance #archives .archives__inner { /* width: calc(100% - 96px);*/ width: 92.5%; margin-inline: auto; padding: 148px 0 342px 0; } .lpEyeperformance #archives h3 { width: 100%; margin-bottom: 56px; } .lpEyeperformance .footer__copy { width: calc(100% - 32px); } } @media all and (min-width: 1280px) { .lpEyeperformance footer .about .about__inner { width: calc(100% - 96px); } .lpEyeperformance #archives .archives__inner { width: calc(100% - 96px); } .lpEyeperformance .footer__copy { width: calc(100% - 32px); } } .lpEyeperformance img { width: 100%; height: auto; vertical-align: bottom; } .lpEyeperformance .f-acumin { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance picture { display: block; } .lpEyeperformance main { width: 100%; } .lpEyeperformance .section__title h2 { font-size: var(--fs-title-h2); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; line-height: 0.8; } .lpEyeperformance .section__title h3 { font-size: var(--fs-title-h3); } .lpEyeperformance :is(.featureItems__titleIcon, .fv__collaborationTitleIcon, .c-icon) { position: relative; display: block; } .lpEyeperformance :is(.featureItems__titleIcon, .fv__collaborationTitleIcon, .c-icon) svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .lpEyeperformance .backToTop { position: fixed; top: 25px; left: 20px; z-index: 2; } .lpEyeperformance .backToTop a { font-size: var(--fs-20); color: var(--color-white); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) { position: relative; z-index: 2; position: absolute; bottom: 32px; width: 100%; overflow: hidden; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 { transform: translate3d(0, 0, 0) !important; margin-top: 7.89vw; bottom: auto; top: 50%; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) { color: var(--color-white); padding-left: min(2.04vw,8px); white-space: nowrap; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span { line-height: 0.8; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) { display: flex; width: min(44.53vw,175px); justify-content: space-between; align-items: center; margin-bottom: 3px; margin-left: 4px; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) span:has(img) { width: min(33.59vw,132px); aspect-ratio: 132/54; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleName, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleName) { font-size: var(--fs-77-175); height: 0.8em; font-family: "acumin-pro", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.04em; letter-spacing: -0.03em; display: block; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleJob, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleJob) { font-size: var(--fs-26-42); position: absolute; right: 0.15em; bottom: min(11.7vw,46px); white-space: nowrap; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleJob { bottom: min(13.99vw,55px); } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain).c-vol2 :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) { width: min(6.11vw,24px); height: min(6.11vw,24px); } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) { color: var(--color-white); padding-left: min(4.07vw,16px); white-space: nowrap; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) :is(.featureItems__titleInner, .fv__collaborationTitleInner) { position: relative; line-height: 1; width: fit-content; display: block; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span { line-height: 0.8; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleZoff) { display: flex; width: min(30.53vw,120px); justify-content: space-between; align-items: center; margin-bottom: 3px; margin-left: 4px; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleZoff) span:has(img) { width: min(22.9vw,90px); aspect-ratio: 90/37; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleName, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleName) { font-size: var(--fs-52-175); height: 0.8em; font-family: "acumin-pro", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.04em; letter-spacing: -0.03em; display: block; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleJob, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleJob) { display: block; font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; letter-spacing: -0.024em; font-size: var(--fs-16-43); position: absolute; right: 0.15em; bottom: min(11.7vw,46px); white-space: nowrap; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) { width: min(4.58vw,18px); height: min(4.58vw,18px); } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) svg { fill: var(--color-white); } .lpEyeperformance .fv__collaboration { width: 100%; } .lpEyeperformance .fv__collaboration .section__inner { width: 100%; position: relative; } .lpEyeperformance .fv__collaboration .fv__collaborationImg { width: 100%; position: relative; } .lpEyeperformance .fv__collaboration .fv__collaborationImg figure { width: 100%; aspect-ratio: 393/590; } .lpEyeperformance .fv__collaboration .fv__collaborationImg img { width: 100%; height: 100%; object-fit: cover; } .lpEyeperformance .fv__collaboration .fv__collaborationTitle { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: hidden; } .lpEyeperformance .fv__collaboration .fv__collaborationTitle :is(p, h1) { color: var(--color-white); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance .fv__collaboration .fv__collaborationTitle p { font-size: var(--fs-20); margin-bottom: 28px; } .lpEyeperformance .fv__collaboration .fv__collaborationContent { padding: 38px 20px 62px 20px; } .lpEyeperformance .fv__collaboration .fv__collaborationContent h2 { font-size: var(--fs-20-24); line-height: 1.4; color: var(--color-white); margin-bottom: 18px; } .lpEyeperformance .fv__collaboration .fv__collaborationContent p { font-size: var(--fs-14-16); color: var(--color-white); line-height: 1.74; } .lpEyeperformance .grids__list { width: calc(100% - 8px); margin-inline: auto; padding-top: 4px; position: relative; } .lpEyeperformance .grids__list ul li { width: 100%; margin-bottom: 11px; } .lpEyeperformance .grids__list ul li:last-child { margin-bottom: 0px; } .lpEyeperformance .grids__list ul [data-movie].pause { visibility: hidden; } .lpEyeperformance .grids__list ul :is(h3, p, a span) { line-height: 1; font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance .grids__list ul figure { border-radius: var(--border-r2); overflow: hidden; } .lpEyeperformance .grids__list ul h3 { font-size: var(--fs-11-12); } .lpEyeperformance .grids__list ul p { font-size: var(--fs-11-12); display: flex; align-items: flex-end; } .lpEyeperformance .grids__list ul p span { font-size: var(--fs-9-10); margin-left: 2px; scale: 0.9; transform-origin: bottom left; display: block; } .lpEyeperformance .grids__list ul p.grids__listInfoPrice span { color: rgba(245, 245, 245, 0.6); } .lpEyeperformance .grids__list ul p.grids__listInfoPrice span.ja { font-size: var(--fs-10-11); color: var(--color-white); scale: 1; vertical-align: middle; line-height: 1; position: relative; top: 0.1em; font-family: "dnp-shuei-gothic-gin-std", sans-serif; font-weight: 400; font-style: normal; } .lpEyeperformance .grids__list ul a { display: block; } .lpEyeperformance .grids__list ul a span { font-size: var(--fs-11-12); position: relative; display: block; padding-bottom: 4px; } .lpEyeperformance .grids__list ul a span:after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0px; left: 0px; } .lpEyeperformance .grids__list ul .grids__listInfo { width: 100%; display: flex; justify-content: space-between; margin-top: 3px; } .lpEyeperformance .grids__list ul .grids__listInfoRight { display: flex; justify-content: flex-end; align-items: flex-start; } .lpEyeperformance .grids__list ul .grids__listInfoRight a { margin-left: 6px; } .lpEyeperformance .items__list { width: calc(100% - 8px); margin-inline: auto; position: relative; } .lpEyeperformance .items__list ul { display: flex; flex-wrap: wrap; column-gap: 3px; row-gap: 32px; } .lpEyeperformance .items__list ul li { width: calc(50% - 1.5px); } .lpEyeperformance .items__list ul li p.items__listInfoPrice { font-size: var(--fs-12); } .lpEyeperformance .items__list ul li p.items__listInfoPrice span { font-size: var(--fs-10); color: rgba(245, 245, 245, 0.6); } .lpEyeperformance .items__list ul li p.items__listInfoPrice span.ja { font-family: "dnp-shuei-gothic-gin-std", sans-serif; font-weight: 400; font-style: normal; color: var(--color-white); font-size: var(--fs-11); } .lpEyeperformance .items__list ul figure { border-radius: var(--border-r2); overflow: hidden; margin-bottom: 8px; aspect-ratio: 191/266; } .lpEyeperformance .items__list ul :is(h3, p, a) { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance .items__list ul h3 { font-size: var(--fs-12-14); line-height: 0.9; } .lpEyeperformance .items__list ul .items__listInfoLink { display: flex; align-items: center; margin-top: 10px; } .lpEyeperformance .items__list ul .items__listInfoLink p:nth-of-type(1) { display: flex; } .lpEyeperformance .items__list ul .items__listInfoLink p:nth-of-type(1) a { margin-right: 10px; } .lpEyeperformance .items__list ul .items__listInfoLink p:nth-of-type(1):after { content: ""; width: 1px; height: 1em; background: rgba(217, 217, 217, 0.6); display: block; position: relative; top: 0.2em; margin-right: 10px; } .lpEyeperformance .items__list ul .items__listInfoLink p span { font-size: var(--fs-12); position: relative; display: block; width: fit-content; font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance .items__list ul .items__listInfoLink p span:after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0px; left: 0px; } .lpEyeperformance .about { position: relative; } .lpEyeperformance .about .section__inner { padding: 64px 0 0 0; width: var(--inner-width); margin-inline: auto; } .lpEyeperformance .about :is(h2, h3, p, dt, dd, a) { color: var(--color-white); } .lpEyeperformance .about .section__title { margin-bottom: 46px; } .lpEyeperformance .about .section__title h2 { font-size: var(--fs-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance .about h3 { font-size: var(--fs-20); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; margin-bottom: 16px; } .lpEyeperformance .about p { font-size: var(--fs-13-12); line-height: 1.75; } .lpEyeperformance .about a { text-decoration: underline; letter-spacing: 0em; text-underline-offset: 4px; } .lpEyeperformance .about :is(.creator__stylist, .creator__profile) { margin-bottom: 40px; width: 77%; max-width: 272px; } .lpEyeperformance .about .creator__credit dl { display: flex; } .lpEyeperformance .about .creator__credit dl.creator__creditList--marginTop { margin-top: 1.5em; } .lpEyeperformance .about .creator__credit dl :is(dt, dd) { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; font-size: var(--fs-14); line-height: 1.42; } .lpEyeperformance .about .creator__credit dl dt { width: 178px; } .lpEyeperformance .about .creator__credit dl dd { width: calc(100% - 178px); } .lpEyeperformance .archives__list ul { width: 100%; } .lpEyeperformance .archives__list ul li { width: 100%; } .lpEyeperformance .archives__list ul li:last-child { margin-bottom: 0px; } .lpEyeperformance .archives__list ul figure { width: 100%; aspect-ratio: 1/1; } .lpEyeperformance .archives__list ul a { width: 100%; display: block; position: relative; } .lpEyeperformance .archives__list ul .archivesList__title { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } .lpEyeperformance .archives__list ul .archivesList__title h4 { line-height: 0.8; color: var(--color-white); } .lpEyeperformance .archives__list ul :is(.archivesList__titleIcon, .c-icon) { position: relative; display: block; } .lpEyeperformance .archives__list ul :is(.archivesList__titleIcon, .c-icon) svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; fill: var(--color-white); } .lpEyeperformance .archives__list ul :is(.archivesList__titleInner) { position: relative; line-height: 1; width: fit-content; display: block; } .lpEyeperformance .archives__list ul span { line-height: 0.8; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleZoff) { display: flex; width: min(30.53vw,120px); justify-content: space-between; align-items: center; margin-bottom: 3px; margin-left: 4px; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleZoff) span:has(img) { width: min(22.9vw,90px); aspect-ratio: 90/37; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleName) { font-size: var(--fs-archives-title); white-space: nowrap; height: 0.8em; font-family: "acumin-pro", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.04em; letter-spacing: -0.03em; display: block; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleJob) { display: block; font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; letter-spacing: -0.024em; font-size: var(--fs-16-43); position: absolute; right: 0.15em; bottom: min(11.7vw,46px); white-space: nowrap; } .lpEyeperformance .archives__list ul :is(.archivesList__titleIcon) { width: min(4.58vw,18px); height: min(4.58vw,18px); } .lpEyeperformance .archives__list ul :is(.archivesList__titleIcon) svg { fill: var(--color-white); } @media all and (min-width: 769px) { .lpEyeperformance .backToTop { top: 41px; left: 48px; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) { margin-bottom: 0px; bottom: 46px; width: 100%; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) { width: 100%; padding-left: 2.73vw; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span { line-height: 0.8; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleZoff) { width: 31.25vw; margin-bottom: 10px; position: relative; left: 0.86vw; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleZoff) span:has(img) { width: 23.75vw; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleName, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleName) { letter-spacing: -0.0365em; } :is(.lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.featureItems__titleJob, .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) span.fv__collaborationTitleJob) { display: block; font-size: var(--fs-16-43); position: absolute; right: 0.25em; letter-spacing: -0.025em; bottom: 11.95vw; white-space: nowrap; } .lpEyeperformance :is(.featureItems__title, .fv__collaborationTitleMain) :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) { width: 55px; height: 55px; } .lpEyeperformance :is(.featureItems__title) { margin-bottom: 0px; bottom: 46px; width: 100%; overflow: visible; } .lpEyeperformance :is(.featureItems__title).c-vol2 { display: flex; margin-top: 5.47vw; } .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) { width: 100%; padding-left: 0.94vw; } .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) .fv__collaborationTitleInner, .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) .featureItems__titleInner { width: 100%; display: flex; column-gap: 1.09vw; } .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span { line-height: 0.8; } :is(.lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) { width: 29.53vw; margin-bottom: 0px; left: 0; } :is(.lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) span:has(img) { width: 23.83vw; aspect-ratio: 90/37; } :is(.lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.featureItems__titleName, .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.fv__collaborationTitleName) { letter-spacing: -0.0325em; } :is(.lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.featureItems__titleJob, .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) span.fv__collaborationTitleJob) { position: absolute; right: 0.85em; letter-spacing: -0.025em; bottom: 10vw; white-space: nowrap; } .lpEyeperformance :is(.featureItems__title).c-vol2 :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) { width: 4.3vw; height: 4.3vw; } .lpEyeperformance :is(.fv__collaborationTitleMain) { margin-bottom: 0px; bottom: 46px; width: 100%; overflow: visible; } .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 { display: flex; margin-top: 5.47vw; } .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) { width: 100%; padding-left: 0; } .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) .fv__collaborationTitleInner { width: 100%; display: flex; column-gap: 1.41vw; } .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span { line-height: 0.8; } :is(.lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) { width: 30vw; margin-bottom: 0px; left: 1px; } :is(.lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleZoff, .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleZoff) span:has(img) { width: 24.45vw; aspect-ratio: 313/129.64; } :is(.lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleName, .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleName) { letter-spacing: -0.022em; } :is(.lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.featureItems__titleJob, .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) span.fv__collaborationTitleJob) { position: absolute; right: 0.32em; letter-spacing: -0.01em; bottom: 10vw; white-space: nowrap; } .lpEyeperformance :is(.fv__collaborationTitleMain).c-vol2 :is(h1, h2) :is(.featureItems__titleIcon, .fv__collaborationTitleIcon) { width: 4.3vw; height: 4.3vw; } .lpEyeperformance .fv__collaboration { position: relative; } .lpEyeperformance .fv__collaboration .fv__collaborationImg figure { aspect-ratio: 1280/720; } .lpEyeperformance .fv__collaboration .fv__collaborationContent { padding: 47px 48px 86px 48px; } .lpEyeperformance .fv__collaboration .fv__collaborationContent h2 { line-height: 1.5; margin-bottom: 20px; } .lpEyeperformance .fv__collaboration .fv__collaborationContent p { line-height: 2; } .lpEyeperformance .fv__collaboration .fv__collaborationContent br.is-spOnly { display: none; } .lpEyeperformance .grids__list ul li { margin-bottom: 0px; position: absolute; } .lpEyeperformance .grids__list ul figure { margin-bottom: 6px; } .lpEyeperformance .grids__list ul h3 { line-height: 1; margin-bottom: 3px; } .lpEyeperformance .grids__list ul p { display: flex; } .lpEyeperformance .grids__list ul p span { margin-left: 2px; scale: 1; transform-origin: bottom left; } .lpEyeperformance .grids__list ul p.grids__listInfoPrice span.ja { top: 0px; } .lpEyeperformance .grids__list ul .grids__listInfo { width: 100%; display: block; justify-content: revert; margin-top: 0px; } .lpEyeperformance .grids__list ul .grids__listInfoRight { display: block; justify-content: revert; } .lpEyeperformance .grids__list ul .grids__listInfoRight a { margin-left: 0px; } .lpEyeperformance .grids__list ul .grids__listInfoRight a span { width: fit-content; } .lpEyeperformance .grids__list ul .grids__listInfoLink { margin-top: 16px; } .lpEyeperformance .items__list ul { column-gap: 4px; row-gap: 56px; } .lpEyeperformance .items__list ul li { width: calc(25% - 3px); } .lpEyeperformance .items__list ul figure { margin-bottom: 8px; aspect-ratio: 315/440; } .lpEyeperformance .items__list ul .items__listInfoLink { margin-top: 10px; } .lpEyeperformance .about .section__inner { padding: 84px 0 0 0; width: calc(100% - 96px); } .lpEyeperformance .about .section__title { margin-bottom: 53px; } .lpEyeperformance .about h3 { margin-bottom: 25px; } .lpEyeperformance .about p { line-height: 2; } .lpEyeperformance .about a { text-decoration: underline; text-underline-offset: 4px; } .lpEyeperformance .about .section__content { display: flex; } .lpEyeperformance .about .section__content .section__contentLeft { width: 50%; } .lpEyeperformance .about .section__content .section__contentRight { width: 50%; } .lpEyeperformance .about .creator__stylist { width: 100%; max-width: 293px; margin-bottom: 0px; } .lpEyeperformance .about .creator__profile { width: 100%; max-width: 100%; margin-bottom: 61px; } .lpEyeperformance .about .creator__credit h3 { margin-bottom: 28px; } .lpEyeperformance .about .creator__credit dl dt { width: 50%; } .lpEyeperformance .about .creator__credit dl dd { width: 50%; } .lpEyeperformance .archives__list ul figure { width: 100%; aspect-ratio: 1184/560; } .lpEyeperformance .archives__list ul a { width: 100%; display: block; position: relative; } .lpEyeperformance .archives__list ul .archivesList__title { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } .lpEyeperformance .archives__list ul .archivesList__title h4 { font-size: var(--fs-archives-title); font-family: "acumin-pro", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.04em; line-height: 0.8; color: var(--color-white); } .lpEyeperformance .archives__list ul :is(.archivesList__titleInner) { position: relative; line-height: 1; width: fit-content; display: block; } .lpEyeperformance .archives__list ul span { line-height: 0.8; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleZoff) { width: 31.25vw; margin-bottom: 10px; position: relative; left: 0.86vw; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleZoff) span:has(img) { width: 23.75vw; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleName) { letter-spacing: -0.0365em; } :is(.lpEyeperformance .archives__list ul span.archivesList__titleJob) { display: block; font-size: var(--fs-16-43); position: absolute; right: 0.25em; letter-spacing: -0.025em; bottom: 11.95vw; white-space: nowrap; } .lpEyeperformance .archives__list ul :is(.archivesList__titleIcon) { width: 55px; height: 55px; } } .mobile .lpEyeperformance[data-page=vol2] nav ul li figure img { opacity: 0; } .lpEyeperformance[data-page=vol2] main { transition: opacity 0.4s ease; opacity: 1; display: block; } .lpEyeperformance[data-page=vol2] main.disable { opacity: 0; } .lpEyeperformance[data-page=vol2] .backToTop a { color: var(--color-black); } .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationImg .fv__collaborationTitleMain { top: auto; margin-top: 0; bottom: min(5.09vw,20px); } .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationContent h2, .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationContent p { color: var(--color-black); } .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationContent h2 { font-size: min(5.09vw,20px); white-space: nowrap; } .lpEyeperformance[data-page=vol2] nav ul { width: calc(100% - 40px); margin-inline: auto; } .lpEyeperformance[data-page=vol2] nav ul li { width: 100%; aspect-ratio: 353/174; position: relative; margin-bottom: 4px; } .lpEyeperformance[data-page=vol2] nav ul li:last-child { margin-bottom: 0px; } .lpEyeperformance[data-page=vol2] nav ul li figure { border-radius: 2px; overflow: hidden; position: relative; } .lpEyeperformance[data-page=vol2] nav ul li figure video { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; object-fit: cover; } .lpEyeperformance[data-page=vol2] nav ul li figure img { position: relative; index: 2; } .lpEyeperformance[data-page=vol2] nav ul li figure:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); } .lpEyeperformance[data-page=vol2] nav ul li .nav__title { width: calc(100% - 16px); position: absolute; bottom: 8px; left: 8px; display: flex; justify-content: space-between; align-items: flex-end; } .lpEyeperformance[data-page=vol2] nav ul li .nav__title h3 { font-size: var(--fs-24-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; line-height: 1; color: var(--color-white); } .lpEyeperformance[data-page=vol2] nav ul li span.c-icon { width: 36px; aspect-ratio: 1/1; position: relative; background: rgba(0, 0, 0, 0.5); display: block; align-items: center; justify-content: center; border-radius: 100vmax; } .lpEyeperformance[data-page=vol2] nav ul li span.c-icon svg { fill: var(--color-white); width: 12px; height: 12px; display: block; top: 50%; left: 50%; margin: -6px 0 0 -6px; } .lpEyeperformance[data-page=vol2] section.look { width: 100%; /* :is( .product__info ){ display: flex; justify-content: space-between; align-items: center; padding: 6px 0 6px 0; :is(h3, p, li){ @include mx.acuminR();} h3{ font-size: var(--fs-11-14); line-height: 1; margin-bottom: 4px;} p{ font-size: var(--fs-11-12); line-height: 1; small{ font-size: var(--fs-10); scale: .8; transform-origin: center left; display: inline-block;} } ul{ display: flex; align-items: center; column-gap: 8px; li{ font-size: var(--fs-11-12); line-height: 1; &:nth-child(1){ display: flex; align-items: center; column-gap: 8px; &:after{ content: ""; width: 1px; height: 12px; background: var(--color-black);} } a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .3);} } } } */ } .lpEyeperformance[data-page=vol2] section.look img { vertical-align: top; } .lpEyeperformance[data-page=vol2] section.look .look__inner { padding: 97px 0 0 0; } .lpEyeperformance[data-page=vol2] section.look .look__title { width: calc(100% - 40px); margin-inline: auto; margin-bottom: 40px; } .lpEyeperformance[data-page=vol2] section.look .look__title h2 { font-size: var(--fs-32); font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; line-height: 1; } .lpEyeperformance[data-page=vol2] section.look .movie { width: 100%; aspect-ratio: 393/221; position: relative; margin-bottom: 16px; pointer-events: none; background: var(--color-white); } .lpEyeperformance[data-page=vol2] section.look .movie iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .lpEyeperformance[data-page=vol2] section.look .img__kv { width: calc(100% - 8px); margin-inline: auto; margin-bottom: 8px; } .lpEyeperformance[data-page=vol2] section.look .img__kv figure { border-radius: 2px; overflow: hidden; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) { padding: 6px 0 6px 0; text-align: right; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) :is(h3, p, li) { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) :is(.imgKv__info_name, .productInfo__name) { display: flex; justify-content: flex-end; column-gap: 8px; margin-bottom: 4px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) h3 { font-size: var(--fs-11-14); line-height: 1; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) p { font-size: var(--fs-11-12); line-height: 1; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) p:has(small) { display: flex; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) p small { font-size: 1rem; display: inline-block; font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.02em; margin-left: 6px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul { display: flex; justify-content: flex-end; align-items: center; column-gap: 8px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li { font-size: var(--fs-10-12); line-height: 1; display: flex; align-items: center; column-gap: 8px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:after { content: ""; width: 1px; height: 12px; background: var(--color-black); position: relative; top: 1px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:last-child:after { display: none; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li button { cursor: pointer; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li button, .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.3); } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul { width: calc(100% - 40px); margin-inline: auto; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li { margin-bottom: 16px; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li:last-child { margin-bottom: 0px; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li figure { border-radius: 2px; overflow: hidden; } .lpEyeperformance[data-page=vol2] section.look .about__person { padding: 72px 0 0 0; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info { width: calc(100% - 40px); margin-inline: auto; margin-bottom: 55px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info hgroup { margin-bottom: 30px; position: relative; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info hgroup:after { content: ""; width: 12px; height: 1px; background: var(--color-black); display: block; margin-top: 30px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info hgroup h4 { font-size: var(--fs-18-20); margin-bottom: 12px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info hgroup p { font-size: var(--fs-14-16); } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info .aboutPerson__info_description p { font-size: var(--fs-12); line-height: 2; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__img { width: calc(100% - 8px); margin-inline: auto; padding-bottom: 96px; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__img figure { border-radius: 2px; overflow: hidden; } .lpEyeperformance[data-page=vol2] section.look#vol2-5 .about__person .aboutPerson__img { border-bottom: none; } .lpEyeperformance[data-page=vol2] .about { background: #1A1A1A; margin-top: 96px; } .lpEyeperformance[data-page=vol2] .about .section__inner { padding: 70px 0 0 0; } .lpEyeperformance[data-page=vol2] .about .creator__stylist { width: 100%; max-width: 100%; } .lpEyeperformance[data-page=vol2] .about .creator__stylist p { font-size: var(--fs-12); line-height: 1.9; } .lpEyeperformance[data-page=vol2] .about .creator__profile p { font-size: var(--fs-12); line-height: 1.9; } .lpEyeperformance[data-page=vol2] .about .creator__credit h3 { margin-bottom: 20px; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl { margin-bottom: 7px; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl:nth-last-of-type(1) { margin-bottom: 0; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl :is(dt, dd) { font-family: "acumin-pro", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.04em; font-size: var(--fs-13); line-height: 1.42; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl dt { width: 178px; padding-right: 34px; line-height: 1.25; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl dd { width: calc(100% - 178px); } .lpEyeperformance[data-page=vol2] .about .creator__credit dl dd small { font-size: var(--fs-11); } .lpEyeperformance[data-page=vol2] .about .creator__credit dl:nth-last-of-type(1) dd { line-height: 1.9; } .lpEyeperformance[data-page=vol2] footer { padding-top: 158px; } @media all and (min-width: 769px) { .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationContent { padding: 62px 48px 86px 48px; } .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationContent h2 { font-size: min(1.88vw,24px); } .lpEyeperformance[data-page=vol2] .fv__collaboration .fv__collaborationImg .fv__collaborationTitleMain { bottom: min(1.56vw,20px); } .lpEyeperformance[data-page=vol2] nav ul { width: calc(100% - 8px); margin-inline: auto; display: flex; column-gap: 3px; } .lpEyeperformance[data-page=vol2] nav ul li { width: calc((100% - 12px) / 5); aspect-ratio: 252/448; margin-bottom: 0px; } .lpEyeperformance[data-page=vol2] nav ul li .nav__title { width: 100%; position: absolute; bottom: 0px; left: 0px; display: block; justify-content: revert; align-items: revert; padding-bottom: 34px; } .lpEyeperformance[data-page=vol2] nav ul li .nav__title h3 { width: 100%; text-align: center; margin-bottom: min(2.66vw,34px); } .lpEyeperformance[data-page=vol2] nav ul li span.c-icon { width: 36px; margin-inline: auto; } .lpEyeperformance[data-page=vol2] section.look .look__inner { padding: 144px 0 0 0; } .lpEyeperformance[data-page=vol2] section.look .look__title { width: calc(100% - 100px); margin-bottom: 56px; } .lpEyeperformance[data-page=vol2] section.look .movie { aspect-ratio: 1280/719; margin-bottom: 32px; } .lpEyeperformance[data-page=vol2] section.look .img__kv { margin-bottom: 32px; display: flex; align-items: flex-end; column-gap: 8px; } .lpEyeperformance[data-page=vol2] section.look .img__kv figure { width: 79.95%; /*width: calc(100% - 244px );*/ } .lpEyeperformance[data-page=vol2] section.look .img__kv .imgKv__info { display: block; padding: 0 0 3px 0; } .lpEyeperformance[data-page=vol2] section.look .img__kv .imgKv__info .imgKv__info_name { margin-bottom: 16px; } .lpEyeperformance[data-page=vol2] section.look:nth-child(2n) .img__kv { flex-direction: row-reverse; } .lpEyeperformance[data-page=vol2] section.look#vol2-5 { margin-bottom: 240px; } .lpEyeperformance[data-page=vol2] section.look#vol2-5 .about__person .aboutPerson_cols { padding-bottom: 0px; border: none; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul { display: flex; width: calc(100% - 8px); } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li { margin-bottom: 0px; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li:nth-child(1) { width: 40%; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li:nth-child(1) figure { width: calc(100% - 3px); } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li:nth-child(2) { width: 60%; } .lpEyeperformance[data-page=vol2] section.look .look__imgs ul li figure { border-radius: 2px; overflow: hidden; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) { display: block; text-align: left; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) :is(.productInfo__name, .imgKv__info_name) { display: block; justify-content: revert; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) h3 { margin-bottom: 4px; letter-spacing: 0.56px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) p { letter-spacing: 0.48px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) p small { font-size: min(0.86vw,11px); } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul { column-gap: 8px; justify-content: flex-start; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li { white-space: nowrap; letter-spacing: 0.48px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:nth-child(1), .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:nth-child(2) { column-gap: 8px; } .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:nth-child(1):after, .lpEyeperformance[data-page=vol2] section.look :is(.imgKv__info, .product__info) ul li:nth-child(2):after { height: min(1.09vw,14px); top: 2px; } .lpEyeperformance[data-page=vol2] section.look .about__person { padding: 112px 0 0 0; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson_cols { width: calc(100% - 96px); margin-inline: auto; margin-bottom: 0px; display: flex; justify-content: space-between; flex-direction: row-reverse; border-bottom: 1px solid rgba(0, 0, 0, 0.3); padding-bottom: 144px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info { width: 47.97%; margin: 0; position: relative; padding-bottom: 105px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__info hgroup:after { width: 12px; height: 1px; margin-top: 30px; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__img { width: 47.97%; margin-inline: 0; padding-bottom: 0px; border-bottom: none; position: relative; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__img .product__info { min-width: 240px; position: absolute; left: 108.4%; bottom: 0px; padding: 0; } .lpEyeperformance[data-page=vol2] section.look .about__person .aboutPerson__img .product__info .productInfo__name { margin-bottom: 16px; } .lpEyeperformance[data-page=vol2] .about .section__inner { padding: 96px 0 0 0; } .lpEyeperformance[data-page=vol2] .about .section__content { justify-content: space-between; } .lpEyeperformance[data-page=vol2] .about .section__content .section__contentLeft { width: 47.97%; } .lpEyeperformance[data-page=vol2] .about .section__content .section__contentRight { width: 47.97%; } .lpEyeperformance[data-page=vol2] .about .creator__stylist { width: 100%; max-width: 100%; } .lpEyeperformance[data-page=vol2] .about .creator__stylist h3 { margin-bottom: 24px; } .lpEyeperformance[data-page=vol2] .about .creator__profile { margin-bottom: 70px; } .lpEyeperformance[data-page=vol2] .about .creator__credit { max-width: 470px; } .lpEyeperformance[data-page=vol2] .about .creator__credit h3 { margin-bottom: 28px; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl { margin-bottom: 4px; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl:nth-last-of-type(1) { margin-bottom: 0; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl dt { width: 58.5%; padding-right: 34px; line-height: 1.25; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl dd { width: 41.5%; } .lpEyeperformance[data-page=vol2] .about .creator__credit dl:nth-last-of-type(1) dd { line-height: 1.9; } .lpEyeperformance[data-page=vol2] footer { padding-top: 464px; } } @media (any-hover: hover) { .lpEyeperformance[data-page=vol2] nav ul li a figure:after { transition: opacity 0.15s linear; } .lpEyeperformance[data-page=vol2] nav ul li a:hover figure img { opacity: 0; } .lpEyeperformance[data-page=vol2] nav ul li a:hover figure:after { opacity: 0; transition: opacity 0s linear; } .lpEyeperformance[data-page=vol2] nav ul li a:hover span.c-icon { background: var(--color-white); } .lpEyeperformance[data-page=vol2] nav ul li a:hover span.c-icon svg { fill: var(--color-black); } .lpEyeperformance[data-page=vol2] section.look .imgKv__info ul li button:hover, .lpEyeperformance[data-page=vol2] section.look .imgKv__info ul li a:hover, .lpEyeperformance[data-page=vol2] section.look .product__info ul li button:hover, .lpEyeperformance[data-page=vol2] section.look .product__info ul li a:hover { text-decoration-color: rgb(0, 0, 0); } } @starting-style {} .wf-active .lpEyeperformance :is(.backToTop, .featureItems__titleJob, .featureItems__titleName) { visibility: visible; } .lpEyeperformance :is(.backToTop, .featureItems__titleJob, .featureItems__titleName) { visibility: hidden; } @media (any-hover: hover) { .lpEyeperformance .featureItems a.featureItems__kv .featureItems__imgs img { transition: scale 0.2s ease-out; } .lpEyeperformance .featureItems a.featureItems__kv:hover .featureItems__imgs img { scale: 1.05; } .lpEyeperformance .featureItems a.featureItems__kv:hover .featureItems__kvLinkButton { background: var(--color-white); } .lpEyeperformance .featureItems a.featureItems__kv:hover .featureItems__kvLinkButton span { color: var(--color-black); } .lpEyeperformance .featureItems__list ul li a:hover span:after { background: var(--color-black); } .lpEyeperformance .items__list ul li .items__listInfoLink a:hover span:after { background: var(--color-white); } .lpEyeperformance[data-page=vol1] .grids__list ul li a:hover span:after { background: var(--color-white); } .lpEyeperformance .featureItems .featureItems__list_vol2 ul .featureItems__listContent .featureItems__info a:hover { text-decoration-color: rgb(255, 255, 255); } .lpEyeperformance .featureItems .featureItems__list_vol2 ul li.is_yellow .featureItems__listContent .featureItems__info a:hover { text-decoration-color: rgb(0, 0, 0); } .lpEyeperformance .archives__list ul li a figure { overflow: hidden; } .lpEyeperformance .archives__list ul li a figure img { transition: scale 0.2s ease-out; } .lpEyeperformance .archives__list ul li a:hover figure img { scale: 1.05; } }