@charset "UTF-8"; @keyframes arrow { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(0, 7px); opacity: 0; } 51% { transform: translate(0, -7px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes slide2 { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 1; } } @keyframes slide3-2 { 0% { opacity: 0; } 20% { opacity: 0; } 33% { opacity: 1; } 87% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } } @keyframes slide3-3 { 0% { opacity: 0; } 53% { opacity: 0; } 66% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } } img[src$=".svg"] { width: 100%; } a { color: inherit; } #contents.contents_inner { padding: 0; } .clearfix::after { display: block; content: ""; clear: both; } #lip-diagnose-wrapper { color: #000; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "akzidenz-grotesk", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック, Meiryo, メイリオ, sans-serif; width: 100%; z-index: 1; line-height: 1; letter-spacing: 0; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } #lip-diagnose-wrapper *::selection { background: #cdcdcd; } #lip-diagnose-wrapper *::-moz-selection { background: #cdcdcd; } #lip-diagnose-wrapper h1, #lip-diagnose-wrapper h2, #lip-diagnose-wrapper h3, #lip-diagnose-wrapper h4, #lip-diagnose-wrapper h5, #lip-diagnose-wrapper p, #lip-diagnose-wrapper ul, #lip-diagnose-wrapper li { line-height: inherit; letter-spacing: inherit; margin: 0; } #lip-diagnose-wrapper img { width: 100%; } #lip-diagnose-wrapper .obj-fit { object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; } #lip-diagnose-wrapper .smallsp { display: none; } @media screen and (max-width: 374px) { #lip-diagnose-wrapper .smallsp { display: block; } } #lip-diagnose-wrapper .largesp { display: block; } @media screen and (max-width: 374px) { #lip-diagnose-wrapper .largesp { display: none; } } #lip-diagnose-wrapper .button_soldout a { opacity: .4; pointer-events: none; font-size: 0; } #lip-diagnose-wrapper .button_soldout a::before { display: block; content: "SOLD OUT"; font-size: 14px; letter-spacing: .05em; } #lip-diagnose-wrapper .button_soldout a::after { display: none !important; } #lip-diagnose-wrapper #default-contents #top .textarea { background: #ddcabc; padding: 30px 0 15px; text-align: center; } #lip-diagnose-wrapper #default-contents #top .textarea h2 { font-size: 14px; line-height: 1.43; letter-spacing: .05em; margin: 0 0 15px; } #lip-diagnose-wrapper #default-contents #top .textarea h1 { font-size: 18px; line-height: 1.28; letter-spacing: .05em; margin: 0 0 15px; } #lip-diagnose-wrapper #default-contents #top .textarea .text { font-size: 13px; line-height: 1.54; margin: 0 0 25px; } #lip-diagnose-wrapper #default-contents #top .textarea .arrow { width: 22px; margin: 0 auto; } #lip-diagnose-wrapper #default-contents #lead { text-align: center; padding: 50px 17px 65px; border-bottom: solid 1px #595757; margin: 0 0 70px; } #lip-diagnose-wrapper #default-contents #lead .inner > * { opacity: 0; } #lip-diagnose-wrapper #default-contents #lead .inner h3 { font-size: 16px; letter-spacing: .05em; margin: 0 0 20px; } #lip-diagnose-wrapper #default-contents #lead .inner .text { font-size: 13px; line-height: 1.54; margin: 0 0 20px; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start { max-width: 280px; height: 44px; margin: 0 auto; color: #ffffff; font-size: 12px; letter-spacing: .05em; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start a { height: 100%; display: flex; justify-content: center; align-items: center; background: #b88437; position: relative; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start a::after { display: block; content: ""; position: absolute; top: 50%; right: 13px; transform: translate(0, -50%); border-left: solid 5px #ffffff; border-top: solid 4px transparent; border-bottom: solid 4px transparent; } #lip-diagnose-wrapper #default-contents #lead .inner.is-show > * { opacity: 1; transition: opacity 1.4s ease 0s; } #lip-diagnose-wrapper #default-contents #lead .inner.is-show > *:nth-child(2) { transition-delay: 0.1s; } #lip-diagnose-wrapper #default-contents #lead .inner.is-show > *:nth-child(3) { transition-delay: 0.2s; } #lip-diagnose-wrapper #default-contents #lead .inner.is-show > *:nth-child(4) { transition-delay: 0.3s; } #lip-diagnose-wrapper #default-contents #lead .inner.is-show > *:nth-child(5) { transition-delay: 0.4s; } #lip-diagnose-wrapper #default-contents #product { margin: 0 0 70px; } #lip-diagnose-wrapper #default-contents #product .product-main { padding: 0 17px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea { margin: 0 0 10px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea > * { opacity: 0; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea .tag { display: inline-block; border: solid 1px #919191; text-align: center; font-size: 11px; width: 80px; padding: 4px 0; margin: 0 0 25px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea h5 { font-size: 18px; line-height: 1.33; margin: 0 0 10px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea .detail { font-size: 14px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea.is-show > * { opacity: 1; transition: opacity 1.4s ease 0s; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea.is-show > *:nth-child(2) { transition-delay: 0.1s; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea.is-show > *:nth-child(3) { transition-delay: 0.2s; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea.is-show > *:nth-child(4) { transition-delay: 0.3s; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea.is-show > *:nth-child(5) { transition-delay: 0.4s; } #lip-diagnose-wrapper #default-contents #product .product-main .imagearea { margin: 0 20px 15px; opacity: 0; transform: translate(0, 20px); } #lip-diagnose-wrapper #default-contents #product .product-main .imagearea.is-show { opacity: 1; transform: none; transition: all 1.4s ease 0s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea > * { opacity: 0; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .description { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; font-size: 13px; line-height: 1.54; letter-spacing: .04em; margin: 0 0 25px; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore { color: #ffffff; font-size: 12px; letter-spacing: .05em; max-width: 280px; height: 44px; margin: 0 auto; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a { height: 100%; display: flex; align-items: center; justify-content: center; background: #000000; position: relative; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a::after { display: block; content: ""; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); border-left: solid 5px #ffffff; border-top: solid 4px transparent; border-bottom: solid 4px transparent; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea.is-show > * { opacity: 1; transition: opacity 1.4s ease 0s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea.is-show > *:nth-child(2) { transition-delay: 0.1s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea.is-show > *:nth-child(3) { transition-delay: 0.2s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea.is-show > *:nth-child(4) { transition-delay: 0.3s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea.is-show > *:nth-child(5) { transition-delay: 0.4s; } #lip-diagnose-wrapper #default-contents .banner { padding: 0 17px; margin: 0 0 75px; } #lip-diagnose-wrapper #default-contents .banner .banner-single { border: solid 1px #595757; opacity: 0; transform: translate(0, 20px); } #lip-diagnose-wrapper #default-contents .banner .banner-single a { display: block; padding: 20px 0 25px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .imagearea { margin: 0 20px 25px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea { color: #333333; text-align: center; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line1 { font-size: 18px; letter-spacing: .05em; margin: 0 0 13px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line2 { font-size: 16px; letter-spacing: .05em; margin: 0 0 13px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line3 { font-size: 16px; margin: 0 0 13px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line4 { display: none; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line5 { font-size: 14px; display: inline-block; padding: 0 0 0 10px; position: relative; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line5::after { display: block; content: ""; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); border-left: solid 5px #333333; border-top: solid 4px transparent; border-bottom: solid 4px transparent; } #lip-diagnose-wrapper #default-contents .banner .banner-single.is-show { opacity: 1; transform: none; transition: all 1.4s ease 0s; } #lip-diagnose-wrapper #diagnose-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; background: #ffffff; } #lip-diagnose-wrapper #diagnose-wrap .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; display: none; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/bg-image@sp@2x.jpg"); background-size: cover; background-position: left center; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); padding: 0 0 150px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .question { font-size: 18px; line-height: 1.44; letter-spacing: .15em; margin: 0 0 20px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .page-num { font-size: 12px; letter-spacing: .05em; margin: 0 0 60px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers { width: 280px; margin: 0 auto; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li { height: 50px; color: #ffffff; font-size: 12px; letter-spacing: .05em; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li a { height: 100%; display: flex; justify-content: center; align-items: center; background: #b88437; position: relative; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li a::after { display: block; content: ""; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); border-left: solid 5px #ffffff; border-top: solid 4px transparent; border-bottom: solid 4px transparent; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li + li { margin: 30px 0 0; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .page-back { color: #ffffff; position: absolute; bottom: 100px; left: 0; right: 0; font-size: 14px; letter-spacing: .05em; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .page-back a { text-decoration: underline; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller { color: #ffffff; position: absolute; bottom: 0; left: 0; right: 0; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller li { font-size: 14px; letter-spacing: .05em; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller li a { text-decoration: underline; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller li + li { margin: 20px 0 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page1 { display: block; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 { background: #ffffff; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner { height: 100%; overflow: scroll; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container { padding: 60px 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container h3 { text-align: center; font-size: 16px; letter-spacing: .15em; margin: 0 0 35px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list { margin: 0 0 40px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single { display: none; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .imagearea { position: relative; margin: 0 0 35px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .imagearea .product-image { position: absolute; width: 13.33%; bottom: 0; left: 0; right: 0; margin: 0 auto; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea { padding: 0 17px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea h5 { font-size: 16px; letter-spacing: .05em; margin: 0 0 20px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .description { text-align: left; font-size: 13px; line-height: 1.6; letter-spacing: .09em; margin: 0 0 30px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn { color: #ffffff; font-size: 14px; letter-spacing: .05em; max-width: 300px; height: 44px; margin: 0 auto; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn a { height: 100%; display: flex; align-items: center; justify-content: center; background: #000000; position: relative; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn a::after { display: block; content: ""; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); border-left: solid 5px #ffffff; border-top: solid 4px transparent; border-bottom: solid 4px transparent; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .back-to-top { font-size: 14px; letter-spacing: .05em; margin: 0 0 50px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .back-to-top a { text-decoration: underline; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li { font-size: 12px; letter-spacing: .05em; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li a { text-decoration: underline; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li + li { margin: 24px 0 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li.sns-share { position: relative; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li.sns-share .share-box { display: none; position: absolute; bottom: calc(100% + 10px); left: -35px; right: -35px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li.sns-share .share-box ul { display: flex; justify-content: center; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li.sns-share .share-box ul li { margin: 0 5px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li.sns-share .share-box ul li a { text-decoration: none; } #lip-diagnose-wrapper.is-loaded { opacity: 1 !important; transition: opacity 2s ease 0s; } .foot_contents { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/footimage@sp.jpg"); background-size: cover; color: #ffffff; padding-top: 40px; } @media screen and (max-width: 767px) { #lip-diagnose-wrapper .pc { display: none !important; } } @media screen and (orientation: landscape) { #lip-diagnose-wrapper #default-contents #top { position: relative; } #lip-diagnose-wrapper #default-contents #top .imagearea { height: 100vh; } #lip-diagnose-wrapper #default-contents #top .imagearea img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } #lip-diagnose-wrapper #default-contents #top .textarea { background: none; padding: 0; position: absolute; bottom: 4.65%; left: 0; right: 0; } #lip-diagnose-wrapper #default-contents #top .textarea h2 { font-size: 1.86vh; margin: 0 0 1.99vh; } #lip-diagnose-wrapper #default-contents #top .textarea h1 { font-size: 3.19vh; margin: 0 0 2.66vh; } #lip-diagnose-wrapper #default-contents #top .textarea .text { font-size: 1.86vh; line-height: 1.57; letter-spacing: .05em; margin: 0 0 5.32vh; } #lip-diagnose-wrapper #default-contents #top .textarea .arrow { width: 2.93vh; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/bg-image.jpg"); } } @media screen and (orientation: landscape) and (min-width: 1367px) { #lip-diagnose-wrapper #diagnose-wrap .page.page-question { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/bg-image@2x.jpg"); } } @media only screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) { #lip-diagnose-wrapper #diagnose-wrap .page.page-question { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/bg-image@2x.jpg"); } } @media screen and (orientation: landscape) { #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner { padding: 0 0 150px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .question { font-size: 18px; margin: 0 0 10px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .page-num { margin: 0 0 75px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers { width: 400px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li { height: 50px; font-size: 16px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li a::after { right: 20px; border-left-width: 8px; border-top-width: 6px; border-bottom-width: 6px; transition: transform .4s ease 0s; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li a:hover::after { transform: translate(3px, -50%); } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .answers li + li { margin: 25px 0 0; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .page-back { color: #000; font-size: 16px; bottom: 70px; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller { color: #000; font-size: 16px; display: flex; justify-content: center; } #lip-diagnose-wrapper #diagnose-wrap .page.page-question .inner .controller li + li { margin: 0 0 0 30px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner { overflow: hidden; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container { padding: 9.33vh 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container h3 { margin: 0 0 5.33vh; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list { margin: 0 0 8vh; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .flex { display: flex; align-items: center; justify-content: center; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .imagearea { width: 69.07vh; max-width: 50vw; margin: 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .imagearea .product-image { width: 9.65%; bottom: 16.94%; left: auto; right: 24.32%; margin: 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea { padding: 0; width: 69.07vh; max-width: 50vw; text-align: left; padding: 0 0 0 25px; box-sizing: border-box; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea h5 { margin: 0 0 10px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .description { margin: 0 0 25px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn { max-width: 350px; margin: 0; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn a::after { transition: transform .4s ease 0s; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .product-list .product-single .textarea .link-btn a:hover::after { transform: translate(3px, -50%); } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .back-to-top { margin: 0 0 20px; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul { display: flex; justify-content: center; } #lip-diagnose-wrapper #diagnose-wrap .page#page4 .inner .scroll-container .link-list ul li + li { margin: 0 0 0 30px; } } @media screen and (min-width: 768px) { a { -webkit-transition: opacity .3s; transition: opacity .3s; } .sp, .smallsp, .largesp { display: none !important; } .pc { display: block !important; } #lip-diagnose-wrapper #default-contents #lead { width: 960px; max-width: 96%; padding: 40px 0 140px; margin: 0 auto 30px; } #lip-diagnose-wrapper #default-contents #lead .inner h3 { font-size: 18px; margin: 0 0 20px; } #lip-diagnose-wrapper #default-contents #lead .inner .text { font-size: 14px; letter-spacing: .06em; line-height: 1.5; margin: 0 0 20px; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start { max-width: 400px; height: 70px; font-size: 18px; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start a::after { right: 20px; border-left-width: 8px; border-top-width: 6px; border-bottom-width: 6px; transition: transform .4s ease 0s; } #lip-diagnose-wrapper #default-contents #lead .inner #diagnose-start a:hover::after { transform: translate(3px, -50%); } #lip-diagnose-wrapper #default-contents #product { width: 960px; max-width: 96%; margin: 0 auto 100px; } #lip-diagnose-wrapper #default-contents #product .product-main { position: relative; padding: 0 0 0 51.04%; display: flex; flex-direction: column; justify-content: center; min-height: 440px; } } @media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #lip-diagnose-wrapper #default-contents #product .product-main { padding: 0 0 0 45.83%; min-height: 40vw; } } @media screen and (min-width: 768px) { #lip-diagnose-wrapper #default-contents #product .product-main .titlearea { margin: 0 0 15px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea .tag { margin: 0 0 10px; } #lip-diagnose-wrapper #default-contents #product .product-main .titlearea h5 { line-height: 1.22; margin: 0 0 13px; } #lip-diagnose-wrapper #default-contents #product .product-main .imagearea { margin: 0; width: 45.83%; position: absolute; top: 0; left: 0; } } @media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #lip-diagnose-wrapper #default-contents #product .product-main .imagearea { width: 41.67%; } } @media screen and (min-width: 768px) { #lip-diagnose-wrapper #default-contents #product .product-main .textarea .description { line-height: 1.69; margin: 0 0 30px; } } @media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #lip-diagnose-wrapper #default-contents #product .product-main .textarea .description { font-size: 12px; } } @media screen and (min-width: 768px) { #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore { font-size: 14px; max-width: 340px; margin: 0; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a { transition: background .4s ease 0s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a::after { right: 15px; transition: transform .4s ease 0s; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a:hover { background: #b68e41; opacity: 1; } #lip-diagnose-wrapper #default-contents #product .product-main .textarea .knowmore a:hover::after { transform: translate(3px, -50%); } #lip-diagnose-wrapper #default-contents .banner { width: 900px; max-width: 90%; padding: 0; margin: 0 auto 130px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a { display: flex; align-items: center; padding: 0; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .imagearea { width: 33.78%; margin: 0; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea { flex: 1; display: flex; align-items: center; justify-content: center; text-align: left; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line1 { margin: 0 0 15px; } #lip-diagnose-wrapper #default-contents .banner .banner-single a .textarea .text-line4 { display: block; font-size: 14px; line-height: 1.43; margin: 0 0 20px; } .foot_contents { background-image: url("/cms/img/usr/news/2023/01/lip-diagnose/footimage.jpg"); padding-top: 80px; } }