/* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input[type=radio], input[type=checkbox]):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :focus-visible { outline: none; } /* ======================================= products enriched-cream ======================================= */ .product-detail { background: #ebe6cd; } .product-detail-logo { fill: #000; } .purchase-btn-link { background: #ecb350; } @media (any-hover: hover) { .purchase-btn-link:hover { background: #f0c273; } } .product-detail-lp { overflow: hidden; } .lp-kv { background: url(../img/kv_bg.jpg) 0 0/100% auto no-repeat #f1ebdd; position: relative; } @media only screen and (max-width: 767px) { .lp-kv { margin-top: 21.333vw; padding: 9.867vw 0 85.333vw; } } @media only screen and (min-width: 768px) { .lp-kv { padding: 74px 0 640px; } } .lp-kv-lead { position: absolute; } @media only screen and (max-width: 767px) { .lp-kv-lead { left: 91.333vw; top: 6vw; width: 5.333vw; } } @media only screen and (min-width: 768px) { .lp-kv-lead { left: 685px; top: 45px; width: 40px; } } @media only screen and (max-width: 767px) { .lp-kv-catch { margin-left: 61.867vw; width: 21.333vw; } } @media only screen and (min-width: 768px) { .lp-kv-catch { margin-left: 464px; width: 160px; } } .lp-kv-list01 { position: absolute; } @media only screen and (max-width: 767px) { .lp-kv-list01 { left: 6.667vw; top: 97.6vw; width: 18.4vw; } } @media only screen and (min-width: 768px) { .lp-kv-list01 { left: 50px; top: 732px; width: 138px; } } .lp-kv-list02 { position: absolute; } @media only screen and (max-width: 767px) { .lp-kv-list02 { left: 25.733vw; top: 130.133vw; width: 17.333vw; } } @media only screen and (min-width: 768px) { .lp-kv-list02 { left: 193px; top: 976px; width: 130px; } } @media only screen and (max-width: 767px) { .lp-kv-feature { margin-top: 44.533vw; margin-left: 56vw; width: 34.667vw; } } @media only screen and (min-width: 768px) { .lp-kv-feature { margin-top: 334px; margin-left: 420px; width: 260px; } } .lp-kv-title { color: #3c3228; font-weight: 700; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0.12em; line-height: 1.444; text-align: center; } @media only screen and (max-width: 767px) { .lp-kv-title { font-size: 4.8vw; margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .lp-kv-title { font-size: 36px; margin-top: 20px; } } .lp-kv-notes { color: var(--strong_color); font-weight: 300; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; line-height: 1.625; } @media only screen and (max-width: 767px) { .lp-kv-notes { font-size: 2.133vw; margin-top: 1.333vw; margin-left: 25.333vw; } } @media only screen and (min-width: 768px) { .lp-kv-notes { font-size: 16px; margin-top: 10px; margin-left: 190px; } } .lp-info { background: url(../img/info_bg.png) 0 0/100% 100% no-repeat; left: 0; position: absolute; width: 100%; } @media only screen and (max-width: 767px) { .lp-info { bottom: -16vw; height: 100.267vw; padding-top: 13.333vw; } } @media only screen and (min-width: 768px) { .lp-info { bottom: -120px; height: 752px; padding-top: 100px; } } .lp-info-logo { margin: 0 auto; } @media only screen and (max-width: 767px) { .lp-info-logo { width: 49.333vw; } } @media only screen and (min-width: 768px) { .lp-info-logo { width: 370px; } } .lp-info-name { border-bottom: 1px solid #323246; color: #323246; font-weight: 700; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0.18em; line-height: 1.438; } @media only screen and (max-width: 767px) { .lp-info-name { font-size: 4.267vw; margin: 6vw 0 0 50.667vw; padding: 0 0 1.333vw 1.333vw; width: 44vw; } } @media only screen and (min-width: 768px) { .lp-info-name { font-size: 32px; margin: 45px 0 0 380px; padding: 0 0 10px 10px; width: 330px; } } .lp-info-amount { color: #323246; font-weight: 500; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; line-height: 1.538; } @media only screen and (max-width: 767px) { .lp-info-amount { font-size: 3.467vw; margin: 1.6vw 0 0 52.667vw; } } @media only screen and (min-width: 768px) { .lp-info-amount { font-size: 26px; margin: 12px 0 0 395px; } } .lp-info-bottom { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .lp-info-bottom { margin: 6.667vw 0 0 16.8vw; } } @media only screen and (min-width: 768px) { .lp-info-bottom { margin: 50px 0 0 126px; } } .lp-info-shipping { align-items: center; aspect-ratio: 1/1; background: #323246; color: #fff; display: flex; justify-content: center; letter-spacing: 0.1em; line-height: 1.25; text-align: center; } @media only screen and (max-width: 767px) { .lp-info-shipping { font-size: 3.2vw; height: 10.133vw; width: 10.133vw; } } @media only screen and (min-width: 768px) { .lp-info-shipping { font-size: 24px; height: 76px; width: 76px; } } @media only screen and (max-width: 767px) { .lp-info-btn { margin-left: 2.667vw; width: 53.333vw; } } @media only screen and (min-width: 768px) { .lp-info-btn { margin-left: 20px; width: 400px; } } .lp-info-btn-link { align-items: center; background: #e68737; display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .lp-info-btn-link { border-radius: 1.333vw; height: 10.667vw; } } @media only screen and (min-width: 768px) { .lp-info-btn-link { border-radius: 10px; height: 80px; width: 100%; } } @media (any-hover: hover) { .lp-info-btn-link:hover { background: #f0c273; } } .lp-info-btn-icon { fill: #fff; } @media only screen and (max-width: 767px) { .lp-info-btn-icon { width: 5.333vw; } } @media only screen and (min-width: 768px) { .lp-info-btn-icon { width: 40px; } } .lp-info-btn-label { color: #fff; letter-spacing: 0.26em; margin-left: 1em; } @media only screen and (max-width: 767px) { .lp-info-btn-label { font-size: 3.2vw; } } @media only screen and (min-width: 768px) { .lp-info-btn-label { font-size: 24px; } } .lp-about { background: url(../img/about_bg_01.jpg) 0 0/100% auto no-repeat #b7ae9d; } @media only screen and (max-width: 767px) { .lp-about { padding: 111.333vw 0 2.667vw; } } @media only screen and (min-width: 768px) { .lp-about { padding: 835px 0 20px; } } .lp-about-title { margin: auto; } @media only screen and (max-width: 767px) { .lp-about-title { width: 77.867vw; } } @media only screen and (min-width: 768px) { .lp-about-title { width: 584px; } } .lp-about-text { color: #fff; font-weight: 300; letter-spacing: 0.14em; line-height: 2.154; text-align: center; } @media only screen and (max-width: 767px) { .lp-about-text { font-size: 3.467vw; margin-top: 6.667vw; } } @media only screen and (min-width: 768px) { .lp-about-text { font-size: 26px; margin-top: 50px; } } .lp-about-sec-text { color: #fff; font-weight: 300; letter-spacing: 0.08em; line-height: 1.846; } @media only screen and (max-width: 767px) { .lp-about-sec-text { font-size: 3.467vw; -webkit-margin-start: 9.333vw; margin-inline-start: 9.333vw; margin-top: 2.667vw; width: 84vw; } } @media only screen and (min-width: 768px) { .lp-about-sec-text { font-size: 26px; -webkit-margin-start: 70px; margin-inline-start: 70px; margin-top: 20px; width: 630px; } } .lp-about-sec01 { background: url(../img/about_bg_02.jpg) 0 0/100% auto no-repeat; } @media only screen and (max-width: 767px) { .lp-about-sec01 { margin-top: 12vw; } } @media only screen and (min-width: 768px) { .lp-about-sec01 { margin-top: 90px; } } .lp-about-sec02 { background: url(../img/about_bg_03.jpg) 0 0/100% auto no-repeat; } @media only screen and (max-width: 767px) { .lp-about-sec02 { margin-top: 9.333vw; } } @media only screen and (min-width: 768px) { .lp-about-sec02 { margin-top: 70px; } } .lp-concept { background: url(../img/concept_bg.jpg) 0 0/100% auto no-repeat #faf5e1; } @media only screen and (max-width: 767px) { .lp-concept { padding: 23.333vw 0 2.667vw; } } @media only screen and (min-width: 768px) { .lp-concept { padding: 175px 0 20px; } } @media only screen and (max-width: 767px) { .lp-concept-title { margin-left: 11.2vw; width: 23.733vw; } } @media only screen and (min-width: 768px) { .lp-concept-title { margin-left: 84px; width: 178px; } } .lp-concept-list { margin-left: auto; } @media only screen and (max-width: 767px) { .lp-concept-list { margin-top: 13.867vw; width: 92vw; } } @media only screen and (min-width: 768px) { .lp-concept-list { margin-top: 104px; width: 690px; } } @media only screen and (max-width: 767px) { .lp-concept-notes { margin: 4vw 0 0 14vw; width: 80vw; } } @media only screen and (min-width: 768px) { .lp-concept-notes { margin: 30px 0 0 105px; width: 570px; } } @media only screen and (max-width: 767px) { .lp-moisture-title { margin-top: 6.667vw; } } @media only screen and (min-width: 768px) { .lp-moisture-title { margin-top: 50px; } } .lp-moisture-text { color: #333; letter-spacing: 0.08em; line-height: 2.154; margin: auto; } @media only screen and (max-width: 767px) { .lp-moisture-text { font-size: 3.467vw; margin-top: 92vw; width: 74.667vw; } } @media only screen and (min-width: 768px) { .lp-moisture-text { font-size: 26px; margin-top: 690px; width: 560px; } } .lp-placenta { background: url(../img/placenta_bg.jpg) 0 0/100% auto no-repeat #ddd4ba; } @media only screen and (max-width: 767px) { .lp-placenta { padding: 26.667vw 0 50.667vw; } } @media only screen and (min-width: 768px) { .lp-placenta { padding: 200px 0 380px; } } @media only screen and (max-width: 767px) { .lp-placenta-catch { margin: -2.933vw 0 0 58vw; width: 36vw; } } @media only screen and (min-width: 768px) { .lp-placenta-catch { margin: -22px 0 0 435px; width: 270px; } } .lp-placenta-text { color: #333; letter-spacing: 0.08em; line-height: 2.077; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-placenta-text { font-size: 3.467vw; margin-top: 33.333vw; width: 79.2vw; } } @media only screen and (min-width: 768px) { .lp-placenta-text { font-size: 26px; margin-top: 250px; width: 594px; } } .lp-method { align-items: center; background: url(../img/method_bg.png) 0/100% 100% no-repeat; display: flex; -webkit-margin-start: auto; margin-inline-start: auto; position: relative; z-index: 5; } @media only screen and (max-width: 767px) { .lp-method { height: 69.333vw; margin-top: -33.333vw; padding: 0 0 6.667vw 46.667vw; width: 93.333vw; } } @media only screen and (min-width: 768px) { .lp-method { height: 520px; margin-top: -250px; padding: 0 0 50px 350px; width: 700px; } } .lp-method-title { left: 0; position: absolute; } @media only screen and (max-width: 767px) { .lp-method-title { top: -4vw; width: 52vw; } } @media only screen and (min-width: 768px) { .lp-method-title { top: -30px; width: 390px; } } .lp-method-text { color: #4d4d4d; letter-spacing: 0.08em; line-height: 1.917; } @media only screen and (max-width: 767px) { .lp-method-text { font-size: 3.2vw; width: 40vw; } } @media only screen and (min-width: 768px) { .lp-method-text { font-size: 24px; width: 300px; } } .lp-beauty { background: url(../img/beauty_bg.jpg) 0 0/100% auto no-repeat #d7d0be; } @media only screen and (max-width: 767px) { .lp-beauty { margin-top: -36vw; padding: 42.667vw 0 14vw; } } @media only screen and (min-width: 768px) { .lp-beauty { margin-top: -270px; padding: 320px 0 105px; } } @media only screen and (max-width: 767px) { .lp-beauty-title { -webkit-margin-start: 9.333vw; margin-inline-start: 9.333vw; width: 27.467vw; } } @media only screen and (min-width: 768px) { .lp-beauty-title { -webkit-margin-start: 70px; margin-inline-start: 70px; width: 206px; } } .lp-beauty-text { color: #333; letter-spacing: 0.08em; line-height: 2.154; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-beauty-text { font-size: 3.467vw; margin-top: 6.667vw; width: 80vw; } } @media only screen and (min-width: 768px) { .lp-beauty-text { font-size: 26px; margin-top: 50px; width: 600px; } } .lp-beauty-text sup { font-size: 58.3%; vertical-align: super; } .lp-beauty-note { font-weight: 300; letter-spacing: 0; line-height: 1; margin-right: 1em; text-align: right; } @media only screen and (max-width: 767px) { .lp-beauty-note { font-size: 2.133vw; } } @media only screen and (min-width: 768px) { .lp-beauty-note { font-size: 16px; } } .lp-promote { background: url(../img/promote_bg.jpg) 0 0/100% auto no-repeat #f4ede1; } @media only screen and (max-width: 767px) { .lp-promote { padding: 16vw 0 0; } } @media only screen and (min-width: 768px) { .lp-promote { padding: 120px 0 0; } } @media only screen and (max-width: 767px) { .lp-promote-title { -webkit-margin-start: 71.333vw; margin-inline-start: 71.333vw; width: 16.533vw; } } @media only screen and (min-width: 768px) { .lp-promote-title { -webkit-margin-start: 535px; margin-inline-start: 535px; width: 124px; } } .lp-promote-text { color: #fff; font-weight: 300; letter-spacing: 0.08em; line-height: 1.923; } @media only screen and (max-width: 767px) { .lp-promote-text { font-size: 3.467vw; -webkit-margin-start: 56vw; margin-inline-start: 56vw; margin-top: 4vw; width: 38.667vw; } } @media only screen and (min-width: 768px) { .lp-promote-text { font-size: 26px; -webkit-margin-start: 420px; margin-inline-start: 420px; margin-top: 30px; width: 290px; } } .lp-promote-list { display: flex; justify-content: space-between; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-promote-list { margin-top: 4.667vw; width: 86.4vw; } } @media only screen and (min-width: 768px) { .lp-promote-list { margin-top: 35px; width: 648px; } } @media only screen and (max-width: 767px) { .lp-promote-item { width: 36vw; } } @media only screen and (min-width: 768px) { .lp-promote-item { width: 270px; } } @media only screen and (max-width: 767px) { .lp-promote-item:nth-of-type(2) { margin-top: 18vw; } } @media only screen and (min-width: 768px) { .lp-promote-item:nth-of-type(2) { margin-top: 135px; } } @media only screen and (max-width: 767px) { .lp-support-lead { margin-top: 24vw; } } @media only screen and (min-width: 768px) { .lp-support-lead { margin-top: 180px; } } .lp-support-list { background: url(../img/support_bg.jpg) 0 100%/100% auto no-repeat; } @media only screen and (max-width: 767px) { .lp-support-list { padding: 8vw 0 12.667vw; } } @media only screen and (min-width: 768px) { .lp-support-list { padding: 60px 0 95px; } } .lp-triple { background: url(../img/triple_bg.jpg) 0 0/100% auto no-repeat #fff; } .lp-triple-inner { position: relative; } @media only screen and (max-width: 767px) { .lp-triple-inner { height: 178.267vw; padding-top: 11.733vw; } } @media only screen and (min-width: 768px) { .lp-triple-inner { height: 1337px; padding-top: 88px; } } .lp-triple-notes { color: #666; position: absolute; text-align: right; } @media only screen and (max-width: 767px) { .lp-triple-notes { font-size: 2.4vw; right: 6vw; top: 77.333vw; } } @media only screen and (min-width: 768px) { .lp-triple-notes { font-size: 18px; right: 45px; top: 580px; } } .lp-triple-lead { margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-triple-lead { margin-top: 62vw; width: 70.667vw; } } @media only screen and (min-width: 768px) { .lp-triple-lead { margin-top: 465px; width: 530px; } } .lp-triple-text { color: #4d4d4d; letter-spacing: 0.04em; line-height: 2.077; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-triple-text { font-size: 3.467vw; margin-top: 3.333vw; width: 68vw; } } @media only screen and (min-width: 768px) { .lp-triple-text { font-size: 26px; margin-top: 25px; width: 510px; } } .lp-triple-text sup { font-size: 70%; vertical-align: text-top; } @media only screen and (max-width: 767px) { .lp-exosome { padding: 16vw 0 1.333vw; } } @media only screen and (min-width: 768px) { .lp-exosome { padding: 120px 0 10px; } } @media only screen and (max-width: 767px) { .lp-exosome-content { -webkit-margin-start: 26.667vw; margin-inline-start: 26.667vw; margin-top: 74.667vw; width: 66.667vw; } } @media only screen and (min-width: 768px) { .lp-exosome-content { -webkit-margin-start: 200px; margin-inline-start: 200px; margin-top: 560px; width: 500px; } } .lp-exosome-text { border-bottom: 1px solid #4d4d4d; color: #4d4d4d; letter-spacing: 0.04em; line-height: 2.154; } @media only screen and (max-width: 767px) { .lp-exosome-text { font-size: 3.467vw; padding-bottom: 4.667vw; } } @media only screen and (min-width: 768px) { .lp-exosome-text { font-size: 26px; padding-bottom: 35px; } } .lp-exosome-text sup { font-size: 70%; vertical-align: text-top; } .lp-exosome-notes { color: #4d4d4d; line-height: 1.7; } @media only screen and (max-width: 767px) { .lp-exosome-notes { font-size: 2.667vw; margin-top: 4vw; } } @media only screen and (min-width: 768px) { .lp-exosome-notes { font-size: 20px; margin-top: 30px; } } .lp-exosome-notes-item { margin-left: 2.25em; text-indent: -2.25em; } .lp-w-approach { background: url(../img/w-approach_bg.jpg) 0 0/100% auto no-repeat #e6dfcd; } @media only screen and (max-width: 767px) { .lp-w-approach { padding: 30.133vw 0 16vw; } } @media only screen and (min-width: 768px) { .lp-w-approach { padding: 226px 0 120px; } } @media only screen and (max-width: 767px) { .lp-w-approach-title { margin-left: 13.6vw; width: 23.467vw; } } @media only screen and (min-width: 768px) { .lp-w-approach-title { margin-left: 102px; width: 176px; } } @media only screen and (max-width: 767px) { .lp-w-approach-catch { margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .lp-w-approach-catch { margin-top: 20px; } } .lp-w-approach-sub-title { color: #333; font-weight: 600; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0.12em; line-height: 1.526; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-w-approach-sub-title { font-size: 5.067vw; margin-top: -2vw; padding: 0 1.333vw; width: 81.333vw; } } @media only screen and (min-width: 768px) { .lp-w-approach-sub-title { font-size: 38px; margin-top: -15px; padding: 0 10px; width: 610px; } } .lp-w-approach-sub-title span { font-weight: 400; } .lp-w-approach-text { border-bottom: 1px solid #333; color: #4d4d4d; letter-spacing: 0.04em; line-height: 2.154; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-w-approach-text { font-size: 3.467vw; margin-top: 2vw; padding: 0 1.333vw 4.667vw; width: 81.333vw; } } @media only screen and (min-width: 768px) { .lp-w-approach-text { font-size: 26px; margin-top: 15px; padding: 0 10px 35px; width: 610px; } } .lp-w-approach-notes { color: #4d4d4d; line-height: 1.7; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-w-approach-notes { font-size: 2.667vw; margin-top: 2.667vw; padding: 0 1.333vw; width: 81.333vw; } } @media only screen and (min-width: 768px) { .lp-w-approach-notes { font-size: 20px; margin-top: 20px; padding: 0 10px; width: 610px; } } .lp-w-approach-notes li { margin-left: 2.5em; text-indent: -2.5em; } .lp-w-approach-notes--single li { margin-left: 1em; text-indent: -1em; } @media only screen and (max-width: 767px) { .lp-w-approach01 { margin-top: 8vw; } } @media only screen and (min-width: 768px) { .lp-w-approach01 { margin-top: 60px; } } @media only screen and (max-width: 767px) { .lp-w-approach02 { margin-top: 11.333vw; } } @media only screen and (min-width: 768px) { .lp-w-approach02 { margin-top: 85px; } } .lp-problem { background: url(../img/problem_bg.jpg) 0 0/100% auto no-repeat #ebe3d4; } @media only screen and (max-width: 767px) { .lp-problem { padding-top: 14vw; } } @media only screen and (min-width: 768px) { .lp-problem { padding-top: 105px; } } @media only screen and (max-width: 767px) { .lp-problem-catch { margin-left: 72.8vw; width: 14.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-catch { margin-left: 546px; width: 110px; } } .lp-problem-item { background: #f3f0e9; position: relative; } @media only screen and (max-width: 767px) { .lp-problem-item { box-shadow: 2.667vw 2.667vw 2.667vw rgba(140, 131, 114, 0.2); padding-bottom: 12vw; width: 86.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-item { box-shadow: 20px 20px 20px rgba(140, 131, 114, 0.2); padding-bottom: 90px; width: 650px; } } .lp-problem-title { position: absolute; } @media only screen and (max-width: 767px) { .lp-problem-title { top: -10.933vw; width: 46.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-title { top: -82px; width: 350px; } } .lp-problem-catch-sub { margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-problem-catch-sub { margin-top: 7.333vw; width: 73.333vw; } } @media only screen and (min-width: 768px) { .lp-problem-catch-sub { margin-top: 55px; width: 550px; } } .lp-ingredients { align-items: center; display: grid; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-ingredients { gap: 4vw; grid-template-columns: 30.667vw 40vw; margin: 2.667vw 0 0 6.667vw; padding-bottom: 2vw; width: 74.667vw; } } @media only screen and (min-width: 768px) { .lp-ingredients { gap: 30px; grid-template-columns: 230px 300px; margin: 20px 0 0 50px; padding-bottom: 15px; width: 560px; } } .lp-ingredients-image { border-radius: 50%; grid-area: 1/1/2/2; overflow: hidden; } @media only screen and (max-width: 767px) { .lp-ingredients-image { box-shadow: 1.067vw 1.067vw 1.067vw rgba(99, 86, 55, 0.1); } } @media only screen and (min-width: 768px) { .lp-ingredients-image { box-shadow: 8px 8px 8px rgba(99, 86, 55, 0.1); } } .lp-ingredients-title { grid-area: 1/2/2/3; } @media only screen and (max-width: 767px) { .lp-ingredients-title img { width: 37.6vw; } } @media only screen and (min-width: 768px) { .lp-ingredients-title img { width: 282px; } } .lp-ingredients-text { color: #4d4d4d; letter-spacing: 0.04em; line-height: 2.077; grid-area: 2/1/3/3; } @media only screen and (max-width: 767px) { .lp-ingredients-text { font-size: 3.467vw; } } @media only screen and (min-width: 768px) { .lp-ingredients-text { font-size: 26px; } } .lp-problem-item--01 { margin-left: auto; } @media only screen and (max-width: 767px) { .lp-problem-item--01 { margin-top: 20.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-item--01 { margin-top: 155px; } } @media only screen and (max-width: 767px) { .lp-problem-item--01 .lp-problem-title { left: -6.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-item--01 .lp-problem-title { left: -50px; } } @media only screen and (max-width: 767px) { .lp-problem-item--01 .lp-ingredients-text { padding: 0 0 0 0.533vw; } } @media only screen and (min-width: 768px) { .lp-problem-item--01 .lp-ingredients-text { padding: 0 0 0 4px; } } .lp-problem-item--02 { z-index: 5; } @media only screen and (max-width: 767px) { .lp-problem-item--02 { margin-top: 1.333vw; -webkit-transform: translateY(20vw); transform: translateY(20vw); } } @media only screen and (min-width: 768px) { .lp-problem-item--02 { margin-top: 10px; -webkit-transform: translateY(150px); transform: translateY(150px); } } @media only screen and (max-width: 767px) { .lp-problem-item--02 .lp-problem-title { right: -6.667vw; } } @media only screen and (min-width: 768px) { .lp-problem-item--02 .lp-problem-title { right: -50px; } } @media only screen and (max-width: 767px) { .lp-problem-item--02 .lp-ingredients-text { padding: 0 2.933vw 0 1.333vw; } } @media only screen and (min-width: 768px) { .lp-problem-item--02 .lp-ingredients-text { padding: 0 22px 0 10px; } } .lp-citrus { background: url(../img/citrus_bg.jpg) 0 100%/100% auto no-repeat; } @media only screen and (max-width: 767px) { .lp-citrus { height: 184vw; padding-top: 42.667vw; } } @media only screen and (min-width: 768px) { .lp-citrus { height: 1380px; padding-top: 320px; } } @media only screen and (max-width: 767px) { .lp-citrus-title { margin-left: 5.333vw; width: 62.667vw; } } @media only screen and (min-width: 768px) { .lp-citrus-title { margin-left: 40px; width: 470px; } } .lp-citrus-content { color: #fff; } @media only screen and (max-width: 767px) { .lp-citrus-content { margin: 60vw 0 0 30.4vw; width: 65.333vw; } } @media only screen and (min-width: 768px) { .lp-citrus-content { margin: 450px 0 0 228px; width: 490px; } } .lp-citrus-text { letter-spacing: 0.04em; line-height: 2.115; } @media only screen and (max-width: 767px) { .lp-citrus-text { font-size: 3.467vw; } } @media only screen and (min-width: 768px) { .lp-citrus-text { font-size: 26px; } } .lp-citrus-note { line-height: 1.7; margin-left: 1em; text-indent: -1em; } @media only screen and (max-width: 767px) { .lp-citrus-note { font-size: 2.667vw; margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .lp-citrus-note { font-size: 20px; margin-top: 20px; } } .lp-design { background: #e3e0cb; } @media only screen and (max-width: 767px) { .lp-design { padding-bottom: 24.667vw; } } @media only screen and (min-width: 768px) { .lp-design { padding-bottom: 185px; } } .lp-design-text { color: #4d4d4d; letter-spacing: 0.04em; line-height: 2.077; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-design-text { font-size: 3.467vw; margin-top: 5.333vw; width: 80vw; } } @media only screen and (min-width: 768px) { .lp-design-text { font-size: 26px; margin-top: 40px; width: 600px; } } .lp-usage { background: #f3efe3; position: relative; } @media only screen and (max-width: 767px) { .lp-usage { padding: 21.333vw 0 7.333vw; } } @media only screen and (min-width: 768px) { .lp-usage { padding: 160px 0 55px; } } .lp-usage-title { left: 0; position: absolute; } @media only screen and (max-width: 767px) { .lp-usage-title { top: -6vw; } } @media only screen and (min-width: 768px) { .lp-usage-title { top: -45px; } } .lp-usage-item { position: relative; } @media only screen and (max-width: 767px) { .lp-usage-item:not(:last-child) { -webkit-padding-after: 8vw; padding-block-end: 8vw; } } @media only screen and (min-width: 768px) { .lp-usage-item:not(:last-child) { -webkit-padding-after: 60px; padding-block-end: 60px; } } .lp-usage-item:not(:last-child)::before, .lp-usage-item:not(:last-child)::after { background: #6f6763; content: ""; display: block; position: absolute; z-index: 10; } .lp-usage-item:not(:last-child)::before { -webkit-margin-start: -1px; margin-inline-start: -1px; width: 2px; } @media only screen and (max-width: 767px) { .lp-usage-item:not(:last-child)::before { bottom: -4vw; height: calc(100% - 13.333vw); left: 8.667vw; } } @media only screen and (min-width: 768px) { .lp-usage-item:not(:last-child)::before { bottom: -30px; height: calc(100% - 100px); left: 65px; } } .lp-usage-item:not(:last-child)::after { clip-path: polygon(0 0, 100% 0, 50% 100%); } @media only screen and (max-width: 767px) { .lp-usage-item:not(:last-child)::after { bottom: -5.6vw; height: 2.4vw; left: 7.333vw; width: 2.667vw; } } @media only screen and (min-width: 768px) { .lp-usage-item:not(:last-child)::after { bottom: -42px; height: 18px; left: 55px; width: 20px; } } .lp-usage-num { left: 0; position: absolute; z-index: 15; } @media only screen and (max-width: 767px) { .lp-usage-num { top: 5.333vw; width: 21.333vw; } } @media only screen and (min-width: 768px) { .lp-usage-num { top: 40px; width: 160px; } } .lp-usage-image { margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-usage-image { width: 89.333vw; } } @media only screen and (min-width: 768px) { .lp-usage-image { width: 670px; } } .lp-usage-text { color: #4d4d4d; letter-spacing: 0.04em; line-height: 2; margin-inline: auto; } @media only screen and (max-width: 767px) { .lp-usage-text { font-size: 3.467vw; margin-top: 4vw; width: 73.333vw; } } @media only screen and (min-width: 768px) { .lp-usage-text { font-size: 26px; margin-top: 30px; width: 550px; } }/*# sourceMappingURL=m-face-pack.css.map */