@charset "UTF-8"; /*** The new CSS reset - version 1.8.3 (last updated 21.1.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 */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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 { 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 { appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; line-break: after-white-space; 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; } /* ================================================== 基本要素/汎用クラス ================================================== */ /* styles.scss */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { font-weight: inherit; } html { font-size: 62.5%; } body { background-color: #fff; color: #3f3f3f; font-family: "source-han-sans-simplified-c", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; font-size: 1.4em; line-height: 1.7; letter-spacing: 0.01em; overflow-x: hidden; overflow-y: scroll; position: relative; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (min-width: 768px) { body { font-size: 1.6em; line-height: 2; } } * { min-height: 0vw; } img { max-width: 100%; height: auto; vertical-align: top; } @media screen and (min-width: 768px) { img { image-rendering: -webkit-optimize-contrast; } } a:focus-visible, button:focus-visible { outline: 0; outline-offset: 2px; box-shadow: 0 0 0 2px #cfd9e9; } a { color: #3f3f3f; cursor: pointer; transition: 0.2s ease-in-out; } @media screen and (min-width: 1024px) { a:hover { opacity: 0.8; } } button { display: inline-block; line-height: 1; user-select: none; cursor: pointer; transition: 0.2s ease-in-out; } button:hover { opacity: 0.8; } button:focus { outline: 0; } button:not(:disabled) { cursor: pointer; } .fixed-attention { width: fit-content; margin-bottom: 30px; text-align: center; font-family: adobe-song-std, sans-serif; font-size: 3.2vw; color: #fff; line-height: 1.5em; position: fixed; bottom: 55px; left: 50%; transform: translate(-50%, 50%); padding: 4%; width: 90vw; z-index: 99; border-radius: 12px; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); transition: 0.3s all; } @media screen and (min-width: 768px) { .fixed-attention { font-size: 17px; padding: 16px; max-width: 960px; margin-bottom: 10px; } } .fixed-attention .link-text { color: #ffe65b; text-decoration: underline; display: inline; } .fixed-attention .wrap-fixed-attention-close { position: relative; cursor: pointer; margin-left: 3.2vw; position: absolute; right: 1%; top: 0; } @media screen and (min-width: 768px) { .fixed-attention .wrap-fixed-attention-close { right: 16px; top: 50%; transform: translate(-50%, -50%); } } .fixed-attention .wrap-fixed-attention-close::before { display: inline; content: "×"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 3rem; line-height: 1; } .none { opacity: 0; } /* ================================================== 表示/非表示出し分け ================================================== */ .visible_xxs { display: none; } @media screen and (max-width: 374px) { .visible_xxs { display: inline-block !important; } } .hidden_xxs { display: inline-block; } @media screen and (max-width: 374px) { .hidden_xxs { display: none !important; } } .visible_xs { display: none; } @media screen and (max-width: 767px) { .visible_xs { display: inline-block !important; } } .hidden_xs { display: inline-block; } @media screen and (max-width: 767px) { .hidden_xs { display: none !important; } } .visible_sm { display: none; } @media screen and (min-width: 768px) { .visible_sm { display: inline-block !important; } } .hidden_sm { display: inline-block; } @media screen and (min-width: 768px) { .hidden_sm { display: none !important; } } .visible_md { display: none; } @media screen and (min-width: 1024px) { .visible_md { display: inline-block !important; } } .hidden_md { display: inline-block; } @media screen and (min-width: 1024px) { .hidden_md { display: none !important; } } .visible_lg { display: none; } @media screen and (min-width: 1366px) { .visible_lg { display: inline-block !important; } } .hidden_lg { display: inline-block; } @media screen and (min-width: 1366px) { .hidden_lg { display: none !important; } } .visible_xl { display: none; } @media screen and (min-width: 1920px) { .visible_xl { display: inline-block !important; } } .hidden_xl { display: inline-block; } @media screen and (min-width: 1920px) { .hidden_xl { display: none !important; } } .visible_all { display: inline-block !important; } .hidden_all { display: none !important; } /* ================================================== ヘッダー ================================================== */ .lp_header { position: absolute; z-index: 100; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem min(4vw, 1.2rem); } .lp_header .header_logo a { display: flex; } .lp_header .header_logo img { width: min(16vw, 84px); } .lp_header .header_sns { width: min(20vw, 80px); } @media screen and (max-width: 786px) { .lp_header .header_sns { width: min(20vw, 10rem); } } .lp_header .header_sns.jp { width: auto; } .lp_header .header_sns.jp iframe { height: 24px !important; } @media screen and (max-width: 786px) { .lp_header .header_sns.jp { width: auto; } } .lp_header .header_sns a { display: flex; } /* ================================================== フッター ================================================== */ .lp_footer .footer_inner { width: 100%; background-color: #8a9dbe; color: #fff; display: flex; justify-content: center; align-items: center; height: min(10.667vw, 6rem); } .lp_footer .footer_inner small { font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); } .lp_pagetop { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; transition: none; opacity: 0; } @media screen and (min-width: 1024px) { .lp_pagetop { right: 2rem; bottom: 2rem; } } .lp_pagetop a { display: block; width: min(10.667vw, 6rem); height: 0; padding-top: min(10.667vw, 6rem); border-radius: 50%; background: rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; } .lp_pagetop a::before { content: ""; width: min(2.667vw, 1.5rem); height: min(2.667vw, 1.5rem); border-width: 0.2rem 0.2rem 0 0; border-color: #fff; border-style: solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -20%) rotate(-45deg); } .lp_pagetop.is_show { animation: fadein 0.3s forwards; } .lp_pagetop.is_hide { animation: fadeout 0.3s forwards; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } /* ================================================== 全体レイアウト ================================================== */ .lp_wrap { position: relative; overflow: hidden; } .lp_container { position: relative; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } /* ================================================== main内スタイル ================================================== */ .lp_main { background: url(../img/common/main_bg.png) repeat center center; } .lp_main .sec_heading { margin-bottom: min(5.333vw, 2rem); font-size: clamp(1.5rem, 5.8vw + -2.9486rem, 3rem); } .lp_main .sec_subheading { margin: 0 auto min(2.667vw, 2rem); font-size: clamp(1.4rem, 3.1vw + -0.9777rem, 2.2rem); } .fadein_up { opacity: 0; transition: 1.2s; } .fadein_up.is-show { opacity: 1; } .wave { width: 100%; background-repeat: no-repeat; background-position: center top; } .wave--desktop { display: block; } .wave--mobile { display: none; } section { padding: 10rem 0 10rem; } .section-title { text-align: center; padding: 2rem 0 4rem; font-size: clamp(2.5rem, 5.8vw + -1.9486rem, 4rem); color: #598dd7; font-weight: 900; background: url(../img/common/wave_blue.png) no-repeat center center; background-size: contain; line-height: 1.2; } @media screen and (max-width: 786px) { .section-title { background-size: cover; } } .section-title.feature-title { padding: 2rem 0 2rem; background: none; text-align: left; } .section-title.feature-title ::before { content: ""; position: absolute; z-index: -1; top: 10rem; left: 0; width: 100vw; text-align: center; height: 84px; padding: 2rem 0 4rem; font-size: clamp(2.9rem, 4.3vw - 0.3981rem, 4rem); color: #598dd7; font-weight: 900; background: url(../img/common/wave_blue.png) no-repeat center center; background-size: contain; line-height: 1.2; pointer-events: none; } @media screen and (max-width: 1404px) { .section-title.feature-title ::before { background-size: cover; } } .section-title.white { background: url(../img/common/wave_white.png) no-repeat center center; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); } .section-title .section-subtitle { font-size: clamp(1.8rem, 4.7vw + -1.8049rem, 3rem); } .coming_soon { margin-top: 3rem; width: 100%; max-width: 300px; display: inline-block; padding: 1.5rem 1rem; border: none; border-radius: 999px; background-color: #b8c2d0; color: white; font-weight: bold; text-align: center; font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem); } .coming_soon.bonus { margin-top: 0; } @media screen and (max-width: 786px) { .coming_soon { font-size: clamp(2rem, 0vw + 2rem, 2rem); } } /* ================================================== fv ================================================== */ /*fv*/ .hero-section { position: relative; } .hero-section h1 img { width: 100%; } .hero-section .hero-detail { position: absolute; left: 4vw; top: 0; bottom: 0; margin: auto; height: max-content; width: 50vw; display: flex; flex-direction: column; align-items: center; } .hero-section .hero-detail .catch_copy { position: relative; top: 1vw; width: 48vw; } .hero-section .hero-detail .product_img { width: 30vw; position: relative; left: -2vw; top: 2vw; } .hero-section .hero-detail .product_name { width: 17vw; position: relative; left: -6vw; top: 1.5vw; } @media screen and (max-width: 786px) { .hero-section { position: relative; } .hero-section .hero-detail { position: absolute; left: 0; top: 15vw; bottom: auto; margin: auto; height: max-content; width: 100vw; display: flex; flex-direction: column; align-items: center; } .hero-section .hero-detail .catch_copy { position: relative; top: auto; width: 96vw; } .hero-section .hero-detail .product_img { width: 72vw; position: relative; left: auto; top: -3vw; } .hero-section .hero-detail .product_name { width: 42vw; position: relative; left: -10vw; top: -4vw; } } /* ================================================== feature ================================================== */ /*feature*/ .column_low { display: none; } .column_high { display: block; } @media screen and (max-width: 1404px) { .column_low { display: block; } .column_high { display: none; } } .feature-section { position: relative; z-index: 10; padding: 10rem 0 16rem; } @media screen and (max-width: 786px) { .feature-section { padding: 4rem 0 10rem; } } @media screen and (max-width: 786px) { .feature-section .section-title { padding-bottom: 0; } } .feature-section .feature-content { display: flex; flex-wrap: wrap; justify-content: center; padding: 2rem; gap: 0 8rem; } .feature-section .feature-content .left { position: relative; z-index: 10; max-width: 784px; width: 100%; } .feature-section .feature-content .right { max-width: 506px; } @media screen and (max-width: 1404px) { .feature-section .feature-content .right { max-width: 784px; width: 100%; padding: 0 2rem; } } @media screen and (max-width: 786px) { .feature-section .feature-content .right { padding: 0; } } .feature-section .feature-content .right h3 { font-size: clamp(3rem, 0vw + 3rem, 3rem); color: #3f3f3f; font-weight: 900; line-height: 1.8; margin: 3rem 0 0; } @media screen and (max-width: 786px) { .feature-section .feature-content .right h3 { font-size: clamp(2rem, 3.9vw + -0.9913rem, 3rem); } } .feature-section .feature-content .right ul li { font-size: clamp(1.5rem, 1.2vw + 0.5796rem, 1.8rem); line-height: 2; color: #3f3f3f; } .feature-section .feature-content .right .buy-button { margin-top: 3rem; width: 100%; max-width: 300px; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: linear-gradient(to bottom, #fe309e, #d30674); border: none; border-radius: 999px; color: white; font-weight: bold; font-size: clamp(2rem, 0vw + 2rem, 2rem); box-shadow: 4px 4px 0 #bacae4; cursor: pointer; } .feature-section .feature-content .right .buy-button.jp { font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem); } @media screen and (max-width: 786px) { .feature-section .feature-content .right .buy-button.jp { font-size: clamp(2rem, 0vw + 2rem, 2rem); } } @media screen and (max-width: 786px) { .feature-section .feature-content .right .buy-button { font-size: clamp(2.5rem, -1.9vw + 3.9573rem, 2rem); max-width: 100%; padding: 2.5rem 2.5rem; } } .feature-section .feature-content .right .buy-button::before { content: ""; background: url(../img/common/icon_cart.svg) no-repeat top center; width: 30px; height: 30px; background-size: contain; margin-right: 10px; } .feature-section .feature-content .right .buy-button::after { content: ""; background: url(../img/common/icon_outerlink.svg) no-repeat top center; width: 20px; height: 20px; background-size: contain; margin-left: 10px; } /*bonus*/ .bonus-section { padding: 6rem 0 10rem; position: relative; z-index: 20; background: url(../img/common/work_bg_center_pc.png) no-repeat top center; background-size: cover; } @media screen and (max-width: 786px) { .bonus-section { background: url(../img/common/work_bg_center_sp.png) no-repeat bottom left; padding: 10rem 0 5rem; } } .bonus-section::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: url(../img/common/work_bg_top_pc.png) no-repeat bottom center; background-size: contain; min-height: 80px; pointer-events: none; } .bonus-section .bonus-content { display: flex; flex-direction: column; align-items: center; padding: 0 2rem; /* @media screen and (max-width: $breakpoint-sp) { align-items: flex-end; } */ } .bonus-section .bonus-content .bonus-img { margin: auto; padding: 0 1rem 5rem; } .bonus-section .bonus-content .bonus-img img { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .bonus-section .bonus-content .bonus-buttonbox { text-align: center; width: 100%; } .bonus-section .bonus-content .bonus-buttonbox .bonus-button { width: 100%; max-width: 300px; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: linear-gradient(to bottom, #fe309e, #d30674); border: none; border-radius: 999px; color: white; font-weight: bold; font-size: clamp(2.1rem, -0.4vw + 2.4068rem, 2rem); box-shadow: 4px 4px 0 #bacae4; cursor: pointer; } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-buttonbox .bonus-button { font-size: clamp(2.5rem, -1.9vw + 3.9573rem, 2rem); max-width: 100%; padding: 2.5rem 2.5rem; } } .bonus-section .bonus-content .bonus-buttonbox .bonus-button::before { content: ""; background: url(../img/common/icon_coupon.svg) no-repeat top center; width: 24px; height: 14px; background-size: contain; margin-right: 12px; } .bonus-section .bonus-content .bonus-attention { padding: 2rem 0 3rem; font-size: clamp(1.6rem, -1.2vw + 2.5204rem, 1.3rem); } .bonus-section .bonus-content .bonus-tagbox { width: 100%; text-align: center; } .bonus-section .bonus-content .bonus-tagbox .bonus-tag { width: 100%; max-width: 250px; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 2rem; background: linear-gradient(to bottom, #fff0f8, #ffe6f3); border: 2px solid #fe309e; border-radius: 999px; color: #fe309e; font-weight: bold; font-size: clamp(1.8rem, -1.2vw + 2.7204rem, 1.5rem); font-family: sans-serif; box-shadow: 4px 4px 0 #bacae4; cursor: pointer; margin: auto; } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-tagbox .bonus-tag { font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); max-width: 85%; padding: 2.5rem 2.5rem; } } /* ================================================== bonus ================================================== */ /*bonus*/ .bonus-section { padding: 6rem 0 10rem; position: relative; z-index: 20; background: url(../img/common/work_bg_center_pc.png) no-repeat top center; background-size: cover; } @media screen and (max-width: 786px) { .bonus-section { background: url(../img/common/work_bg_center_sp.png) no-repeat bottom left; padding: 4rem 0 17rem; } } .bonus-section::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: url(../img/common/work_bg_top_pc.png) no-repeat bottom center; background-size: contain; min-height: 80px; pointer-events: none; } .bonus-section .bonus-content { display: flex; flex-direction: column; align-items: center; padding: 0 2rem; /* @media screen and (max-width: $breakpoint-sp) { align-items: flex-end; } */ } .bonus-section .bonus-content .bonus-img { margin: auto; padding: 0 1rem 5rem; } .bonus-section .bonus-content .bonus-img img { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .bonus-section .bonus-content .bonus-buttonbox { text-align: center; width: 100%; } .bonus-section .bonus-content .bonus-buttonbox .bonus-button { width: 100%; max-width: 300px; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: linear-gradient(to bottom, #fe309e, #d30674); border: none; border-radius: 999px; color: white; font-weight: bold; font-size: clamp(2.1rem, -0.4vw + 2.4068rem, 2rem); box-shadow: 4px 4px 0 #bacae4; cursor: pointer; } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-buttonbox .bonus-button { font-size: clamp(2.5rem, -1.9vw + 3.9573rem, 2rem); max-width: 100%; padding: 2.5rem 2.5rem; } } .bonus-section .bonus-content .bonus-buttonbox .bonus-button.jp { font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem); } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-buttonbox .bonus-button.jp { font-size: clamp(2rem, 0vw + 2rem, 2rem); } } .bonus-section .bonus-content .bonus-buttonbox .bonus-button::before { content: ""; background: url(../img/common/icon_coupon.svg) no-repeat top center; width: 24px; height: 14px; background-size: contain; margin-right: 12px; } .bonus-section .bonus-content .bonus-attention { padding: 2rem 0 3rem; font-size: clamp(1.6rem, -1.2vw + 2.5204rem, 1.3rem); } .bonus-section .bonus-content .bonus-attention.jp { font-size: clamp(1.5rem, -0.8vw + 2.1136rem, 1.3rem); } .bonus-section .bonus-content .bonus-tagbox { width: 100%; text-align: center; } .bonus-section .bonus-content .bonus-tagbox .bonus-tag { width: 100%; max-width: 250px; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 1.8rem; background: linear-gradient(to bottom, #fff0f8, #ffe6f3); border: 2px solid #fe309e; border-radius: 999px; color: #fe309e; font-weight: bold; font-size: clamp(1.8rem, -1.2vw + 2.7204rem, 1.5rem); font-family: sans-serif; box-shadow: 4px 4px 0 #bacae4; cursor: pointer; margin: auto; } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-tagbox .bonus-tag { font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); max-width: 85%; padding: 2.5rem 2.5rem; } } .bonus-section .bonus-content .bonus-tagbox .bonus-tag.jp { font-size: clamp(1.2rem, 0.4vw + 0.8932rem, 1.3rem); } @media screen and (max-width: 786px) { .bonus-section .bonus-content .bonus-tagbox .bonus-tag.jp { font-size: clamp(1.5rem, 1.9vw + 0.0427rem, 2rem); } } /* ================================================== about ================================================== */ /*faq*/ .faq-section { position: relative; z-index: 30; background-size: cover; padding: 16rem 0 14rem; } .faq-section::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/work_bg_bottom_pc.png) no-repeat top center; background-size: contain; min-height: 80px; pointer-events: none; } @media screen and (max-width: 786px) { .faq-section::after { background: url(../img/common/work_bg_bottom_sp.png) no-repeat top center; } } .faq-section .faq-list { max-width: 800px; margin: 0 auto; padding: 2rem; max-width: 75rem; margin: auto; } .faq-section .faq-list li { font-size: clamp(1.5rem, -0.4vw + 1.8068rem, 1.4rem); line-height: 1.8; } .faq-section .faq-list li .red { color: #ff3a97; text-decoration: underline; } .faq-section .faq-list li:nth-child(2n+1) { font-weight: bold; } .faq-section .faq-list li:nth-child(2n) { padding-bottom: 2.5rem; } /* ================================================== about ================================================== */ /*sns*/ .sns-section { position: relative; z-index: 40; background: #cfd9e9; padding: 5rem 0 10rem; } .sns-section::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: url(../img/common/footer_bg_top_pc.png) no-repeat bottom center; background-size: contain; min-height: 80px; pointer-events: none; } @media screen and (max-width: 786px) { .sns-section::after { background: url(../img/common/footer_bg_top_sp.png) no-repeat bottom center; } } .sns-section.jp { padding: 8rem 0 10rem; } .sns-section .sns_logo { display: flex; justify-content: center; align-items: center; gap: 0 30px; } .sns-section .sns_logo_inner { width: 370px; } .sns-section .sns_logo_link { display: block; width: 146px; } @media screen and (max-width: 786px) { .sns-section .sns_logo { display: flex; justify-content: center; align-items: center; flex-flow: column; gap: 2.5rem 0; padding: 0 2rem; } .sns-section .sns_logo_inner { width: 100%; max-width: 370px; } .sns-section .sns_logo_link { display: block; width: 100%; max-width: 146px; } } .sns-section .sns_area { margin-top: min(16vw, 12rem); } .sns-section .sns_list { display: flex; justify-content: center; margin-top: 2.5rem; } .sns-section .sns_item { margin: 0 min(2.667vw, 1rem); width: clamp(4rem, 4vw, 4rem); }/*# sourceMappingURL=lp.css.map */