@charset "utf-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input[type=radio], input[type=checkbox]):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :focus-visible { outline: none; } /* ======================================= base ======================================= */ h1, h2, h3, h4, h5, h6, ul, ol, li, p, dl, dt, dd { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } html { font-size: 62.5%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } @media screen and (max-width: 750px) { html { font-size: 1.333vw; } } @media screen and (min-width: 751px) { html { font-size: 62.5%; } } html, body { -ms-scroll-chaining: none; overscroll-behavior: none; } a { color: var(--font_color); text-decoration: none; } img { height: auto; max-width: 100%; vertical-align: bottom; } strong { font-weight: 700; } :root { --font_color: #34304c; --strong_color: #333; --primary_color: #90000a; --secondary_color: #5a4398; --font-default: "Noto Sans JP", sans-serif; --font-Mincho: "Shippori Mincho", serif; } /* ======================================= layout ======================================= */ body { background: #fff; color: var(--font_color); font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif; font-size: 2.6rem; font-weight: 400; line-height: 1; margin: auto; width: 100%; } .wrapper { margin: -2.6rem auto 0; max-width: 2000px; overflow: hidden; padding-bottom: 12rem; position: relative; width: 100%; } .inner { margin: auto; max-width: 750px; width: 100%; } /* cta */ .cta__lead { margin-left: -0.6rem; width: 76.2rem; } .cta__box { background: url(../images/cta_bg_01.png) 0 / 100% auto repeat-y; margin: auto; padding-bottom: 1rem; width: 68rem; } .cta__detail { background: url(../images/cta_bg_02.jpg) 0 0 / 100% auto no-repeat #fff; margin: auto; padding: 3.6rem 0 3.5rem; width: 66rem; } .cta__course { margin: 0 0 0 auto; width: 43.2rem; } .cta__name { margin: 1.4rem 0 0 auto; width: 43.2rem; } .cta__spec { margin: 1.2rem 0 0 auto; width: 43.2rem; } .cta__price { margin: 1.6rem 0 0 auto; width: 48rem; } .cta__feature { margin: 1.8rem auto 0; width: 54.4rem; } @keyframes buttonZoom { 0% { transform: scale(0.9); } 100% { transform: scale(1); } } .cta__button { animation: buttonZoom 1s ease 0s infinite alternate; display: block; margin: 4rem auto 0; width: 63.6rem; } @media (hover: hover) { .cta__button:hover { opacity: 0.8; } } .cta__notes { font-size: 1.8rem; line-height: 1.67; margin: 2rem auto 0; width: 60.5rem; } .cta__notes-item { margin-left: 1em; text-indent: -1em; } .cta__notes-item::before { content: "・"; } /* kv */ .kv { background: url(../images/kv_bg.jpg) 50% 0 / 200rem auto no-repeat; padding: 4rem 0 6rem; } .logo { margin: 0 0 0 2.9rem; width: 9.4rem; } .kv__lead { margin: 3rem -5rem 0; width: 85rem; } .kv__catch { margin: -4rem -3rem 0; width: 81rem; } .kv__name { margin: 0 -3rem; width: 81rem; } .kv__notes { color: #fff; font-size: 1.6rem; line-height: 1.5; margin: -2.5rem auto 0; text-align: right; width: 68rem; } .cta--kv { margin-top: 5rem; } /* model-kv */ .model-kv { background: url(../images/model_kv_bg.jpg) 50% 0 / 200rem auto no-repeat; padding: 2.8rem 0 6rem; } .model-kv__logo { margin: 0 0 0 2.7rem; width: 9.4rem; } .model-kv__catch { margin-top: 1rem; } .model-kv__notes { color: #fff; font-size: 1.6rem; line-height: 1.5; margin: 1.5rem auto 0; text-align: right; width: 68rem; } .cta--model-kv { margin-top: 4.6rem; } /* award */ .award { background: url(../images/award_bg.jpg) 50% 0 / 200rem auto no-repeat; height: 103rem; padding: 7rem 0; } .award__lead { margin: 2.8rem auto 0; width: 33.6rem; } .award__result { margin: 27.5rem -3.3rem 0; width: 81.6rem; } .award__text { color: #333; font-weight: 700; letter-spacing: 0.08em; line-height: 1.538; margin: 2rem auto 0; text-align: center; width: 68rem; } .award__notes { font-size: 1.8rem; line-height: 1.67; margin: 2rem auto 0; text-align: center; width: 68rem; } /* feature */ .feature { background: url(../images/feature_bg.jpg) 50% 0 / 200rem auto no-repeat; padding: 7.8rem 0 6rem; } .video { background: url(../images/feature_video_bg.png) 0 / contain no-repeat; height: 33.8rem; margin: 3.4rem auto 0 6.5rem; position: relative; width: 33.8rem; } .video__main { border-radius: 50%; overflow: hidden; left: 1.6rem; height: 30.6rem; object-fit: cover; position: absolute; top: 1.6rem; width: 30.6rem; } .feature__text { margin: 1.5rem auto 0; width: 68rem; } .feature__summary { margin: 4.8rem auto 0; width: 68rem; } .feature__notes { font-size: 1.8rem; line-height: 1.67; margin-right: 3.5rem; text-align: right; } /* care */ .care { background: url(../images/care_bg.jpg) 50% 0 / 200rem auto no-repeat #90000a; min-height: 14.2rem; padding: 9.5rem 0 7rem; } .inner--care { padding: 0 3.5rem; } .care__title { background: url(../images/care_title_bg.png) 0 / contain no-repeat; color: var(--primary_color); font-size: 4.4rem; font-weight: 500; height: 10rem; line-height: 1.636; margin: auto; text-align: center; width: 41rem; } .care__list { height: 45.4rem; margin-top: 11.4rem; position: relative; } .care__item { position: absolute; width: 22rem; } .care__item--01 { left: 6.8rem; top: 0; } .care__item--02 { right: 6.8rem; top: 0; } .care__item--03 { bottom: 0; left: 1.7rem; } .care__item--04 { bottom: 0; right: 1.7rem; } .easy { margin-top: 16.3rem; } .easy__title { margin: auto; width: 44.4rem; } .easy__lead { margin: 1.6rem auto 0; width: 44.6rem; } .easy__catch { margin-top: 1.6rem; } .easy__notes { color: #fff; font-size: 1.6rem; line-height: 1.5; margin-top: 2.4rem; text-align: right; } /* ageless */ .ageless { background: url(../images/ageless_bg.jpg) 50% 0 / 200rem auto no-repeat; height: 67.8rem; padding: 11.8rem 0 0; } .ageless__text { margin: 0 8.9rem 0 auto; width: 20.4rem; } /* sign */ .sign { background: url(../images/sign_bg_01.jpg) 50% 0 / 200rem auto no-repeat, url(../images/sign_bg_02.jpg) 50% 100% / 200rem auto no-repeat; } .sign__top { height: 111.8rem; padding: 10.9rem 0 0; } .sign__title { margin: auto; width: 63rem; } .sign__list { height: 66.7rem; margin-top: 1.2rem; position: relative; } .sign__item { position: absolute; width: 11rem; } .sign__item--01 { right: 20.9rem; top: 1.9rem; } .sign__item--02 { right: 5.6rem; top: 20.8rem; } .sign__item--03 { bottom: 0.9rem; right: 32.4rem; } .sign__lead { margin: 4rem auto 0; width: 46rem; } .sign__text { font-size: 3.2rem; letter-spacing: 0.08em; line-height: 1; margin-top: 1.2rem; text-align: center; } .cause { background: url(../images/cause_bg.png) 0 100% / 100% auto no-repeat; height: 99rem; margin: auto; padding: 4rem 0 0; width: 69.2rem; } .cause__title { margin: auto; width: 54rem; } .aging { height: 60.4rem; margin: -1.5rem auto 0; position: relative; width: 63.4rem; } .aging__item { align-items: center; display: flex; height: 35rem; justify-content: center; padding: 1.7rem; position: absolute; width: 35rem; } .aging__item--01 { left: 50%; padding-bottom: 3.7rem; top: 0; transform: translateX(-50%); } .aging__item--02 { bottom: 0; left: 0; padding-top: 2.7rem; } .aging__item--03 { bottom: 0; right: 0; padding-top: 2.7rem; } .aging__text { color: #fff; font-weight: 300; line-height: 1.615; text-align: center; } .cause__lead { letter-spacing: 0.08em; line-height: 2; margin-top: 1.5rem; text-align: center; } .cause__catch { margin: 1rem auto 0; width: 35.2rem; } .develop { min-height: 144.5rem; padding: 7.8rem 0 5.5rem; } .worries { display: flex; gap: 0.8rem; justify-content: center; } .worries__item { background: #fff; text-align: center; transform: skew(-15deg); } .worries__text { color: #7e5597; font-size: 4rem; font-weight: 500; line-height: 1.575; position: relative; transform: skew(15deg); } .worries__sup { color: var(--secondary_color); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.06em; position: absolute; right: 0.2rem; top: 0.2rem; } .worries__item--01, .worries__item--02 { width: 21rem; } .worries__item--03 { width: 24rem; } .develop__lead { color: #fff; font-size: 4rem; margin-top: 2.2rem; text-align: center; text-shadow: 0.3rem 0.3rem 3rem rgba(87, 20, 128, 0.6), -0.3rem -0.3rem 3rem rgba(87, 20, 128, 0.6), 0.3rem -0.3rem 3rem rgba(87, 20, 128, 0.6), -0.3rem 0.3rem 3rem rgba(87, 20, 128, 0.6); } .develop__title { margin: -0.8rem -1.5rem 0; width: 78rem; } .develop__deco { margin: 34.5rem auto 0 8rem; width: 18rem; } .develop__catch { margin: -1.2rem auto 0; width: 56.2rem; } .develop__notes { color: var(--secondary_color); font-size: 1.6rem; line-height: 1.5; margin: 3rem auto 0; text-align: right; width: 62rem; } /*difference*/ .difference { background: url(../images/difference_bg.jpg) 50% 0 / 200rem auto no-repeat #e6eafb; } .inner--difference { padding: 5rem 0 8.2rem; } .difference__title { margin: 0 7rem 0 auto; width: 50rem; } /*point01*/ .point01 { margin-top: 20.8rem; } .point01__num { margin: 0 auto 0 3.5rem; width: 20rem; } .point01__title { margin: 4.5rem auto 0 3.5rem; width: 69rem; } .point01__notes01 { color: #3c5790; font-size: 1.8rem; line-height: 1.5; margin: 0.5rem auto 0 4.5rem; width: 69rem; } .point01__lead { background: linear-gradient(90deg, #c1a1d7 0%, #0f0944 100%); color: #fff; font-family: var(--font-Mincho); font-size: 3rem; font-weight: 600; letter-spacing: 0.015em; line-height: 1.633; margin: 3.5rem auto 0 4.5rem; text-align: center; width: 33.5rem; } .point01__text { line-height: 2; margin: 2.6rem auto 0; width: 66rem; } .point01__text-em { text-decoration: underline; text-decoration-color: #fffc8d; text-decoration-skip-ink: none; text-decoration-thickness: 1.1rem; text-underline-offset: -0.2em; } .point01__notes02 { color: var(--secondary_color); font-size: 1.6rem; line-height: 1.5; margin: 1rem auto 0; width: 66rem; } .ingredients { margin-top: 5rem; } .ingredients__title { margin: auto; width: 68rem; } .ingredients__list { display: flex; flex-wrap: wrap; gap: 2rem 1.8rem; justify-content: center; margin-top: 4.5rem; } .ingredients__item { align-items: center; background: 0 0 / contain no-repeat; border-radius: 50%; display: flex; height: 20.8rem; justify-self: center; position: relative; text-align: center; width: 20.8rem; } .ingredients__item::before { background: url(../images/ingredients_deco.png) 0 0 / contain no-repeat; border-radius: 50%; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .ingredients__item--01 { background-image: url(../images/ingredients_bg_01.jpg); } .ingredients__item--02 { background-image: url(../images/ingredients_bg_02.jpg); } .ingredients__item--03 { background-image: url(../images/ingredients_bg_03.jpg); } .ingredients__item--04 { background-image: url(../images/ingredients_bg_04.jpg); } .ingredients__item--05 { background-image: url(../images/ingredients_bg_05.jpg); } .ingredients__item--06 { background-image: url(../images/ingredients_bg_06.jpg); } .ingredients__item--07 { background-image: url(../images/ingredients_bg_07.jpg); } .ingredients__item--08 { background-image: url(../images/ingredients_bg_08.jpg); } .ingredients__item--09 { background-image: url(../images/ingredients_bg_09.jpg); } .ingredients__item--10 { background-image: url(../images/ingredients_bg_10.jpg); } .ingredients__item--11 { background-image: url(../images/ingredients_bg_11.jpg); } .ingredients__label { color: #fff; font-size: 2.4rem; line-height: 1.375; position: relative; text-shadow: 0.6rem 0.6rem 3rem rgba(51, 51, 51, 0.8), -0.6rem -0.6rem 3rem rgba(51, 51, 51, 0.8), 0.6rem -0.6rem 3rem rgba(51, 51, 51, 0.8), -0.6rem 0.6rem 3rem rgba(51, 51, 51, 0.8); width: 100%; z-index: 1; } .direct { background-color: #fff; background-image: linear-gradient(#f4f3f3 1px, transparent 0), linear-gradient(90deg, #f4f3f3 1px, transparent 0); background-position: 50% 50%; background-repeat: repeat; background-size: 1.4rem 1.4rem; box-shadow: 1rem 1rem 1rem rgba(90, 67, 152, 0.3); margin: 6.5rem auto 0; padding-bottom: 2rem; width: 65rem; } .compare { display: flex; flex-wrap: wrap; gap: 2.5rem 3.5rem; justify-content: center; margin: -2.8rem auto 0; position: relative; width: 56rem; } .compare::after { background: url(../images/direct_line.png) 50% 50% / cover no-repeat; content: ""; display: block; height: 18.7rem; left: 21rem; position: absolute; top: 25.5rem; width: 14.6rem; } .compare__item { position: relative; width: 21.4rem; } .compare__item::after { background: var(--secondary_color); bottom: -1.5rem; content: ""; display: block; height: 2.2rem; left: 50%; position: absolute; width: 1px; } .compare__title { align-items: center; border-radius: 4.4rem; display: flex; height: 8.8rem; justify-content: center; text-align: center; width: 100%; } .compare__title--popular { background: #c7c7c7; color: #4d4d4d; font-size: 2.4rem; letter-spacing: 0.02em; line-height: 1.25; } .compare__title--sb-white { background: #e6ebfb; color: var(--secondary_color); font-family: var(--font-Mincho); font-size: 2.8rem; font-weight: 700; line-height: 1.178; } .compare__sup { font-size: 58.3%; vertical-align: super; } .compare__image { margin-top: 2rem; } .compare__image--popular { margin-left: 4.8rem; width: 12rem; } .compare__image--sb-white { margin-left: 5rem; width: 13rem; } .compare__text { color: var(--secondary_color); font-family: var(--font-Mincho); font-size: 3rem; font-weight: 700; letter-spacing: -0.1em; text-align: center; } .direct__notes { color: #808080; font-size: 2rem; letter-spacing: 0.04em; margin: 2rem auto 0; text-align: right; width: 61rem; } /*point02*/ .point02__top { background: url(../images/point02_bg.jpg) 50% 0 / 200rem auto no-repeat #fff; padding: 25rem 0 9rem; } .point02__num { margin: auto; width: 20rem; } .point02__catch { margin-top: 3rem; } .effect__cards { display: flex; gap: 2rem; justify-content: center; } .effect__image { border-radius: 2rem; height: 25rem; overflow: hidden; position: relative; width: 32rem; } .effect__caption { bottom: 0; left: 0; position: absolute; } .effect__text { color: #34304c; font-size: 2.6rem; line-height: 2; margin: 4rem auto 0; width: 66rem; } .effect__sup { font-size: 58.3%; vertical-align: super; } .effect__notes { color: #34304c; font-size: 1.8rem; line-height: 1.5; margin: 3.6rem auto 0; text-align: right; width: 66rem; } .effect--01 { padding-top: 1rem; position: relative; } .effect01__title { margin-left: 4.5rem; width: 29rem; } .diagram { position: absolute; right: 4.5rem; top: 0; width: 33.6rem; } .diagram__image { bottom: 2.8rem; position: absolute; right: 0; width: 30.8rem; } .diagram__text { position: relative; z-index: 1; } .effect--01 .effect__cards { margin-top: 5.5rem; } .effect--02 { background: #e6ebfb; padding: 6.6rem 0 4.5rem; } .effect--02 .effect__cards { margin-top: 4.6rem; } .effect--03 { background: url(../images/effect03_bg.jpg) 50% 0/ 200rem auto no-repeat #fff; padding: 7.5rem 0 3.5rem; } .effect03__graph { margin: 2.5rem auto 0; width: 66rem; } .effect--03 .effect__text { margin-top: 5.5rem; } /*point03*/ .point03 { background: url(../images/point03_bg.jpg) 50% 0 / 200rem auto no-repeat; height: 130rem; padding-top: 20.5rem; } .point03__num { margin: auto; width: 20rem; } .point03__title { margin: 0.4rem auto 0; width: 66.6rem; } .point03__list { height: 60.7rem; margin-top: -0.3rem; position: relative; } .point03__item { position: absolute; width: 20rem; } .point03__item--01 { left: 10.6rem; top: 0; } .point03__item--02 { right: 10.5rem; top: 0; } .point03__item--03 { left: 3.6rem; top: 20.3rem; } .point03__item--04 { right: 3.5rem; top: 20.3rem; } .point03__item--05 { left: 10.6rem; top: 40.7rem; } .point03__item--06 { right: 10.5rem; top: 40.7rem; } /*beautiful*/ .beautiful { background: url(../images/beautiful_bg.jpg) 50% 0 / 200rem auto no-repeat; } .inner--beautiful { height: 82rem; position: relative; } .beautiful_lead { margin: auto; width: 22.6rem; } .beautiful_text { margin: 1rem 5rem 0 auto; width: 21rem; } .beautiful_catch { left: 6rem; position: absolute; top: 32.4rem; width: 8.4rem; } /*howto*/ .howto__wrap { background: url(../images/howto_bg.jpg) 50% 0 / 200rem auto no-repeat #8b77b6; } .howto__main { height: 141.3rem; padding-top: 10.6rem; } .howto__title { margin: auto; width: 29rem; } .howto__image-area { margin-top: 4.8rem; position: relative; } .howto__image { border-radius: 5rem; box-shadow: 2rem 2rem 0 rgba(105, 0, 127, 0.2); margin-left: 4.4rem; overflow: hidden; width: 66rem; } .howto__dropper { left: 48.4rem; position: absolute; top: 9.8rem; width: 27.1rem; } .howto__text { line-height: 2; margin: 6rem auto 0; width: 61.7rem; } .recommend { align-items: center; background: #fff; border-radius: 5rem; display: flex; gap: 2.5rem; justify-content: center; margin: 4rem auto 0; padding: 4.4rem 4rem 4.6rem; width: 66rem; } .recommend__image { width: 24rem; } .recommend__content { max-width: 33rem; } .recommend__title { margin: auto; width: 24rem; } .recommend__text { line-height: 1.538; margin-top: 2rem; text-align: center; } /*voice*/ .voice { background: url(../images/voice_bg.jpg) 50% 100% / 200rem auto no-repeat; padding: 11.5rem 0 41.5rem; } .voice__title { margin: 0 auto 0 3.5rem; width: 43rem; } .voice__summary { margin: 6.6rem auto 0; width: 63.6rem; } .voice__list { display: flex; flex-direction: column; gap: 6.6rem; margin: 8rem auto 0; width: 64.5rem; } .voice__item { width: 60rem; } .voice__num { width: 22rem; } .voice-card { background: #fff; border-radius: 2rem; box-shadow: 0.3rem 0.3rem 3rem rgba(87, 20, 128, 0.1), -0.3rem -0.3rem 3rem rgba(87, 20, 128, 0.1), 0.3rem -0.3rem 3rem rgba(87, 20, 128, 0.1), -0.3rem 0.3rem 3rem rgba(87, 20, 128, 0.1); padding: 2rem 3.5rem 4.5rem; position: relative; } .voice-card__header { border-bottom: 1px solid #504c72; padding-bottom: 1px; } .voice-card__lead, .voice-card__name { width: 28rem; } .voice-card__name { margin-top: 2.2rem; } .voice-card__avatar { border-radius: 50%; box-shadow: 0.5rem 0.5rem 0.5rem rgba(130, 62, 147, 0.2); overflow: hidden; position: absolute; top: -2.6rem; width: 26rem; } .voice-card__age { position: absolute; top: 10.5rem; width: 13rem; } .voice-card__text { line-height: 1.769; margin: 4.5rem auto 0; width: 50.4rem; } .voice-card__mark { background: #fffc8d; font-weight: 700; } .voice__item:nth-child(2n+1) .voice__num { margin: 0 auto 0 3.5rem; } .voice__item:nth-child(2n+1) .voice-card__avatar { right: -5rem; } .voice__item:nth-child(2n+1) .voice-card__age { right: 16.5rem; } .voice__item:nth-child(2n) { margin-left: auto; } .voice__item:nth-child(2n) .voice__num { margin: 0 3.5rem 0 auto; } .voice__item:nth-child(2n) .voice-card__lead, .voice__item:nth-child(2n) .voice-card__name { margin-left: auto; } .voice__item:nth-child(2n) .voice-card__avatar { left: -5rem; } .voice__item:nth-child(2n) .voice-card__age { left: 16.5rem; } .voice__notes { color: #fff; font-size: 2rem; line-height: 1.5; margin: 2.5rem auto 0; text-align: right; width: 68rem; } /*qa*/ .qa { background: url(../images/qa_bg.jpg) 50% 154rem / 200rem auto no-repeat; margin-top: -21rem; padding-bottom: 9.5rem; } .qa__title { margin: auto; width: 24rem; } .qa__list { display: flex; flex-direction: column; gap: 5rem; margin: 5rem auto 0; width: 66rem; } .qa__question { align-items: center; background: linear-gradient(90deg, #8880cd 0%, #643184 100%); border-radius: 6rem; color: #fff; display: flex; font-family: var(--font-Mincho); font-size: 3.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.111; min-height: 12rem; padding: 1.5rem 2.5rem 1.5rem 10rem; position: relative; } .qa__question::before { content: ""; background: url(../images/qa_question.png) 0 0 / contain no-repeat; display: block; height: 5.4rem; left: 3.5rem; position: absolute; top: 50%; transform: translateY(-50%); width: 5.4rem; } .qa__answer { display: grid; gap: 1.5rem; grid-template-columns: 5.4rem 54rem; line-height: 1.69; padding: 3.5rem 0 0 3rem; } .qa__answer::before { content: ""; background: url(../images/qa_answer.png) 0 0 / contain no-repeat; display: block; height: 4.4rem; width: 5.4rem; } .description { background: #f2ebf3; border-radius: 2rem; font-size: 2rem; line-height: 2; margin: 9.5rem auto 0; padding: 5rem; width: 69rem; } .description p + p { margin-top: 2em; } .cta--qa { margin-top: 9rem; } .sticky { background: linear-gradient(90deg, #e7af26 65%, #c96521 100%); bottom: 0; display: none; left: 0; position: fixed; width: 100%; z-index: 100; } .inner--sticky { display: flex; justify-content: flex-end; } .sticky__text { width: 30.8rem; } .sticky__button { margin-top: 0.9rem; width: 42.6rem; } @media (hover: hover) { .sticky__button:hover { opacity: 0.8; } }