@charset "UTF-8"; /*! PC SP 共通設定 @Design : http://www.glide.co.jp/ @Coading : http://c4media.jp/ */ /*! SPサイト 全体設定 @Design : http://www.glide.co.jp/ @Coading : http://c4media.jp/ */ /*! タカミスキンピールスペシャルサイト @Design : http://www.glide.co.jp/ @Coading : http://c4media.jp/ */ .page-skinpeel-special-site main { padding-top: 0 } .page-skinpeel-special-site main #feature, .page-skinpeel-special-site main #order, .page-skinpeel-special-site main #origin, .page-skinpeel-special-site main #theory, .page-skinpeel-special-site main #use { margin-top: -94px !important; padding-top: 94px !important } .page-skinpeel-special-site main #another_order_teikibin { margin-top: -120px !important; padding-top: 120px !important } .page-skinpeel-special-site main .js-scroll-show .shortcut { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .page-skinpeel-special-site main .js-scroll-show .shortcut a { font-size: 1.2rem; text-decoration: inherit; color: inherit } .page-skinpeel-special-site main .first-view { position: relative; padding-bottom: 180%; text-align: center; color: #fff } .page-skinpeel-special-site main .first-view:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/assets/img/skinpeel/first_view.webp) no-repeat 50% 0/cover } .no-webp .page-skinpeel-special-site main .first-view:before { background-image: url(/assets/img/skinpeel/first_view.jpg) } .page-skinpeel-special-site main .first-view .overlay { padding-right: 20px; padding-left: 20px; box-sizing: border-box; position: absolute; left: 0; width: 100% } .page-skinpeel-special-site main .first-view .overlay:first-of-type { top: 16% } .page-skinpeel-special-site main .first-view .overlay:nth-of-type(2) { bottom: 8% } .page-skinpeel-special-site main .first-view h1 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 1.4rem; font-weight: inherit; text-indent: 1em; white-space: nowrap; line-height: 1.4 } .page-skinpeel-special-site main .first-view h1 strong { display: block; font-size: 3.5rem } .page-skinpeel-special-site main .first-view .name { font-size: 1.4rem;} .page-skinpeel-special-site main .first-view .category { font-size: 1.2rem } .page-skinpeel-special-site main .first-view .category:not(:empty):before { content: '[' } .page-skinpeel-special-site main .first-view .category:not(:empty):after { content: ']' } .page-skinpeel-special-site main .first-view .quick-order { margin-top: 10px } .page-skinpeel-special-site main .first-view .quick-order a { display: block; box-sizing: border-box; margin-right: auto; margin-left: auto; padding: .5em; border: solid 1px #fff; border-radius: 5px; text-align: center; text-decoration: none; color: #fff; cursor: pointer; transition: .3s; transition-property: background-color, border-color, color; display: inline-block; padding-left: 2em; box-shadow: 3px 3px 5px rgba(255, 255, 255, .5) } .page-skinpeel-special-site main .first-view .quick-order a:hover { background-color: #fff; border-color: #fff; color: #fff } .page-skinpeel-special-site main .first-view .quick-order a:after { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%3Cpath%20d%3D%22M%201%2012%20C%201%205.9248%205.9248%201%2012%201%20C%2018.0752%201%2023%205.9248%2023%2012%20C%2023%2018.0752%2018.0752%2023%2012%2023%20C%205.9248%2023%201%2018.0752%201%2012%20Z%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M%2017%2010%20L%2012%2015%20L%207%2010%20%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E%0D%0A); content: ''; padding-right: 2.5em; background-position: right 0 top 50% } .page-skinpeel-special-site main .first-view .quick-order a:hover { background-color: rgba(255, 255, 255, .2) } .page-skinpeel-special-site main .first-view h3 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; margin-top: 20px; font-size: 1.4rem; font-weight: inherit; line-height: 1.4 } .page-skinpeel-special-site main .first-view h3 strong { display: block; margin-bottom: 10px; font-size: 2.3rem } .page-skinpeel-special-site main .first-view .skinpeel-header_award-icon { position: absolute; top: 245px; right: calc(50% + 100px); width: 104px } .page-skinpeel-special-site main .first-view .skinpeel-header_upl { position: absolute; top: 245px; left: calc(27% + 230px); width: 60px } .page-skinpeel-special-site main .first-view .skinpeel-header_upr { position: absolute; top: 245px; left: calc(54% + 155px); width: 80px } .page-skinpeel-special-site main .first-view .skinpeel-header_lowl { position: absolute; top: 365px; left: calc(41% + 120px); width: 100px } .page-skinpeel-special-site main .first-view .skinpeel-header_lowr { position: absolute; top: 365px; left: calc(59.5% + 120px); width: 80px } .page-skinpeel-special-site main .getting-started { padding-right: 20px; padding-left: 20px; padding-top: 50px } .page-skinpeel-special-site main .getting-started h3 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 2rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #2f609a } .page-skinpeel-special-site main .getting-started ul li:first-of-type { margin-top: 20px } .page-skinpeel-special-site main .getting-started ul li:not(:first-of-type) { margin-top: 10px } .page-skinpeel-special-site main .getting-started ul li a { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 1em; box-shadow: 1px 1px 4px rgba(0, 0, 0, .1); border-radius: 5px; text-decoration: none; color: #3166ad } a.cart-in2:hover .selectBox { background-color: transparent } .page-skinpeel-special-site main .getting-started ul li a h4 { font-size: 1.4rem } .page-skinpeel-special-site main .getting-started ul li a div { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%3Cpath%20d%3D%22M%2010%2018%20L%2016%2012%20L%2010%206%20%22%20stroke%3D%22%233166ad%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); padding-right: 2.5em; background-position: 100% 50%; font-size: 1rem; text-align: right } .page-skinpeel-special-site main .getting-started ul li a div strong { font-size: 1.4rem; font-weight: 700 } .page-skinpeel-special-site main .getting-started .teiki-link, .page-skinpeel-special-site main .getting-started .teikibin-resumption { margin-top: 10px; font-size: 1.2rem; text-align: center } .page-skinpeel-special-site main .getting-started .teikibin-resumption a { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%3Cpath%20d%3D%22M%201%2012%20C%201%205.9248%205.9248%201%2012%201%20C%2018.0752%201%2023%205.9248%2023%2012%20C%2023%2018.0752%2018.0752%2023%2012%2023%20C%205.9248%2023%201%2018.0752%201%2012%20Z%22%20stroke%3D%22%23c50000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M%2010%2017%20L%2015%2012%20L%2010%207%20%22%20stroke%3D%22%23c50000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E%0D%0A); padding-right: 1.5em; background-position: 100% 50%; color: #c50000 } .page-skinpeel-special-site main .habit { padding-right: 20px; padding-left: 20px; padding-top: 60px; padding-bottom: 20px } .page-skinpeel-special-site main .habit h2, .page-skinpeel-special-site main .habit h3 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 2rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #001388 } .page-skinpeel-special-site main .habit p { margin-top: 1em; font-size: 1.4rem } .page-skinpeel-special-site main .feature, .page-skinpeel-special-site main .origin, .page-skinpeel-special-site main .theory, .page-skinpeel-special-site main .use { padding-bottom: 80px; border-top: solid 20px #f9f9f9 } .page-skinpeel-special-site main .feature h3, .page-skinpeel-special-site main .origin h3, .page-skinpeel-special-site main .theory h3, .page-skinpeel-special-site main .use h3 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; margin-bottom: 60px; padding-top: 150px; padding-bottom: 150px; background-repeat: no-repeat; font-size: 1.8rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #fff; transition: 6s ease-out } .page-skinpeel-special-site main .feature p, .page-skinpeel-special-site main .origin p, .page-skinpeel-special-site main .theory p, .page-skinpeel-special-site main .use p { margin-top: 1em; font-size: 1.4rem; text-align: justify } .page-skinpeel-special-site main .origin h3 { background: url(/assets/img/skinpeel/origin.webp) no-repeat 50% 50%/cover } .no-webp .page-skinpeel-special-site main .origin h3 { background-image: url(/assets/img/skinpeel/origin.jpg) } .page-skinpeel-special-site main .origin p strong { font-weight: 700 } .page-skinpeel-special-site main .theory h3 { background: url(/assets/img/skinpeel/theory.webp) no-repeat 50% 50%/cover } .no-webp .page-skinpeel-special-site main .theory h3 { background-image: url(/assets/img/skinpeel/theory.jpg) } .page-skinpeel-special-site main .theory h4 { font-size: 1.5rem; text-align: center; line-height: 1.4 } .page-skinpeel-special-site main .theory h5 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; margin-top: 40px; font-size: 1.8rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #3166ad } .page-skinpeel-special-site main .theory h5 .kerning { margin-right: -.5em } .page-skinpeel-special-site main .feature h3 { background: url(/assets/img/skinpeel/feature.webp) no-repeat 50% 50%/cover } .no-webp .page-skinpeel-special-site main .feature h3 { background-image: url(/assets/img/skinpeel/feature.jpg) } .page-skinpeel-special-site main .feature h4 { font-size: 1.5rem; text-align: center; line-height: 1.4 } .page-skinpeel-special-site main .feature h5 { margin-top: 40px; padding-top: calc(46% + 1.5em); background: no-repeat 50% 0 / 80% auto; font-size: 1.6rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #001388 } .page-skinpeel-special-site main .feature h5.day365 { background-image: url(/assets/img/skinpeel/feature_day365.webp) } .no-webp .page-skinpeel-special-site main .feature h5.day365 { background-image: url(/assets/img/skinpeel/feature_day365.jpg) } .page-skinpeel-special-site main .feature h5.recognition { background-image: url(/assets/img/skinpeel/feature_recognition.webp) } .no-webp .page-skinpeel-special-site main .feature h5.recognition { background-image: url(/assets/img/skinpeel/feature_recognition.jpg) } .page-skinpeel-special-site main .feature h5.balance { background-image: url(/assets/img/skinpeel/feature_balance.webp) } .no-webp .page-skinpeel-special-site main .feature h5.balance { background-image: url(/assets/img/skinpeel/feature_balance.jpg) } .page-skinpeel-special-site main .feature h5.melt { background-image: url(/assets/img/skinpeel/feature_melt.webp) } .no-webp .page-skinpeel-special-site main .feature h5.melt { background-image: url(/assets/img/skinpeel/feature_melt.jpg) } .page-skinpeel-special-site main .peeling { margin-right: 20px; margin-left: 20px } .page-skinpeel-special-site main .peeling h4 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 1.8rem; font-weight: inherit; text-align: center; line-height: 1.4; color: #2f609a } .page-skinpeel-special-site main .peeling p { margin-top: 1em; font-size: 1.4rem } .page-skinpeel-special-site main .peeling section { margin-top: 40px; margin-bottom: 80px; padding-bottom: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .1); border-radius: 5px } .page-skinpeel-special-site main .peeling section h5 { margin-bottom: 20px; padding: 12% 20px; background: url(/assets/img/skinpeel/peeling.webp) no-repeat 50% 50%/cover; border-radius: 5px 5px 0 0; font-size: 1.6rem; font-weight: inherit; color: #fff } .no-webp .page-skinpeel-special-site main .peeling section h5 { background-image: url(/assets/img/skinpeel/peeling.jpg) } .page-skinpeel-special-site main .peeling section p { margin-top: 1em; margin-right: 20px; margin-left: 20px; font-size: 1.3rem } .page-skinpeel-special-site main .use h3 { background: url(/assets/img/skinpeel/use.webp) no-repeat 50% 50%/cover } .no-webp .page-skinpeel-special-site main .use h3 { background-image: url(/assets/img/skinpeel/use.jpg) } .page-skinpeel-special-site main .use h4 { font-size: 1.5rem; text-align: center; line-height: 1.4 } .page-skinpeel-special-site main .use .description { margin-top: 1em; font-size: 1.4rem; text-align: center } .page-skinpeel-special-site main .use .flow { margin-top: 60px } .page-skinpeel-special-site main .use .flow .scroll { overflow-x: scroll; -webkit-overflow-scrolling: touch } .page-skinpeel-special-site main .use .flow .scroll ol { padding-right: 20px; padding-left: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; width: 200%; padding-top: 20px; padding-bottom: 20px; counter-reset: use-flow-ol-number } .page-skinpeel-special-site main .use .flow .scroll ol>li { padding-right: 20px; padding-left: 20px; box-sizing: border-box; position: relative; width: 100%; padding-top: 20px; padding-bottom: 20px; box-shadow: 0 2px 3px rgba(0, 0, 0, .1); border-radius: 5px } .page-skinpeel-special-site main .use .flow .scroll ol>li:before { font-family: 'Quicksand', 'Helvetica Neue', 'Helvetica Narrow', Helvetica, monospace !important; counter-increment: use-flow-ol-number; content: counter(use-flow-ol-number); position: absolute; top: 20px; left: 20px; font-size: 3rem; line-height: 1; color: #001388 } .page-skinpeel-special-site main .use .flow .scroll ol>li:not(:first-of-type) { margin-left: 20px } .page-skinpeel-special-site main .use .flow .scroll ol>li:not(:first-of-type):after { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%3Cpath%20d%3D%22M%202%2012%20L%2022%2012%20%22%20stroke%3D%22%23777%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M%2016%206%20L%2022%2012%20L%2016%2018%20%22%20stroke%3D%22%23777%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); content: ''; display: block; position: absolute; top: calc(50% - 20px); left: -20px; width: 40px; height: 40px } .page-skinpeel-special-site main .use .flow .scroll ol>li img { display: block; width: 80%; margin: 0 auto 20px auto } .page-skinpeel-special-site main .use .flow .scroll ol>li a { color: inherit } .page-skinpeel-special-site main .use .flow .scroll ol>li ul { margin-top: 20px; font-size: 1rem } .page-skinpeel-special-site main .use .flow .scroll ol>li ul li { display: inline } .page-skinpeel-special-site main .use .flow .scroll ol>li ul li:before { content: '●' } .page-skinpeel-special-site main .use .point { margin-right: 20px; margin-left: 20px; margin-top: 60px; color: #001388 } .page-skinpeel-special-site main .use .point h6 { font-size: 1.4rem; text-align: center } .page-skinpeel-special-site main .use .point ul { font-size: 1.2rem } .page-skinpeel-special-site main .use .point ul li { margin-top: 1em } .page-skinpeel-special-site main .use .point ul li strong { font-weight: 700 } .page-skinpeel-special-site main .order .cart-in { display: block; box-sizing: border-box; margin-right: auto; margin-left: auto; padding: .5em; background: #3466ab; border-radius: 5px; text-align: center; text-decoration: none; color: #fff; cursor: pointer; transition: background-color .3s } .page-skinpeel-special-site main .order .cart-in:hover { background-color: #1a3456 } .page-skinpeel-special-site main .order .teikibin { position: relative; padding-bottom: 140%; text-align: center } .page-skinpeel-special-site main .order .teikibin:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/assets/img/skinpeel/order_teikibin.webp) no-repeat 50% 100%/cover } .no-webp .page-skinpeel-special-site main .order .teikibin:before { background-image: url(/assets/img/skinpeel/order_teikibin.jpg) } .page-skinpeel-special-site main .order .teikibin .overlay { padding-right: 20px; padding-left: 20px; box-sizing: border-box; position: absolute; left: 0; width: 100% } .page-skinpeel-special-site main .order .teikibin .overlay:first-of-type { top: 10% } .page-skinpeel-special-site main .order .teikibin .overlay:nth-of-type(2) { bottom: 2% } .page-skinpeel-special-site main .order .teikibin h2 { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 2rem; font-weight: inherit; color: #000 } .page-skinpeel-special-site main .order .teikibin .subscribers { color: #2f609a } .page-skinpeel-special-site main .order .teikibin h3 { margin-top: 10px; font-size: 1.4rem; color: #000 } .page-skinpeel-special-site main .order .teikibin .teikibin-merit { position: absolute; top: calc(120px + 1.5em); right: 20px } .page-skinpeel-special-site main .order .teikibin .teikibin-merit li { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 4.5em; height: 4.5em; border-radius: 100%; font-size: 1rem; white-space: nowrap; line-height: 1; color: #fff } .page-skinpeel-special-site main .order .teikibin .teikibin-merit li:first-of-type { background: #83A3CE } .page-skinpeel-special-site main .order .teikibin .teikibin-merit li:nth-of-type(2) { margin-top: 2px; background: #2f609a } .page-skinpeel-special-site main .order .teikibin .meta { font-size: 1.2rem } .page-skinpeel-special-site main .order .teikibin .meta .price-teiki { font-weight: 700; line-height: 1; color: #000 } .page-skinpeel-special-site main .order .teikibin .meta .price-teiki strong { font-size: 2rem } .page-skinpeel-special-site main .order .teikibin .cart-in { margin-top: 20px; line-height: 1.4 } .page-skinpeel-special-site main .order .teikibin .teiki-link, .page-skinpeel-special-site main .order .teikibin .teikibin-resumption { margin-top: 10px; font-size: 1.2rem; text-align: center } .page-skinpeel-special-site main .order .teikibin .teikibin-resumption a { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%3Cpath%20d%3D%22M%201%2012%20C%201%205.9248%205.9248%201%2012%201%20C%2018.0752%201%2023%205.9248%2023%2012%20C%2023%2018.0752%2018.0752%2023%2012%2023%20C%205.9248%2023%201%2018.0752%201%2012%20Z%22%20stroke%3D%22%23c50000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M%2010%2017%20L%2015%2012%20L%2010%207%20%22%20stroke%3D%22%23c50000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E%0D%0A); padding-right: 1.5em; background-position: 100% 50%; color: #c50000 } .page-skinpeel-special-site main .order .another-order { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; border-bottom: solid 1px #e5e5e5 } .page-skinpeel-special-site main .order .another-order>div { flex-glow: 1; padding: 20px } .page-skinpeel-special-site main .order .another-order>div:not(:first-of-type) { border-left: solid 1px #e5e5e5 } .page-skinpeel-special-site main .order .another-order>div .flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } .page-skinpeel-special-site main .order .another-order>div .flex>div:first-of-type { width: 30% } .page-skinpeel-special-site main .order .another-order>div .flex>div:nth-of-type(2) { width: 70% } .page-skinpeel-special-site main .order .another-order>div .flex>div h6 { font-size: 1.2rem; font-weight: inherit; line-height: 1.4; color: #000 } .page-skinpeel-special-site main .order .another-order>div .flex>div h6 strong { display: inline-block; margin-bottom: 10px; padding: 1px 2px; border: solid 1px #2f609a; font-size: .8rem; color: #2f609a } .page-skinpeel-special-site main .order .another-order>div .flex>div .capacity { margin-top: 5px; font-size: 1rem; line-height: 1.4 } .page-skinpeel-special-site main .order .another-order>div .flex>div .price { font-size: 1rem; line-height: 1.4 } .page-skinpeel-special-site main .order .another-order>div .flex>div .price strong { font-size: 1.4rem } .page-skinpeel-special-site main .order .another-order>div .cart-in { margin-top: 20px } .js-modal-content { padding-top: calc(60px+15px+1.5em+15px) } .page-skinpeel-special-site main .order .another-order>div .flex>div .price .discount { font-size: 1rem; line-height: 1.4; color: #c50000 } .page-skinpeel-special-site main .order .another-order>div .flex>div .price .discount strong { font-size: 1.4rem; color: #c50000 } .js-modal-content { padding-top: calc(60px+15px+1.5em+15px) } .js-modal-content>div { width: 90%; height: auto; max-width: 500px; padding: 30px 20px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0, 0, 0, .3); pointer-events: auto } .js-modal-content .ib { display: inline-block } .js-modal-content .button-ghost { display: inline-block; padding: .5em 2em; font-size: 1.1rem } .js-modal-content .close_btn { position: absolute; right: 15px; top: 15px; cursor: pointer } .js-modal-content .close { display: block; width: 20px; height: 20px; background: url(/common/images/global/icon/cross.svg) no-repeat center/cover } #modal { width: 90%; margin: auto; display: none; pointer-events: none } #modal.open { display: flex } .page-skinpeel-special-site main .habit h2, .page-skinpeel-special-site main .habit h3 { font-size: 2.1rem; letter-spacing: -.05em } .page-skinpeel-special-site main .peeling h4 { letter-spacing: -.05em } .page-skinpeel-special-site main .theory { padding-bottom: 20px } .page-skinpeel-special-site main #use .teiki-link { margin: auto auto 40px; text-align: center } .page-skinpeel-special-site main #another_order_teikibin { padding-bottom: 1em } .page-skinpeel-special-site main #another_order_teikibin .note { margin: 2em auto auto; font-size: .6em; text-align: right; line-height: 1.3 } .page-skinpeel-special-site main .order .teikibin .overlay:nth-of-type(2) { bottom: 0 } .page-skinpeel-special-site main .peeling section { box-shadow: none } .page-skinpeel-special-site main .peeling section p { margin: 1em auto auto } .page-skinpeel-special-site main .use .point { margin: 60px 20px auto } .page-skinpeel-special-site main .order .teikibin .overlay:nth-of-type(2) { bottom: 5% } .page-skinpeel-special-site main .order .teikibin .overlay:first-of-type { top: 0 } .page-skinpeel-special-site main .order .teikibin:before { top: -12% } .page-skinpeel-special-site main .order .teikibin { background: #c9d3df; margin-bottom: 10px } #order>.order { background: #c9d3df } #another_order { margin-top: -120px !important; padding-top: 120px !important; background: #fff } .page-skinpeel-special-site main .order .another-order { margin-top: 40px } #use h4 { text-align: center; margin-bottom: 1em; font-size: 1.5rem; line-height: 1.4 } .page-skinpeel-special-site main .getting-started { padding-top: 0 } .kakushitubiyosui { border: solid 1px #ddd } .page-skinpeel-special-site main .feature, .page-skinpeel-special-site main .origin, .page-skinpeel-special-site main .theory, .page-skinpeel-special-site main .use { border-top: none } .page-skinpeel-special-site main .use { padding-top: 0 } #feature .sfc_onlyone { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 1.9rem; letter-spacing: -.05em } .sfc_skinpeel_feature li { margin-bottom: 10px; padding-left: 1.3em; position: relative; font-size: 120%; line-height: 1.4 } .sfc_skinpeel_feature li::before { content: '●'; color: #001388; position: absolute; left: 0; top: 0 } .sfc_red { color: #c50000 } .page-skinpeel-special-site main .getting-started ul li a div { background-size: 28px; background-position: 100% 100% } .sfc_icon-official_limited { font-size: 1.1rem; font-weight: 700; background-color: #c50000; padding: 3px 5px; color: #fff; margin-right: -14px; white-space: nowrap } .sfc_icon-otppp { display: inline-block; padding: 0 5px; border: solid 1px #001388; font-size: 1rem; color: #001388 } .sfc-item_list { display: flex; padding: 20px 10px; margin: 0 10px; border-top: 1px solid #ddd; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .sfc-item_list.sfc-trial_order { border-bottom: 1px solid #ddd } .sfc-item_list figure { width: 27% } .sfc-item_list-detail { width: 73% } .font-08 { font-size: .8rem } .sfc-link_text-red a { color: #c50000; text-decoration: underline } .page-skinpeel-special-site main .habit { padding-bottom: 0; text-align: justify; } .page-skinpeel-special-site main .theory h5 { margin-top: 20px } .page-skinpeel-special-site main #feature, .page-skinpeel-special-site main #order, .page-skinpeel-special-site main #origin, .page-skinpeel-special-site main #theory, .page-skinpeel-special-site main #use { margin-top: -120px !important; padding-top: 120px !important } .page-skinpeel-special-site main .use { padding-top: 0 } .sfc_another-order a { text-decoration: none } a:hover .selectBox { background: #f2f2f2 } .sfc_another-order a p { color: #333 } .first-view-price { font-size: 17px; letter-spacing: 0; text-align: center; margin-bottom: 10px; margin-top: 13px } .first-view-price>span { font-size: 21px } .page-skinpeel-special-site main .first-view { padding-bottom: 0; height: 750px } .page-skinpeel-special-site main .first-view:before { background: url(/assets/img/skinpeel/first_view.webp) no-repeat 50% -120px/100% auto; } .no-webp .page-skinpeel-special-site main .first-view:before { background-image: url(/assets/img/skinpeel/first_view.jpg) } .page-skinpeel-special-site main .first-view h1 { font-size: 14px; text-indent: 0; white-space: normal; line-height: 1.6; margin-bottom: 9px } .page-skinpeel-special-site main .first-view h1>* { display: block } .page-skinpeel-special-site main .first-view h1 strong { font-size: 22px; line-height: 1.5; margin-bottom: 4px } .page-skinpeel-special-site main .first-view .overlay:first-of-type { top: 16px } .page-skinpeel-special-site main .first-view .name { font-size: 21px } .page-skinpeel-special-site main .first-view .category { font-size: 18px } .page-skinpeel-special-site main .first-view .quick-order { margin-top: 10px } .page-skinpeel-special-site main .first-view .info-date { text-align: right; margin-top: 24px; color: rgba(255, 255, 255, .8); font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 12px; padding-bottom: 5px } .first-view-price { font-size: 10px; letter-spacing: 0; text-align: center; margin-bottom: 6px; margin-top: 10px } .first-view-price>span { font-size: 12px } .page-skinpeel-special-site main .order .teikibin .overlay:nth-of-type(2) { bottom: 0 } .page-skinpeel-special-site main .order .teikibin { padding-bottom: 150% } .about-similar-movie-wrap { padding: 4rem 0 0rem; width: 100%; margin: 0 auto -4rem } .about-similar-movie { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden } .about-similar-movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .info_skinpeel { margin: 0 20px } .info_skinpeel .faq-caption { line-height: 1; font-size: 1.5rem; font-weight: 700; text-align: center; margin-top: 30px } .info_skinpeel .q { position: relative; padding: .5em; border: solid 1px #1b224e; border-radius: 5px; font-weight: 700; color: #1b224e; -webkit-perspective: 800px; perspective: 800px; margin-top: 20px; padding-left: 32px; font-size: 14px; line-height: 1.8; } .info_skinpeel .q:before { content: 'Q.'; position: absolute; left: calc(1.0em - 1px); z-index: 1; font-weight: 700 } .info_skinpeel .q:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; transition: .6s ease-out; transition-property: background, opacity, transform, -webkit-transform; transition-property: background, opacity, transform; background, opacity, transform: background, opacity, transform, -webkit-transform; will-change: transform } .info_skinpeel .q>div, .info_skinpeel .q>span { position: relative; z-index: 1; padding-right: 2.5rem; display: block } .info_skinpeel .q>div:after, .info_skinpeel .q>div:before, .info_skinpeel .q>span:after, .info_skinpeel .q>span:before { content: ''; display: block; position: absolute; top: 50%; right: 1em; width: .5em; height: 1px; background: #777; transition: transform .3s ease-out, -webkit-transform .3s ease-out; will-change: transform } .info_skinpeel .q>div:before, .info_skinpeel .q>span:before { transform: rotate(90deg) } .info_skinpeel .a { position: relative; padding: .5em 0 40px 2.5em } .info_skinpeel .a:before { content: 'A.'; position: absolute; left: 1.2em; font-weight: 700 } .info_skinpeel .q.open { border-style: dashed; border-color: transparent; border-bottom-color: #e5e5e5; border-radius: 0 } .info_skinpeel .q.open:after { opacity: 0; background: #2f609a; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg) } .info_skinpeel .q.open>div:before, .info_skinpeel .q.open>span:before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .info_skinpeel .q.open>div:after, .info_skinpeel .q.open>span:after { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) } .maquia { letter-spacing: .05em; line-height: 1.8; color: #333; font-size: min(calc(28 / 750 * 375px), 28px); padding: 60px 0 min(calc(100/750 * 375px), 100px); margin-top: -60px } .maquia img { display: block; width: 100%; height: auto } .maquia ul { list-style: none; padding: 0; margin: 0 } .maquia dd { margin-left: 0 } .maquia dl, .maquia p, .maquia h1, .maquia h2, .maquia h3, .maquia h4, .maquia h5 { margin: 0 } .maquia-head { background: url(/assets/img/skinpeel/maquia_mv_bg.png) center 0 repeat; padding: min(calc(45 / 750 * 375px), 45px) min(calc(20 / 750 * 375px), 20px); background-size: cover } .maquia-mincho { font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important } .maquia-heading { font-weight: 400; text-align: center; color: #fff; font-size: min(calc(40 / 750 * 375px), 40px); line-height: 1.6 } .maquia-heading_shoulder { font-size: min(calc(28 / 750 * 375px), 28px); display: block } .maquia-heading_shoulder span { font-size: .7em } .maquia-mv_caption { color: #fff; text-align: right; font-size: min(calc(20 / 750 * 375px), 28px); padding-bottom: min(calc(5 / 750 * 375px), 5px) } .maquia-mv { margin-top: calc(2.2rem / 1.6) } .maquia .maquia-subheading { color: #fff; text-align: center; margin-top: min(calc(50 / 750 * 375px), 50px); font-size: min(calc(40 / 750 * 375px), 40px); line-height: 1.6 } .maquia-subheading_shoulder { font-size: min(calc(28 / 750 * 375px), 28px); display: block; padding-bottom: min(calc(35 / 750 * 375px), 35px) } .maquia-description-wrap { margin-top: min(calc(50 / 750 * 375px), 50px); padding: 0 min(calc(20 / 750 * 375px), 20px) } .maquia .maquia-description-wrap>* { margin-top: min(calc(40 / 750 * 375px), 50px) } .maquia-description { color: #fff; text-align: center; margin-top: min(calc(30/750 * 375px), 30px); font-size: min(calc(28 / 750 * 375px), 28px) } .maquia-content { display: grid; row-gap: min(calc(60/750 * 375px), 90px); padding: 0 min(calc(20/750 * 375px), 20px) } .maquia-content-area { margin-top: min(calc(60/750 * 375px), 60px); padding: 0 min(calc(20/750 * 375px), 20px) } .maquia-content-box_heading { font-weight: 700; letter-spacing: 0; line-height: 1.8 } .maquia-content-box_heading>* { width: fit-content; background-image: linear-gradient(to right, #f2f2f2, #f2f2f2); background-repeat: no-repeat; background-size: 100% min(calc(20/750 * 375px), 20px); background-position: bottom } .maquia-content-box_heading-main { font-weight: 700; color: #001388; font-size: min(calc(28/750 * 375px), 28px) } .maquia-content-box_heading-name { font-size: min(calc(24/750 * 375px), 24px); font-weight: 400 } .maquia-content-box_body { height: min(calc(650/750 * 375px), 650px); overflow: hidden; position: relative; transition: all } .maquia-content-box_body[aria-hidden="false"]::after { visibility: hidden; opacity: 0 } .maquia-content-box_body::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: min(calc(50/750 * 375px), 50px); background: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%) 0 0 no-repeat; transition: all 0.1s ease } .maquia-content-box_body-wrap { margin-top: min(calc(30/750 * 375px), 30px); position: relative } .maquia-content-box_body-wrap::after { position: absolute; left: 0; right: 0; bottom: 0; width: calc(100% - 60px); margin: 0 auto; content: ""; height: 1px; background-color: #333 } .maquia-content-box:last-child .maquia-content-box_body-wrap::after { content: none } .maquia-content-box_body-inner { padding-bottom: min(calc(30/750 * 375px), 30px) } .maquia-content-box_body-inner>*:first-child { margin-top: 0 } .maquia-content-box_img { margin-top: min(calc(40/750 * 375px), 40px) } .maquia .maquia-content-box_text-area { margin-top: min(calc(30/750 * 375px), 30px); display: grid; row-gap: min(calc(50/750 * 375px), 50px) } .maquia-content-box_name { display: inline; font-weight: 700; margin-right: .2em } .maquia-content-box_text { display: inline } .maquia-content-box_text em { color: #001388; font-weight: 500; font-style: normal } .maquia .maquia-switch-button { display: block; background-color: transparent; margin: 0 auto; padding: 0; width: min(calc(45/750 * 375px), 45px); height: min(calc(45/750 * 375px), 45px); border: none; transform: translateY(max(calc(-30/750 * 375px), -30px)); transition: transform 0.3s ease, padding-bottom 0.3s ease; padding-bottom: min(calc(30/750 * 375px), 30px); box-sizing: content-box } .maquia .maquia-switch-button svg { width: 100%; height: 100% } .maquia .maquia-switch-button.is-open { transform: translateY(0); border: none; padding-bottom: min(calc(60/750 * 375px), 60px) } .maquia .maquia-switch-button.is-open svg { transform: rotate(135deg) } .maquia-content-box_media { display: grid; column-gap: min(calc(30/750 * 375px), 30px); grid-template-columns: min(calc(320/750 * 375px), 320px) 1fr } .maquia-content-box_media.is-reverse { grid-template-columns: 1fr min(calc(320/750 * 375px), 320px) } .maquia-content-box_media.is-reverse>*:first-child { order: 2 } .maquia-content-box_media.is-reverse>*:nth-child(2) { order: 1 } .maquia-content-box_media>* { margin-top: 0 } .maquia-button { width: min(calc(400/750 * 375px), 400px); margin: 0 auto; text-align: center; display: block } .maquia-button a { display: flex; justify-content: center; align-items: center; text-decoration: none; color: #333; border: 1px solid currentColor; padding: min(calc(15/750 * 375px), 15px) 0; width: 100%; border-radius: 10px; position: relative; line-height: 1.6 } .maquia-button a svg { width: min(calc(30/750 * 375px), 40px); height: min(calc(30/750 * 375px), 40px); position: absolute; top: 50%; transform: translateY(-50%); right: min(calc(15/750 * 375px), 15px) } .maquia .maquia-bottom_list { margin-top: min(calc(60/750 * 375px), 60px); display: grid; row-gap: min(calc(40/750 * 375px), 40px) } .maquia-avatar-area { border: 1px solid #333; padding: min(calc(60/750 * 375px), 60px) min(calc(40/750 * 375px), 40px) min(calc(50/750 * 375px), 50px) } .maquia-avatar-media_heading { text-align: center } .maquia-avatar-media_heading_main { display: block; font-size: min(calc(32/750 * 375px), 32px); line-height: 1.6; color: #001388; letter-spacing: -.03em } .maquia-avatar-media_heading_name { display: block; font-size: min(calc(32/750 * 375px), 32px); margin-top: min(calc(15/750 * 375px), 15px); font-weight: 400 } .maquia-avatar-media_heading_name>span { font-weight: 700 } .maquia-avatar-media { margin-top: min(calc(40/750 * 375px), 40px) } .maquia-avatar-media_heading { margin: 0; font-weight: 700; line-height: 1.4; font-size: min(calc(32/750 * 375px), 32px) } .maquia-avatar-media_text { font-size: min(calc(28/750 * 375px), 28px); margin-top: min(calc(20/750 * 375px), 20px); line-height: 1.9; letter-spacing: 0 } .maquia-avatar-media_thum { width: min(calc(324/750 * 375px), 324px); float: left; padding-right: min(calc(20/750 * 375px), 30px) } .maquia .clearfix::after { content: ""; display: block; clear: both } .maquia-avatar-media_note { font-size: min(calc(20/750 * 375px), 20px) } .sales-name { font-size: 9.75px } /* 7/5 add スキピFV x/1.171 で計算*/ /*index01 .first-view-blue*/ .page-skinpeel-special-site main .first-view-blue { text-align: left; margin-top: 60px; padding-right: min(calc(32/750*375px), 14px); padding-left: min(calc(32/750*375px), 14px); padding-bottom: min(calc(32/750*375px), 28px); padding-top: min(calc(660/750*375px), 564px); color: #1b224e; background-color: #c4e3fa; height: auto !important } .page-skinpeel-special-site main .first-view-blue:before { background: url(/assets/img/skinpeel/first_view_blue.webp) no-repeat 0 0 / 100% auto } .page-skinpeel-special-site main .first-view-blue>* { position: relative; z-index: 1 } .first-view-blue .first-view-new-heading .first-view-new-heading_one { font-size: min(calc(42/750*375px), 36px) } .first-view-blue .first-view-new-heading .first-view-new-heading_two { font-size: min(calc(84/750*375px), 72px); margin-top: min(calc(12/750*375px), 10px) } .first-view-blue .first-view-new-heading .first-view-new-heading_two sup { vertical-align: top; font-size: 35% } .first-view-blue .first-view-new-heading { margin-bottom: 0 !important; box-sizing: border-box } .first-view-blue .first-view-new-heading { width: fit-content; margin: 0 auto; padding-bottom: min(calc(6/750*375px), 5px); position: relative } .first-view-blue .first-view-new-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: min(calc(15/750*375px), 13px); background: #fff; z-index: 0 } .first-view-blue .first-view-new-heading>* { display: block; position: relative; z-index: 1 } .first-view-blue .first-view-new-description { font-size: min(calc(32/750*375px), 27px); line-height: 1; font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; margin-top: min(calc(20/750*375px), 17px) } .first-view-blue .first-view-new-description { text-align: center } .first-view-blue .first-view-new-cv-box { background-color: #fff; width: 100%; padding: min(calc(34/750*375px), 29px) 0; text-align: center } .first-view-blue .first-view-new-cv-box { margin-top: min(calc(32/750*375px), 27px) } .first-view-blue .first-view-new-cv-box-heading>* { display: block; color: #1b224e; line-height: 1 } .first-view-blue .first-view-new-cv-box-heading_one { font-size: min(calc(36/750*375px), 30px); font-weight: 700 } .first-view-blue .first-view-new-cv-box-heading_two { margin-top: min(calc(12/750*375px), 10px); font-size: min(calc(20/750*375px), 17px) } .first-view-blue .first-view-new-box-price { display: grid; justify-content: center; margin-top: min(calc(20/750*375px), 13px); row-gap: min(calc(12/750*375px), 10px) } .first-view-blue .first-view-new-box-price>* { display: block; line-height: 1; font-size: min(calc(24/750*375px), 20px) } .first-view-blue .first-view-new-box-cv { margin-top: min(calc(20/750*375px), 17px) !important } .first-view-blue .first-view-new-box-cv a { border: none; background-color: #1b224e; width: min(calc(400/750*375px), 341px); margin: 0 auto } .first-view-blue .first-view-new-box-cv a:hover { background-color: #1b224e !important } .first-view-blue .first-view-new-note { margin-top: min(calc(20/750*375px), 9px); text-align: right } .first-view-blue .first-view-new-note p { font-size: min(calc(16/750*375px), 14px) } .first-view-blue .first-view-new-note-bottom { margin-top: min(calc(14/750*375px), 12px) } /*index02 .first-view-gray*/ .page-skinpeel-special-site main .first-view-gray { text-align: left; margin-top: 60px; padding-right: min(calc(32/750*375px), 14px); padding-left: min(calc(32/750*375px), 14px); padding-bottom: min(calc(32/750*375px), 28px); padding-top: min(calc(56/750*375px), 48px); color: #333; box-sizing: border-box; height: min(calc(1958/750*375px), 1672px) !important } .page-skinpeel-special-site main .first-view-gray:before { background: url(/assets/img/skinpeel/first_view_gray.webp) no-repeat 0 0 / 100% auto } .page-skinpeel-special-site main .first-view-gray>* { position: relative; z-index: 1 } .first-view-gray .first-view-new-heading .first-view-new-heading_one { font-size: min(calc(42/750*375px), 36px) } .first-view-gray .first-view-new-heading .first-view-new-heading_two { font-size: min(calc(84/750*375px), 72px); margin-top: min(calc(12/750*375px), 10px) } .first-view-gray .first-view-new-heading .first-view-new-heading_two sup { vertical-align: top; font-size: 35% } .first-view-gray .first-view-new-heading { margin-bottom: 0 !important; box-sizing: border-box } .first-view-gray .first-view-new-heading>* { display: block; position: relative; z-index: 1 } .first-view-gray .first-view-new-description { font-size: min(calc(32/750*375px), 27px); line-height: 1; font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; margin-top: min(calc(20/750*375px), 17px) } .first-view-gray .first-view-new-cv-box { background-color: #fff; width: 100%; padding: min(calc(34/750*375px), 29px) 0; text-align: center } .first-view-gray .first-view-new-cv-box { margin-top: min(calc(954/750*375px), 811px) !important } .first-view-gray .first-view-new-cv-box-heading>* { display: block; color: #1b224e; line-height: 1 } .first-view-gray .first-view-new-cv-box-heading_one { font-size: min(calc(36/750*375px), 30px); font-weight: 700 } .first-view-gray .first-view-new-cv-box-heading_two { margin-top: min(calc(12/750*375px), 10px); font-size: min(calc(20/750*375px), 17px) } .first-view-gray .first-view-new-box-price { display: grid; justify-content: center; margin-top: min(calc(20/750*375px), 13px); row-gap: min(calc(12/750*375px), 10px) } .first-view-gray .first-view-new-box-price>* { display: block; line-height: 1; font-size: min(calc(24/750*375px), 20px) } .first-view-gray .first-view-new-box-cv { margin-top: min(calc(20/750*375px), 17px) !important } .first-view-gray .first-view-new-box-cv a { border: none; background-color: #1b224e; width: min(calc(400/750*375px), 341px); margin: 0 auto } .first-view-gray .first-view-new-box-cv a:hover { background-color: #1b224e !important } .first-view-gray .first-view-new-note { margin-top: min(calc(20/750*375px), 9px); text-align: right } .first-view-new-note p { font-size: min(calc(16/750*375px), 14px) } .first-view-gray .first-view-new-note-bottom { margin-top: min(calc(14/750*375px), 12px) } /* 20250123 add 20th link*/ .twenty-link { display: block; padding-left: 20px; padding-right: 20px; margin-top: 40px; } .twenty-link_text { width: fit-content; display: grid; margin: 24px auto 0; grid-template-columns: 1fr 12px; align-items: center; column-gap: 5px; line-height: 1; font-family: 'リュウミン R-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif !important; font-size: 1.3rem } .twenty-link_text span { color: #1b224e; text-decoration: underline } .twenty-link_text svg { width: 100%; height: auto }