/* DECORTÉ JVXC/JVXB/JVXD rich content for Maison KOSÉ */ .page-products-youthpoweressencelotion, .page-products-youthpoweressencelotion * { box-sizing: border-box; } /* Reproduce the DECORTÉ page reset only inside this rich-content block. */ .page-products-youthpoweressencelotion h1, .page-products-youthpoweressencelotion h2, .page-products-youthpoweressencelotion h3, .page-products-youthpoweressencelotion h4, .page-products-youthpoweressencelotion h5, .page-products-youthpoweressencelotion h6, .page-products-youthpoweressencelotion p, .page-products-youthpoweressencelotion ul, .page-products-youthpoweressencelotion ol, .page-products-youthpoweressencelotion dl, .page-products-youthpoweressencelotion dt, .page-products-youthpoweressencelotion dd, .page-products-youthpoweressencelotion figure { margin: 0; padding: 0; } /* Prevent Maison's hanging-indent paragraph style from shifting only the first line. */ .page-products-youthpoweressencelotion p, .page-products-youthpoweressencelotion dd, .page-products-youthpoweressencelotion li { text-indent: 0; } .page-products-youthpoweressencelotion ul, .page-products-youthpoweressencelotion ol { list-style: none; } .page-products-youthpoweressencelotion img { border: 0; display: block; } .page-products-youthpoweressencelotion button { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: inherit; font: inherit; margin: 0; padding: 0; } .page-products-youthpoweressencelotion { font-size: 11px; line-height: 1.5; margin-inline: auto; max-width: 1000px; overflow: hidden; width: 100%; } .page-products-youthpoweressencelotion p { line-height: 1.7; } .page-products-youthpoweressencelotion h1, .page-products-youthpoweressencelotion h2, .page-products-youthpoweressencelotion h3, .page-products-youthpoweressencelotion h4, .page-products-youthpoweressencelotion h5, .page-products-youthpoweressencelotion h6 { line-height: 1.7; } .page-products-youthpoweressencelotion img { height: auto; max-width: 100%; width: 100%; } .jvxc-rich-content .jvxc-layout-sp { display: none; } .jvxc-rich-content .jvxc-break-320 { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion { background-color: rgb(16, 18, 39); color: rgb(255, 255, 255); font-family: "Noto Serif JP", "Times New Roman", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Yu Mincho", 游明朝, YuMincho, 游明朝体, "MS PMincho", "ＭＳ Ｐ明朝", serif; padding-top: 658px; position: relative; padding-bottom: 120px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .dummy { opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .dummy.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h2 { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h3 { font-size: 24px; font-weight: 700; line-height: 1; margin: 0px auto 60px; position: relative; text-align: center; width: fit-content; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h3::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h3::after { display: block; content: ""; height: 2px; position: absolute; top: calc(50% - 1px); width: 150px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h3::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); left: -166px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion h3::after { background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); right: -166px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion p { letter-spacing: 0.08em; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.3); display: flex; gap: 50px; justify-content: center; height: 80px; position: absolute; top: 0px; width: 100%; z-index: 10; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav::before { background: linear-gradient(0deg, rgba(16, 17, 40, 0) 0%, rgb(16, 17, 40) 100%); content: ""; display: block; height: 140px; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav::after { background: linear-gradient(0deg, rgba(136, 126, 255, 0) 0%, rgba(152, 167, 250, 0.25) 100%); content: ""; display: block; height: 79px; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav.-fixed { position: fixed; top: 48px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav a { align-items: center; color: rgb(255, 255, 255); cursor: pointer; display: flex; font-size: 14px; font-weight: 500; gap: 8px; letter-spacing: 0.1em; line-height: 1; position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav a:not(:first-child)::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.5) 100%); content: ""; display: block; height: 32px; left: -24px; pointer-events: none; position: absolute; width: 1px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-nav a::after { background: url("/decorte/JVXC/img/pc/nav_arrow.png") center center / 13px no-repeat rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; content: ""; display: block; height: 20px; width: 20px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv { height: 658px; left: 0px; position: absolute; top: 0px; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv.-fixed { position: fixed; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv--slide { background-position: center top; background-repeat: no-repeat; background-size: auto; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; transition: 1s ease-out; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv--slide.-fixed { position: fixed; top: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv--slide__01 { background-image: url("/decorte/JVXC/img/pc/kv_01.jpg"); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv--slide__02 { background-image: url("/decorte/JVXC/img/pc/kv_02.jpg"); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv--slide__03 { opacity: 1; background-image: url("/decorte/JVXC/img/pc/kv_03.jpg"); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv.-slide01 .block-custom-kv--slide__01 { opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-kv.-slide02 .block-custom-kv--slide__02 { opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept { background: linear-gradient(0deg, rgb(16, 17, 40) 0%, rgb(16, 17, 40) 70%, rgba(16, 17, 40, 0) 100%); padding: 180px 0px 0px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept h3 { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--catch { font-size: 32px; font-weight: 600; margin-bottom: 40px; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--lead { font-size: 16px; line-height: 2.5; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--lead:not(:last-child) { margin-bottom: 2.5em; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--lead strong { font-size: 24px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--notes { margin: 0px auto; width: 700px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--notes li { font-size: 10px; line-height: 1.6; position: relative; padding-left: calc(1.5em + 8px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--movie { border: 1px solid rgb(255, 255, 255); margin: 80px auto 40px; width: 700px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-concept--bg-area { background-image: url("/decorte/JVXC/img/pc/bg_concept.png"); background-position: center bottom; background-repeat: no-repeat; background-size: cover; bottom: 0px; height: 81vw; left: 0px; mix-blend-mode: screen; pointer-events: none; position: absolute; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature { background-image: url("/decorte/JVXC/img/pc/feature_intro_visual.jpg"); background-position: center top; background-repeat: no-repeat; background-size: auto; margin-bottom: 120px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature h3 { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--intro { margin-bottom: 30px; padding-bottom: 200px; padding-left: calc(50% - 50px); padding-top: 340px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--intro-catch { font-size: 24px; font-weight: 600; margin-bottom: 30px; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--intro-catch.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--intro-body { font-size: 16px; line-height: 1.8; opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--intro-body.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture { align-items: center; background-image: url("/decorte/JVXC/img/pc/feature_mixture_frame.png"); background-position: center top; background-repeat: no-repeat; background-size: auto; gap: 80px 24px; display: flex; flex-wrap: wrap; justify-content: center; margin: 0px auto; text-align: center; opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture-item { align-items: center; display: flex; height: 320px; justify-content: center; width: 320px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture-item-sub-text { display: block; font-size: 13px; line-height: 1; margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture-item p { font-size: 28px; letter-spacing: 0.02em; line-height: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--mixture-summary { font-size: 24px; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--bottom-area { background-image: url("/decorte/JVXC/img/pc/bg_feature_bottom.png"); background-position: center top; background-repeat: no-repeat; background-size: auto; padding-top: 80px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks { align-items: center; display: flex; justify-content: space-between; margin: 0px auto; position: relative; width: 1040px; opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks__koji { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome { flex-direction: row-reverse; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure { padding: 12px; position: relative; width: 472px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure::before { background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks figure img { position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks-text-area { width: 510px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks-percentage { font-size: 48px; font-weight: 600; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks-percentage strong { font-size: 100px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks-name { font-size: 32px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--picks-name-sub-text { display: block; font-size: 24px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--notes { font-size: 10px; line-height: 1.6; margin: 80px auto 0px; position: relative; padding-left: calc(1.5em + 8px); width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link { margin: 120px auto 0px; padding: 13px; position: relative; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link::before { background: linear-gradient(167deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link a { display: block; position: relative; transition: 0.4s; z-index: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-feature--more-link a:hover { opacity: 0.75; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji { background-image: url("/decorte/JVXC/img/pc/bg_koji_intro.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: auto; margin-bottom: 120px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji h3::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji h3::after { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji h4 { font-size: 32px; font-weight: 600; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji h4 strong { font-size: 56px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--title-visual { display: block; margin: 0px auto 80px; width: 1280px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--intro { border: 1px solid rgba(255, 255, 255, 0.5); margin: 80px auto 0px; padding: 40px 0px; position: relative; text-align: center; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--intro::before { background: linear-gradient(0deg, rgba(62, 95, 100, 0.5) 0%, rgba(48, 71, 111, 0.5) 40%, rgba(14, 14, 14, 0.5) 100%); backdrop-filter: blur(8px); content: ""; display: block; filter: brightness(90%); height: calc(100% - 2px); left: 1px; opacity: 0.9; position: absolute; top: 1px; width: calc(100% - 2px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--intro-catch { font-size: 24px; font-weight: 600; margin-bottom: 30px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--intro-catch-sub-text { display: block; font-size: 16px; font-weight: 400; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--intro-lead { font-size: 16px; line-height: 2; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline { margin-bottom: 80px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline h4 { opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline h4.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container { margin: -25px auto 0px; padding: 80px 0px 60px; position: relative; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60px, rgb(255, 255, 255) calc(100% - 60px), rgba(255, 255, 255, 0) 100%); content: ""; display: block; left: 44px; position: absolute; top: 0px; width: 1px; height: 0px; transition: 8s; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-viewSpotted::before { height: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time01 .block-custom-koji--timeline-item__01 dt { opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time01 .block-custom-koji--timeline-item__01 dt::before { transform: scale(1); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time02 .block-custom-koji--timeline-item__02 dt { opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time02 .block-custom-koji--timeline-item__02 dt::before { transform: scale(1); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt { opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt::before { transform: scale(1); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item { display: flex; flex-direction: column; min-height: 230px; padding-left: 110px; padding-right: 440px; padding-top: 10px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item:not(:last-child) { margin-bottom: 80px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item.-viewOverCenter dd { opacity: 1; transform: translate(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt { font-size: 24px; font-weight: 600; line-height: 1; margin-bottom: 30px; position: relative; opacity: 0; transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::after { border-radius: 50%; content: ""; display: block; position: absolute; left: -30px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::before { border: 1px solid rgb(255, 255, 255); height: 89px; left: -110px; top: calc(0.5em - 45px); width: 89px; transform: scale(0); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::after { background-color: rgb(255, 255, 255); border: 7px solid rgb(16, 17, 40); height: 23px; left: -77px; top: calc(0.5em - 12px); width: 23px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-catch { font-size: 20px; font-weight: 600; line-height: 1; margin-bottom: 20px; transform: translateY(30px); transition: 0.4s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-description { font-size: 16px; line-height: 1.9; transform: translateY(30px); transition: 0.4s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-image { position: absolute; right: 0px; top: 0px; width: 410px; transform: translateX(60px); transition: 0.8s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients h4 { margin-bottom: 30px; opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients h4.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list { background-image: url("/decorte/JVXC/img/pc/koji_ingredients.png"); background-position: left 57px center; background-repeat: no-repeat; background-size: 204px; border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0px auto; padding: 60px 39px 60px 314px; row-gap: 24px; width: 1040px; opacity: 0; transform: translateY(60px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 20px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl:not(:last-child) { width: calc(50% - 20px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl:last-child { width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl dt { font-size: 20px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl dd { font-size: 14px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-koji--movie { border: 1px solid rgb(255, 255, 255); margin: 80px auto 0px; width: 700px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome { background-image: url("/decorte/JVXC/img/pc/bg_liposome.jpg"); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding: 80px 0px 230px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome::before { background: linear-gradient(0deg, rgb(16, 17, 40) 0%, rgba(16, 17, 40, 0) 100%); bottom: 0px; content: ""; display: block; height: 500px; left: 0px; position: absolute; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro { margin: 0px auto 110px; min-height: 380px; padding-left: 460px; position: relative; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro.-viewSpotted::before { filter: blur(0px); opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro::before { background-image: url("/decorte/JVXC/img/pc/liposome_intro_capsule.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 380px; left: 0px; position: absolute; transform: scale(1.8); top: 0px; width: 380px; filter: blur(10px); opacity: 0; transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-sub-catch { align-items: center; border: 1px solid; border-radius: 15px; display: flex; font-size: 16px; height: 31px; line-height: 1; margin-bottom: 20px; padding: 0px 1em; width: fit-content; opacity: 0; transform: translateX(30px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-sub-catch.-delay { opacity: 1; transform: translateX(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch { font-size: 24px; font-weight: 600; margin-bottom: 20px; opacity: 0; transform: translateX(30px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch strong { font-size: 32px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch sup { vertical-align: text-top; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch.-delay { opacity: 1; transform: translateX(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-body { display: flex; justify-content: space-between; margin-top: 50px; opacity: 0; transform: translateX(30px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-body figure { width: 130px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-body figure figcaption { font-size: 12px; line-height: 1; margin-top: 4px; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-body p { font-size: 16px; line-height: 1.9; width: calc(100% - 160px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--intro-body.-delay { opacity: 1; transform: translateX(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail { border: 1px solid rgba(255, 255, 255, 0.5); margin: 0px auto; padding: 0px 39px 60px; position: relative; width: 1040px; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail h4 { align-items: center; background-image: url("/decorte/JVXC/img/pc/liposome_detail_title_frame.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; display: flex; font-size: 24px; font-weight: 600; height: 62px; justify-content: center; margin: -31px auto 40px; text-align: center; width: 243px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-lead { font-size: 24px; font-weight: 600; margin-bottom: 60px; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-body { align-items: center; display: flex; justify-content: space-between; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-body figure { border: 1px solid rgba(255, 255, 255, 0.5); padding: 16px 28px; width: 410px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-body p { font-size: 16px; width: 510px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison { background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-wrap: wrap; gap: 24px 100px; justify-content: center; margin: 56px auto 0px; padding: 28px 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison-lead { font-size: 16px; text-align: center; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure { align-items: center; display: flex; gap: 16px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure img { width: 160px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption { font-size: 16px; font-weight: 600; line-height: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption span { display: block; font-size: 12px; font-weight: 400; margin-top: 10px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature { margin: 80px auto 0px; position: relative; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature h4 { font-size: 24px; font-weight: 600; margin-bottom: 40px; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list { display: flex; flex-wrap: wrap; gap: 24px 40px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl { width: calc(50% - 20px); opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-open dt button::after { transform: rotateZ(0deg); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-open dd { opacity: 1; padding: 24px; pointer-events: auto; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dd { background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); border: 1px solid rgba(255, 255, 255, 0.5); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt { position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt::after { background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; content: ""; display: block; height: 32px; pointer-events: none; position: absolute; right: 24px; top: calc(50% - 16px); width: 32px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button { align-items: center; color: rgb(255, 255, 255); cursor: pointer; display: flex; font-size: 16px; font-weight: 600; height: 64px; line-height: 1; padding-left: 24px; position: relative; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::after { background-color: rgb(255, 255, 255); content: ""; display: block; height: 2px; position: absolute; right: 32px; top: calc(50% - 1px); transition: 0.4s; width: 16px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::after { transform: rotateZ(90deg); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button sup { height: 16px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dd { box-sizing: border-box; font-size: 12px; height: 0px; line-height: 2.5; margin-top: -1px; opacity: 0; overflow: hidden; padding: 0px 24px; pointer-events: none; transition: height 0.35s ease-out, opacity 0.25s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-liposome--notes { font-size: 10px; margin: 30px 0px 0px; position: relative; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients { margin-bottom: 120px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients.-viewSpotted .block-custom-ingredients--catch { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--catch { font-size: 24px; font-weight: 600; margin-bottom: 60px; text-align: center; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--list { height: 440px; margin: 0px auto; position: relative; width: 770px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item { position: absolute; width: 182px; opacity: 0; transform: scale(0.5); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item.-delay { opacity: 1; transform: scale(1); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item img { margin: 0px auto 20px; width: 140px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item figcaption { font-size: 16px; font-weight: 600; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 { left: calc(50% - 170px); height: 340px; top: calc(50% - 170px); width: 340px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 img { margin: 0px auto 30px; width: 190px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 figcaption { font-size: 24px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__02 { left: 0px; top: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__03 { bottom: 0px; left: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__04 { right: 0px; top: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--item__05 { bottom: 0px; right: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--notes { font-size: 10px; line-height: 1.6; margin: 40px auto 0px; position: relative; padding-left: calc(1em + 8px); width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-ingredients--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect { background-image: url("/decorte/JVXC/img/pc/bg_effect.jpg"); background-position: center top; background-repeat: no-repeat; background-size: auto; margin-bottom: 120px; min-height: 880px; padding: 80px 0px 40px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--catch { font-size: 24px; font-weight: 600; margin-bottom: 40px; text-align: center; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--catch.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list { height: 550px; margin: 0px auto; position: relative; width: 626px; opacity: 0; transform: scale(0.8); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list.-viewSpotted { opacity: 1; transform: scale(1); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list::after { background-position: center center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list::before { background-image: url("/decorte/JVXC/img/pc/effect_shape.png"); height: 474px; left: calc(50% - 237px); top: calc(50% - 237px); width: 474px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list::after { background-image: url("/decorte/JVXC/img/pc/effect_products.png"); height: 370px; left: calc(50% - 59px); top: calc(50% - 185px); width: 118px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li { font-size: 16px; position: absolute; text-align: center; z-index: 1; filter: blur(5px); opacity: 0; transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li.-delay { filter: blur(0px); opacity: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(1) { left: calc(50% - 40px); top: 0px; width: 80px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(2) { left: calc(50% + 136px); top: 48px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(3) { left: calc(50% + 221px); top: 148px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(4) { left: calc(50% + 253px); line-height: 1; top: calc(50% - 0.5em); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(5) { bottom: 132px; left: calc(50% + 220px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(6) { bottom: 43px; left: calc(50% + 136px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(7) { bottom: 0px; left: calc(50% - 40px); letter-spacing: 0px; width: 80px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(8) { bottom: 43px; right: calc(50% + 136px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(9) { bottom: 132px; right: calc(50% + 220px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(10) { line-height: 1; right: calc(50% + 253px); top: calc(50% - 0.5em); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(11) { right: calc(50% + 221px); top: 148px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(12) { right: calc(50% + 136px); top: 48px; letter-spacing: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-effect--notes { font-size: 10px; margin: 40px auto 0px; width: 1040px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other { padding-bottom: 160px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image { padding: 12px; position: absolute; left: calc(50% + 80px); top: 20%; width: 472px; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image::before { background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--image img { position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item { align-items: center; display: flex; flex-flow: column wrap; justify-content: center; margin: 0px auto; position: relative; width: 1040px; min-height: 360px; opacity: 0; transform: translateY(60px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item__a { padding-right: 540px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item__a .block-custom-other--item-image { right: 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item__b { text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item dt { font-size: 32px; font-weight: 600; margin-bottom: 20px; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) { font-size: 16px; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) + dd:not([class]) { margin-top: 20px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) strong { font-size: 20px; font-weight: 600; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item:not(:last-child) { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image { padding: 12px; position: absolute; width: 472px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image::before, .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image::before { background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-image img { position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-check { margin-top: 40px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-check-list { border: 1px solid rgba(255, 255, 255, 0.6); padding: 24px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-check-list li { font-size: 16px; padding-left: calc(1.5em + 8px); position: relative; text-align: left; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-check-list-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-check-list-marker-num { display: inline-block; text-align: center; width: 1em; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-notes { font-size: 10px; line-height: 1.6; margin-top: 20px; position: relative; padding-left: calc(1em + 8px); width: fit-content; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-other--item-notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--lead { font-size: 16px; margin-bottom: 30px; text-align: center; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select { display: flex; gap: 0px 1px; justify-content: center; margin-bottom: 1px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button { align-items: center; background-color: rgb(255, 255, 255); display: flex; font-size: 16px; justify-content: center; height: 50px; transition: 0.4s ease-out; width: 400px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button.-active { color: rgb(0, 0, 0); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button:not(.-active) { cursor: pointer; background-color: rgba(255, 255, 255, 0.5); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button:not(.-active):hover { background-color: rgba(107, 85, 185, 0.5); color: rgb(255, 255, 255); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container { background-color: rgb(255, 255, 255); margin: 0px auto; padding: 60px; width: 1280px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container:not(.-show) { display: none; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container#pattern_a .block-custom-usage-order--flow-step { width: calc(16.6667% - 25px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container#pattern_b .block-custom-usage-order--flow-step { width: calc(20% - 24px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container { display: flex; justify-content: space-between; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container:not(:last-child) { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name { align-items: center; background-color: rgb(16, 18, 39); display: flex; font-size: 20px; justify-content: center; text-align: center; width: 140px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name span { font-size: 24px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name span span { display: block; font-size: 14px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow { display: flex; gap: 0px 30px; width: calc(100% - 170px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step { background-color: rgb(255, 255, 255); padding-top: 30px; position: relative; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step:not(:last-child)::after { border-width: 10px medium 10px 10px; border-style: solid none solid solid; border-color: transparent currentcolor transparent rgb(208, 201, 211); border-image: none; content: ""; display: block; position: absolute; right: -20px; top: calc(50% - 10px); } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step label { align-items: center; background-color: rgb(16, 18, 39); color: rgb(255, 255, 255); display: flex; height: 30px; justify-content: center; position: absolute; top: 0px; width: 100%; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure { padding: 20px 0px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure img { margin: 0px auto; width: 110px; } .jvxc-rich-content .jvxc-layout-pc .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure figcaption { color: rgb(0, 0, 0); font-size: 10px; line-height: 1.5; text-align: center; } /* SP layout rules are scoped to the SP markup so it can also be used inside a narrow PC product column. */ .jvxc-rich-content.jvxc-use-sp .jvxc-layout-pc { display: none; } .jvxc-rich-content.jvxc-use-sp .jvxc-layout-sp { display: block; margin-inline: auto; max-width: 750px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion { background-color: rgb(16, 18, 39); color: rgb(255, 255, 255); font-family: "Noto Serif JP", "Times New Roman", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Yu Mincho", 游明朝, YuMincho, 游明朝体, "MS PMincho", "ＭＳ Ｐ明朝", serif; padding-top: min(164.533333vw, 1234px); position: relative; padding-bottom: 80px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h2 { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h3 { font-size: 24px; font-weight: 700; line-height: 1; margin: 0px auto; position: relative; text-align: center; width: fit-content; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h3::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h3::after { display: block; content: ""; height: 2px; position: absolute; top: calc(50% - 1px); width: 25px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h3::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); left: -34px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion h3::after { background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); right: -34px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion p { letter-spacing: 0.08em; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav { padding-bottom: 120px; position: relative; width: 100%; z-index: 10; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav::before { background: rgb(16, 17, 40); content: ""; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav--row { border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); display: flex; flex-wrap: wrap; justify-content: center; position: relative; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav--row:nth-child(1) { margin-bottom: 8px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav--row:nth-child(1) a { width: 25%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav--row:nth-child(2) a { width: 33.3333%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav a { align-items: center; background: linear-gradient(0deg, rgba(136, 126, 255, 0) 0%, rgba(152, 167, 250, 0.25) 100%); color: rgb(255, 255, 255); cursor: pointer; display: flex; font-size: 12px; font-weight: 500; height: 85px; justify-content: center; letter-spacing: 0.1em; line-height: 1.5; position: relative; text-align: center; z-index: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav a.block-custom-nav--item__two-lines { box-sizing: border-box; padding-bottom: 14px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav a:not(:first-child)::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.5) 100%); content: ""; display: block; height: 100%; left: -1px; pointer-events: none; position: absolute; top: 0px; width: 1px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-nav a::after { background: url("/decorte/JVXC/img/sp/nav_arrow.png") center center / 13px no-repeat rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; bottom: 8px; content: ""; display: block; height: 18px; position: absolute; width: 18px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv { height: min(164.533333vw, 1234px); left: 0px; max-width: 750px; position: absolute; top: 0px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv.-fixed { position: fixed; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv--slide { background-color: rgb(16, 18, 39); background-position: center top; background-repeat: no-repeat; background-size: contain; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; transition: 1s ease-out; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv--slide.-fixed { position: fixed; top: 0px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv--slide__01 { background-image: url("/decorte/JVXC/img/sp/kv_01.jpg"); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv--slide__02 { background-image: url("/decorte/JVXC/img/sp/kv_02.jpg"); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv--slide__03 { background-image: url("/decorte/JVXC/img/sp/kv_03_a.jpg"); opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv.-slide01 .block-custom-kv--slide__01 { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv.-slide02 .block-custom-kv--slide__02 { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept { background: url("/decorte/JVXC/img/sp/bg_concept.jpg") center top / 100% no-repeat rgb(16, 18, 39); padding: 90px 0px 120px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept h3 { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--catch { font-size: 24px; font-weight: 600; margin-bottom: 50px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead { font-size: 14px; letter-spacing: 0.01em; line-height: 2; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead:not(:last-child) { margin-bottom: 2em; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead strong { font-size: 18px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--movie { border: 1px solid rgba(255, 255, 255, 0.2); margin: 40px auto; width: calc(100% - 20px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--notes { margin: 40px auto; width: calc(100% - 20px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--notes li { font-size: 11px; line-height: 1.6; position: relative; padding-left: calc(1.5em + 8px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature { background-image: url("/decorte/JVXC/img/sp/feature_intro_visual.jpg"); background-position: center top; background-repeat: no-repeat; background-size: 100%; margin-bottom: 120px; padding-top: min(161.7vw, 1213px); position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature h3 { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro { margin-bottom: 30px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-catch { font-size: 20px; font-weight: 600; margin-bottom: 20px; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-catch.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-body { font-size: 14px; line-height: 1.8; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-body.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture { align-items: center; background-image: url("/decorte/JVXC/img/sp/feature_mixture_frame.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; display: flex; flex-direction: column; height: 185px; justify-content: center; margin: 0px auto 25px; width: 320px; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item { font-size: 28px; letter-spacing: 0.06em; line-height: 1; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item-sub-text { display: block; font-size: 12px; letter-spacing: 0.36em; line-height: 1; margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item:nth-child(1) { margin-bottom: 50px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item:nth-child(1)::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item:nth-child(1)::after { background-color: rgb(255, 255, 255); bottom: -25px; content: ""; display: block; height: 1px; left: calc(50% - 25px); position: absolute; width: 50px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item:nth-child(1)::before { transform: rotateZ(30deg); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-item:nth-child(1)::after { transform: rotateZ(-30deg); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-summary { font-size: 20px; text-align: center; width: 100%; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--mixture-summary.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--bottom-area { background-color: rgb(16, 18, 39); isolation: isolate; padding-top: 80px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--bottom-area::before { background: url("/decorte/JVXC/img/sp/bg_feature_bottom.png") center top / 100% 100% no-repeat; content: ""; inset: 0px; mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 78%, transparent 100%); pointer-events: none; position: absolute; -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 78%, transparent 100%); z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--bottom-area > * { position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks { margin: 0px auto; min-height: min(40vw, 300px); overflow: hidden; padding-top: min(13vw, 100px); position: relative; width: 100%; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__koji { margin-bottom: 40px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__koji figure { left: -2%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__koji .block-custom-feature--picks-text-area { text-align: right; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome figure { right: -14%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome .block-custom-feature--picks-text-area { box-sizing: border-box; padding-left: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome .block-custom-feature--picks-name { margin-left: 0; padding-left: 0; text-align: left; text-indent: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome .block-custom-feature--picks-name-sub-text, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks__liposome .block-custom-feature--picks-name-main-text { display: block; margin-left: 0; padding-left: 0; text-align: left; text-indent: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure { padding: 5px; position: absolute; top: 0px; width: 60%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure::before { background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks figure img { display: block; height: auto; position: relative; width: 100%; z-index: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks-text-area { margin: 0px auto; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks-percentage { font-size: 24px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks-percentage strong { font-size: 77px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks-name { font-size: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks-name-sub-text { display: block; font-size: 16px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--notes { font-size: 11px; line-height: 1.6; margin: 20px auto 0px; position: relative; padding-left: calc(1.5em + 8px); width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link { margin: 60px auto 0px; padding: 5px; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link::before { background: linear-gradient(167deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--more-link a { display: block; position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji { background-image: url("/decorte/JVXC/img/sp/bg_koji_intro.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: 100%; margin-bottom: 60px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji h3 { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji h4 { font-size: 28px; font-weight: 600; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji h4 strong { font-size: 40px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--intro { border: 1px solid rgba(255, 255, 255, 0.5); margin: 60px auto 0px; padding: 30px 15px; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--intro::before { background: linear-gradient(0deg, rgba(62, 95, 100, 0.5) 0%, rgba(48, 71, 111, 0.5) 40%, rgba(14, 14, 14, 0.5) 100%); backdrop-filter: blur(8px); content: ""; display: block; filter: brightness(90%); height: calc(100% - 2px); left: 1px; opacity: 0.9; position: absolute; top: 1px; width: calc(100% - 2px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--intro-catch { font-size: 20px; font-weight: 600; margin-bottom: 10px; position: relative; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--intro-catch-sub-text { display: block; font-size: 12px; font-weight: 400; margin-bottom: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--intro-lead { font-size: 14px; line-height: 2; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline { margin-bottom: 80px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline h4 { opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline h4.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container { margin: 0px auto; padding: 60px 0px; position: relative; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60px, rgb(255, 255, 255) calc(100% - 60px), rgba(255, 255, 255, 0) 100%); content: ""; display: block; left: 15px; position: absolute; top: 0px; width: 1px; height: 0px; transition: 8s; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-viewSpotted::before { height: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time01 .block-custom-koji--timeline-item__01 dt span { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time01 .block-custom-koji--timeline-item__01 dt::before { opacity: 0.2; transform: scale(1); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time01 .block-custom-koji--timeline-item__01 dt::after { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time02 .block-custom-koji--timeline-item__02 dt span { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time02 .block-custom-koji--timeline-item__02 dt::before { opacity: 0.2; transform: scale(1); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time02 .block-custom-koji--timeline-item__02 dt::after { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt span { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt::before { opacity: 0.2; transform: scale(1); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-container.-time03 .block-custom-koji--timeline-item__03 dt::after { opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item { padding-left: 40px; padding-top: 60px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item.-viewOverCenter dd { opacity: 1; transform: translate(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt { font-size: 26px; font-weight: 600; line-height: 1; margin-bottom: 30px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt span { line-height: 1; opacity: 0; transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::after { border-radius: 50%; box-sizing: border-box; content: ""; display: block; position: absolute; left: -30px; transition: 0.4s ease-in; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::before { border: 1px solid rgb(255, 255, 255); height: 121px; left: -85px; opacity: 1; top: calc(0.5em - 60px); width: 121px; transform: scale(0); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item dt::after { background-color: rgb(255, 255, 255); border: 9px solid rgb(16, 17, 40); height: 25px; left: -37px; top: calc(0.5em - 12px); width: 25px; opacity: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-catch { font-size: 20px; font-weight: 600; line-height: 1; margin-bottom: 20px; transform: translateY(30px); transition: 0.4s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-description { box-sizing: border-box; font-size: 12px; line-height: 1.9; margin-bottom: 40px; padding-right: 20px; transform: translateY(30px); transition: 0.4s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline-item-image { width: 100%; transform: translateX(60px); transition: 0.8s ease-out; opacity: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients h4 { margin-bottom: 130px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list { border: 1px solid rgba(255, 255, 255, 0.5); margin: 0px auto; padding: 90px 20px 20px; position: relative; row-gap: 24px; width: calc(100% - 40px); opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list::before { background-image: url("/decorte/JVXC/img/sp/koji_ingredients.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; display: block; content: ""; height: 150px; left: calc(50% - 75px); position: absolute; top: -75px; width: 150px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl { width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 15px; padding-bottom: 15px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl dt { font-size: 16px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients-list dl dd { font-size: 12px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--movie { border: 1px solid rgba(255, 255, 255, 0.2); margin: 60px auto 0px; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome { background-image: url("/decorte/JVXC/img/sp/bg_liposome.jpg"); background-position: center top; background-repeat: no-repeat; background-size: 100%; padding: 80px 0px 160px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome::before { background: linear-gradient(0deg, rgb(16, 17, 40) 0%, rgba(16, 17, 40, 0) 100%); bottom: 0px; content: ""; display: block; height: 500px; left: 0px; position: absolute; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome h3 { margin-bottom: 30px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro { margin: 0px auto 60px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro.-viewSpotted .block-custom-liposome--intro-capsule { filter: blur(0px); opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-capsule { background-image: url("/decorte/JVXC/img/pc/liposome_intro_capsule.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 268px; margin: 0px auto; transform: scale(1.8) translateY(-110px); width: 268px; opacity: 0; filter: blur(10px); transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-capsule.-delay { opacity: 1; transform: scale(1.8) translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-sub-catch { align-items: center; border: 1px solid; border-radius: 15px; display: flex; font-size: 12px; height: 31px; line-height: 1; margin: 0px auto 20px; padding: 0px 1em; width: fit-content; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-sub-catch.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch { font-size: 20px; font-weight: 600; margin-bottom: 10px; text-align: center; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch strong { font-size: 30px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-catch sup { vertical-align: text-top; font-size: 0.5em; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-body { display: flex; justify-content: space-between; margin: 0px auto; width: calc(100% - 40px); opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-body.-delay { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-body figure { width: 120px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-body figure figcaption { font-size: 8px; line-height: 1; margin-top: 4px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--intro-body p { font-size: 10px; line-height: 1.9; width: calc(100% - 140px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail { margin: 0px auto; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail h4 { align-items: center; background-image: url("/decorte/JVXC/img/sp/liposome_detail_title_frame.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; display: flex; font-size: 17px; font-weight: 600; height: 37px; justify-content: center; margin: 0px auto 15px; text-align: center; width: 180px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-lead { font-size: 17px; font-weight: 600; margin-bottom: 40px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-lead strong { font-size: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-body figure { border: 1px solid rgba(255, 255, 255, 0.5); padding: 15px; margin: 0px auto 60px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-body p { font-size: 12px; text-align: left; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison { background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-wrap: wrap; gap: 20px 50px; justify-content: center; margin: 40px 0px; padding: 25px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison-lead { font-size: 14px; letter-spacing: 0px; text-align: center; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure { width: calc(50% - 25px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure:nth-of-type(1) { position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure:nth-of-type(1)::after { background-color: rgba(255, 255, 255, 0.4); content: ""; display: block; height: 100%; right: -25px; position: absolute; top: 0px; width: 1px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption { font-size: 14px; font-weight: 600; margin-top: 10px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption span { display: block; font-size: 10px; font-weight: 400; margin-top: 5px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature { margin: 140px auto 0px; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature h4 { font-size: 20px; font-weight: 600; margin-bottom: 30px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl { width: 100%; opacity: 0; transform: translateX(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-delay { opacity: 1; transform: translateX(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl:not(:last-child) { margin-bottom: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-open dt button::after { transform: rotateZ(0deg); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl.-open dd { opacity: 1; padding: 20px; pointer-events: auto; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dd { background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); border: 1px solid rgba(255, 255, 255, 0.5); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt { position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt::after { background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; content: ""; display: block; height: 32px; position: absolute; right: 24px; top: calc(50% - 16px); width: 32px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button { align-items: center; color: rgb(255, 255, 255); cursor: pointer; display: flex; font-size: 15px; font-weight: 600; height: 55px; line-height: 1; padding-left: 20px; position: relative; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::after { background-color: rgb(255, 255, 255); content: ""; display: block; height: 2px; position: absolute; right: 32px; top: calc(50% - 1px); transition: 0.4s; width: 16px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button::after { transform: rotateZ(90deg); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dt button sup { height: 15px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature-list dl dd { box-sizing: border-box; font-size: 14px; height: 0px; line-height: 1.8; margin-top: -1px; opacity: 0; overflow: hidden; padding: 0px 20px; pointer-events: none; transition: height 0.35s ease-out, opacity 0.25s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--notes { font-size: 11px; margin: 20px auto 0px; position: relative; text-align: center; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients { margin-bottom: 120px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients h3 { line-height: 1.5; margin-bottom: 30px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--list { display: flex; flex-wrap: wrap; margin: 0px auto; position: relative; width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item { position: relative; width: 50%; opacity: 0; transform: scale(0.5); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item.-delay { opacity: 1; transform: scale(1); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item img { margin: 0px auto 20px; width: 70%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item figcaption { display: block; font-size: 14px; font-weight: 600; position: relative; text-align: center; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 { margin-bottom: 30px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 img { margin: 0px auto 40px; width: 50%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item__01 figcaption { font-size: 20px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item__02 { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--item__03 { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--notes { font-size: 11px; line-height: 1.6; margin: 40px auto 0px; position: relative; padding-left: calc(1em + 8px); width: calc(100% - 40px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-ingredients--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect { background-image: url("/decorte/JVXC/img/sp/bg_effect.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; margin-bottom: 120px; padding: 80px 0px 180px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect h3 { margin-bottom: 40px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--catch { font-size: 16px; font-weight: 600; line-height: 2; margin-bottom: 40px; text-align: center; opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--catch.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list { height: min(84.5vw, 634px); margin: 0px auto; position: relative; width: 94%; opacity: 0; transform: scale(0.8); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list.-viewSpotted { opacity: 1; transform: scale(1); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::after { background-position: center center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::before { background-image: url("/decorte/JVXC/img/pc/effect_shape.png"); height: min(73vw, 550px); left: calc(50% - 36.5vw); top: calc(50% - 36.5vw); width: 73vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::after { background-image: url("/decorte/JVXC/img/pc/effect_products.png"); height: min(56.4vw, 423px); left: calc(50% - 8.9vw); top: calc(50% - 28.2vw); width: 17.8vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li { font-size: min(3vw, 24px); position: absolute; text-align: center; z-index: 1; filter: blur(5px); opacity: 0; transition: 0.8s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li.-delay { filter: blur(0px); opacity: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li sup { font-size: 7px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(1) { left: 50%; top: 0px; transform: translateX(-50%); white-space: nowrap; width: auto; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(2) { left: 68%; top: 6vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(3) { left: 84.4%; top: 19.7vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(4) { left: 89.7%; line-height: 1; top: calc(50% - 0.5em); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(5) { bottom: 17.6vw; left: 84%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(6) { bottom: 5.7vw; left: 70.1%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(7) { bottom: 0px; left: 50%; letter-spacing: 0px; transform: translateX(-50%); white-space: nowrap; width: auto; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(8) { bottom: 5.7vw; right: 70.1%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(9) { bottom: 17.6vw; right: 84%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(10) { line-height: 1; right: 89.7%; top: calc(50% - 0.5em); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(11) { right: 84.4%; top: 19.7vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(12) { letter-spacing: 0px; right: 68%; top: 6vw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--notes { margin: 40px auto; width: calc(100% - 20px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--notes li { font-size: 11px; line-height: 1.6; position: relative; padding-left: calc(1.5em + 8px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other { padding-bottom: 160px; position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other h3 { margin-bottom: 40px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item { margin: 0px auto; min-height: 282px; position: relative; width: calc(100% - 40px); opacity: 0; transform: translateY(30px); transition: 0.4s ease-out; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item.-viewSpotted { opacity: 1; transform: translateY(0px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item dt { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) { font-size: 12px; line-height: 2; text-align: center; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) + dd:not([class]) { margin-top: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item dd:not([class]) strong { font-size: 18px; font-weight: 600; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item:not(:last-child) { margin-bottom: 60px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image { margin-bottom: 40px; padding: 5px; position: relative; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image::before, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image::after { content: ""; display: block; position: absolute; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image::before { background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); height: 100%; left: 0px; top: 0px; width: 100%; z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image::after { background-color: rgb(16, 18, 39); height: calc(100% - 2px); left: 1px; top: 1px; width: calc(100% - 2px); z-index: 0; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-image img { position: relative; z-index: 1; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check { margin-top: 40px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check-list { border: 1px solid rgba(255, 255, 255, 0.6); padding: 20px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check-list li { font-size: 12px; padding-left: calc(1.5em + 8px); position: relative; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check-list li:not(:last-child) { margin-bottom: 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check-list-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-check-list-marker-num { display: inline-block; text-align: center; width: 1em; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-notes { font-size: 11px; line-height: 1.6; margin-top: 20px; position: relative; padding-left: calc(1em + 8px); width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-other--item-notes-marker { left: 0px; position: absolute; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order h3 { margin-bottom: 30px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--lead { font-size: 12px; margin-bottom: 30px; text-align: center; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select { display: flex; gap: 0px 1px; justify-content: center; margin-bottom: 1px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button { align-items: center; background-color: rgb(255, 255, 255); display: flex; font-size: 12px; justify-content: center; height: 50px; transition: 0.4s ease-out; width: 50%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button.-active { color: rgb(0, 0, 0); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-select button:not(.-active) { cursor: pointer; background-color: rgba(255, 255, 255, 0.5); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container { background-color: rgb(255, 255, 255); margin: 0px auto; padding: 30px 10px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--pattern-container:not(.-show) { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container:not(:last-child) { margin-bottom: 30px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name { align-items: center; background-color: rgb(16, 18, 39); margin-bottom: 10px; padding: 0.5em; text-align: center; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name span { font-size: 16px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-container-name span span { display: block; font-size: 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow { display: flex; gap: 0px min(3.33%, 24.3px); overflow-x: auto; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step { padding-top: 30px; position: relative; min-width: min(20%, 146px); max-width: 146px; width: 20%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step:not(:last-child)::after { border-width: 6px medium 6px 6px; border-style: solid none solid solid; border-color: transparent currentcolor transparent rgb(208, 201, 211); border-image: none; content: ""; display: block; position: absolute; right: calc(-7% - 3px); top: calc(50% - 6px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step label { align-items: center; background-color: rgb(16, 18, 39); color: rgb(255, 255, 255); display: flex; height: 30px; justify-content: center; position: absolute; top: 0px; width: 100%; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure { padding: 10px 0px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure img { margin: 0px auto; width: min(110px, 100%); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-usage-order--flow-step figure figcaption { color: rgb(0, 0, 0); font-size: 8px; line-height: 1.3; text-align: center; } /* When the SP layout is selected inside a narrow PC product column, size viewport-based artwork from the content width. */ @supports (width: 1cqw) { .jvxc-rich-content .jvxc-layout-sp { container-type: inline-size; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion { padding-top: min(164.533333cqw, 1234px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-kv { height: min(164.533333cqw, 1234px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks { min-height: min(40cqw, 300px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature { padding-top: min(161.7cqw, 1213px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--picks { padding-top: min(13cqw, 100px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list { height: min(84.5cqw, 634px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::before { height: min(73cqw, 550px); left: calc(50% - 36.5cqw); top: calc(50% - 36.5cqw); width: 73cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list::after { height: min(56.4cqw, 423px); left: calc(50% - 8.9cqw); top: calc(50% - 28.2cqw); width: 17.8cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li { font-size: min(3cqw, 24px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(2) { top: 6cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(3) { top: 19.7cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(5) { bottom: 17.6cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(6), .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(8) { bottom: 5.7cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(9) { bottom: 17.6cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(11) { top: 19.7cqw; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-effect--list li:nth-child(12) { top: 6cqw; } } .jvxc-rich-content .jvxc-layout-sp .block-custom-concept--movie iframe, .jvxc-rich-content .jvxc-layout-sp .block-custom-koji--movie iframe { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; width: 100%; } .jvxc-rich-content.jvxc-narrow .jvxc-layout-sp .block-custom-feature--picks__koji figure { left: 0; } .jvxc-rich-content.jvxc-narrow .jvxc-layout-sp .block-custom-feature--picks__liposome figure { right: 0; } /* Restore full-bleed rich content inside Maison's padded smartphone product column. */ @media (max-width: 430px) { .jvxc-rich-content { box-sizing: border-box; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; width: 100vw; } .jvxc-rich-content .page-products-youthpoweressencelotion, .jvxc-rich-content .page-products-youthpoweressencelotion * { letter-spacing: 0; } } @media (max-width: 320px) { .jvxc-rich-content .jvxc-break-320 { display: inline; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-body, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison-lead { text-align: left; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-body { margin-left: auto; margin-right: auto; width: calc(100% - 30px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead br, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-feature--intro-body br, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison-lead br { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-concept--lead strong br { display: block; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline h4, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients h4 { font-size: 20px; white-space: nowrap; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--timeline h4 strong, .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-koji--ingredients h4 strong { font-size: 32px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison { gap: 16px 20px; padding: 20px 10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure { width: calc(50% - 10px); } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure:nth-of-type(1)::after { right: -10px; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption { font-size: 12px; white-space: nowrap; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption span { font-size: 9px; white-space: normal; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--detail-comparison figure figcaption span br { display: none; } .jvxc-rich-content .jvxc-layout-sp .page-products-youthpoweressencelotion .block-custom-liposome--feature h4 { font-size: 17px; white-space: nowrap; } }