@charset "UTF-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.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" attribute is exclud, because 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):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 { -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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; -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 rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove default margin in favour of better control in authored CSS */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role=list], ol[role=list] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.7; margin: 0; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; font-weight: 400; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; color: currentColor; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } :root { --white: #fff; --pink: #FF6490; --blue: #003E97; --sl-pink: #DF007E; --sl-green: #5DBECD; --sl-grey: #F0F0F0; --sl-text: #333; --box-shadow: 0 0 5px 1px rgba(51,51,51,0.3); --rounded: 1rem; --rounded-xl: 2rem; --font-light: 300; --font-md: 1.45rem; --font-lg: 1.75rem; --font-lgp: 1.75rem; --font-xl: 2.1rem; --font-xlp: 2.6rem; --font-2xl: 3.9rem; --font-3xl: 4.4rem; --font-4xl: 5.75rem; --font-5xl: 8rem; --tracking-wide: 0.1em; --tracking-wider: 0.2em; --tracking-widest: 0.3em; --text-light: 300; --text-thin: 100; --grid-column: 8; --grid-inner-column: 2 / span 6; --font-en: "Century Gothic", "Futura", "Roboto", sans-serif; --section-margin: 0 auto 10rem; --intra-section-spacing: 2.5rem; --numbering-size: 3.5rem; --numbering-padding: 0.6rem; --slider-btn-wrapper-width: 5rem; --slide-height: 460px; --popin-delay: 175ms; } @media screen and (max-width: 1280px) { :root { --font-md: 1.5rem; --font-lg: 1.75rem; --font-lgp: 1.75rem; --font-xl: 1.8rem; --font-xlp: 2.5rem; --font-2xl: 3.25rem; --font-3xl: 4rem; --font-4xl: 5rem; --font-5xl: 6rem; --numbering-size: 2.75rem; --slide-height: 380px; } } @media screen and (max-width: 767px) { :root { --font-md: 1.25rem; --font-lg: 1.3rem; --font-lgp: 1.4rem; --font-xl: 1.5rem; --font-xlp: 2.6rem; --slide-height: 500px; --numbering-size: 1.5rem; --section-margin: 0 auto 10rem; } } .en { font-family: var(--font-en); } .floating { position: fixed; } .abs { position: absolute; } .flex { display: flex; } .top-0 { top: 0; } .left-0 { left: 0; } .bottom-0 { bottom: 0; } .right-0 { right: 0; } .x--50 { transform: translateX(-50%); } .z-90 { z-index: 90; } .text-4xl { font-size: var(--font-4xl); } .text-2xl { font-size: var(--font-2xl); } .text-xl { font-size: var(--font-xl); } .text-lg { font-size: var(--font-lg); } .text-mid { font-size: var(--font-md); } .text-white { color: var(--white); } .text-pink { color: var(--sl-pink); } .text-green { color: var(--sl-green); } .text-blue { color: var(--blue); } .text-thin { font-weight: var(--text-thin); } .text-light { font-weight: var(--text-light); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } .bg-pink { background-color: var(--sl-pink); } .bg-pink-grad { background: rgb(223, 0, 126); background: linear-gradient(65deg, rgb(223, 0, 126) 0%, rgb(229, 70, 150) 150%); } .bg-green { background-color: var(--sl-green); } .bg-white { background-color: var(--white); } .bg-grey { background-color: var(--sl-grey); } .wide { grid-column: span var(--grid-column); } .swiper-btn-wrapper { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: var(--sl-grey); padding: 2.5% 5%; z-index: 10; display: flex; gap: 0.8rem; } @media screen and (max-width: 767px) { .swiper-btn-wrapper { position: static; transform: none; margin-top: 3rem; margin-left: auto; width: -moz-fit-content; width: fit-content; } } .swiper-button-next, .swiper-button-prev { transform: none; background-color: var(--sl-green); color: var(--white); border-radius: 100%; padding: 0; position: relative; top: unset; bottom: unset; left: unset; right: unset; width: 45px; height: 45px; } .swiper-button-next:after, .swiper-button-prev:after { content: url("../slide-arrow-next.svg"); height: 12px; width: 10px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); line-height: 0; font-size: 100%; } .swiper-button-next:not(.swiper-button-next):after, .swiper-button-prev:not(.swiper-button-next):after { transform: translate(-65%, -50%) rotate(180deg); } a { transition: opacity 200ms ease; } a:hover { opacity: 0.7; } .popin { transform: translate3d(0, 25%, 0); opacity: 0; transition-property: transform, opacity; transition-duration: 1250ms; transition-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1.05); transition-timing-function: ease; } .popin.appear { transform: translate3d(0, 0, 0); opacity: 1; } .popin.delay1 { transition-delay: calc(var(--popin-delay) * 1); } .popin.delay2 { transition-delay: calc(var(--popin-delay) * 2); } .popin.delay3 { transition-delay: calc(var(--popin-delay) * 3); } .popin.delay4 { transition-delay: calc(var(--popin-delay) * 4); } .popin.delay5 { transition-delay: calc(var(--popin-delay) * 5); } .popin.delay6 { transition-delay: calc(var(--popin-delay) * 6); } .popin.delay7 { transition-delay: calc(var(--popin-delay) * 7); } .popin.delay8 { transition-delay: calc(var(--popin-delay) * 8); } .popin.delay9 { transition-delay: calc(var(--popin-delay) * 9); } .popin.fast { transition-duration: 750ms; } .modaal-wrapper .modaal-close { background-color: var(--sl-pink); } .modaal-wrapper .modaal-close:active, .modaal-wrapper .modaal-close:hover { background-color: var(--white); } .modaal-inner-wrapper { padding-left: 2.5%; padding-right: 2.5%; } html { font-family: "Noto Sans JP", noto-sans, sans-serif; font-size: 15px; color: var(--sl-text); } @media screen and (max-width: 1440px) { html { font-size: 13px; } } body { counter-reset: tsuyomi 0; } nav.nav a { display: block; height: 100%; width: -moz-fit-content; width: fit-content; padding: 2rem 3.5rem; background-color: white; } @media screen and (max-width: 767px) { nav.nav a { padding: 5%; } } h2 { grid-column: 1/span var(--grid-column); font-size: var(--font-lg); font-weight: var(--font-light); letter-spacing: var(--tracking-wider); position: relative; margin-bottom: 1rem; } @media screen and (max-width: 1440px) { h2 { margin-left: 15%; } } @media screen and (max-width: 767px) { h2 { line-height: 2; margin-left: 17%; margin-left: 0; text-align: center; font-size: calc(var(--font-xl) * 1.25); font-size: 5.7291666667vw; margin-top: 6rem; margin-bottom: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--sl-grey); } } h2:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: var(--sl-green); -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media screen and (max-width: 767px) { h2:after { display: none; } } h2 span { padding-top: 0.6rem; padding-bottom: 0.6rem; display: inline-block; } h2 span br { display: none; } @media screen and (max-width: 767px) { h2 span { padding-top: 0; padding-bottom: 0; } h2 span br { display: block; } } h2 .bg-green { padding-left: 0.66rem; padding-right: 0.66rem; } h2 .bg-green + span { padding-left: 0.25rem; } @media screen and (max-width: 767px) { h2 .bg-green { padding-top: 0; padding-bottom: 0; line-height: 1.7; } } h2 .numbering_wrapper { position: absolute; z-index: 0; left: calc(-3 * var(--numbering-size)); top: calc(-1 * var(--numbering-size)); padding: var(--numbering-size); } @media screen and (max-width: 767px) { h2 .numbering_wrapper { top: -5.5rem; left: 50%; transform: translateX(-50%); } } h2 .numbering_wrapper:before, h2 .numbering_wrapper:after { padding: var(--numbering-size); background-color: white; position: absolute; content: ""; left: 0; top: 0; } h2 .numbering_wrapper:before { box-shadow: 0 0 0 2px var(--sl-pink); z-index: 10; } @media screen and (max-width: 767px) { h2 .numbering_wrapper:before { box-shadow: 0 0 0 1px var(--sl-pink); } } h2 .numbering_wrapper:after { transform: translate(1rem, 1rem); box-shadow: 0 0 0 2px var(--sl-green); z-index: 0; } @media screen and (max-width: 767px) { h2 .numbering_wrapper:after { box-shadow: 0 0 0 1px var(--sl-green); } } h2 .numbering { position: relative; counter-increment: tsuyomi; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 1px; width: 1px; } h2 .numbering:after { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; content: counter(tsuyomi); font-family: var(--font-en); color: var(--sl-pink); font-size: var(--font-4xl); } @media screen and (max-width: 1280px) { h2 .numbering:after { font-size: var(--font-2xl); } } @media screen and (max-width: 767px) { h2 .numbering:after { font-size: var(--font-lg); } } .section-wrapper { position: relative; z-index: 10; width: 100%; background-color: var(--white); padding: 1px 0; } .section-wrapper.footer-wrapper { overflow: hidden; } section { grid-template-columns: repeat(var(--grid-column), 1fr); display: grid; gap: 1%; position: relative; z-index: 10; margin: var(--section-margin); width: 100%; max-width: 1100px; } @media screen and (max-width: 1440px) { section { padding-left: 2.5%; padding-right: 2.5%; } } section .bodytext { grid-column: 1/span var(--grid-column); font-size: var(--font-md); font-weight: var(--font-light); letter-spacing: var(--tracking-wider); position: relative; margin-bottom: 2rem; } @media screen and (max-width: 1440px) { section .bodytext { margin-left: 15%; } } @media screen and (max-width: 767px) { section .bodytext { margin-left: 0; } section .bodytext br { display: none; } } header { width: 100%; position: absolute !important; } header svg { height: 3.75rem; } @media screen and (max-width: 1280px) { header svg { height: 3rem; } } .cta-floating { left: 50%; bottom: 1rem; width: 100%; transition: bottom 200ms ease; } .cta-floating.end { bottom: 2rem; } .cta-floating .cta-btn-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2%; max-width: 50rem; justify-items: center; margin-left: auto; margin-right: auto; } .cta-floating .cta-btn-wrapper .sp { display: none; } @media (max-width: 800px) { .cta-floating .cta-btn-wrapper { max-width: 90%; } } @media screen and (max-width: 767px) { .cta-floating .cta-btn-wrapper { max-width: 95%; gap: 1%; grid-template-columns: 1fr; } .cta-floating .cta-btn-wrapper .btn { display: none; } .cta-floating .cta-btn-wrapper .btn.sp { display: flex; } } .cta-floating .btn { display: flex; gap: 7.5%; background-color: red; width: 100%; overflow: hidden; padding: 3% 10% 3% 7.5%; border-radius: var(--rounded); background: rgb(223, 0, 126); background: linear-gradient(65deg, rgb(223, 0, 126) 0%, rgb(229, 70, 150) 150%); align-items: center; justify-content: space-around; box-shadow: var(--box-shadow); } @media screen and (max-width: 767px) { .cta-floating .btn { padding: 4% 9% 5% 6%; border-radius: 10rem; gap: 5%; padding-right: 11%; } } @media screen and (max-width: 767px) { .cta-floating .btn.phone-btn { gap: 4%; } } .cta-floating .btn .icon { height: 3.5rem; width: 3.5rem; min-height: 3.5rem; min-width: 3.5rem; } @media screen and (max-width: 767px) { .cta-floating .btn .icon { width: auto; min-height: 13vw; } } .cta-floating .btn .text { height: 90%; width: auto; } @media screen and (max-width: 767px) { .cta-floating .btn .text { height: 90%; } } .mv { grid-template-columns: repeat(12, 1fr); padding: 1%; padding-right: 0; max-width: 100%; position: relative; z-index: 10; align-items: center; } @media screen and (max-width: 1440px) { .mv { padding: 0; } } @media screen and (max-width: 1280px) { .mv { padding-top: 0; } } @media screen and (max-width: 767px) { .mv { row-gap: 2rem; padding-top: 2.5rem; margin-bottom: 5rem; } } .mv-text-wrapper { grid-column: 1/span 5; position: relative; z-index: 10; padding-left: 10%; } @media screen and (max-width: 767px) { .mv-text-wrapper { grid-column: 1/span 12; padding-left: 5%; margin-top: 5rem; } .mv-text-wrapper.delay4 { transition-delay: 0s !important; } } .mv-text-wrapper h1 { line-height: 1.4; margin-bottom: 1.25rem; font-size: var(--font-3xl); font-size: 3.3333333333vw; } @media screen and (max-width: 1280px) { .mv-text-wrapper h1 { font-size: 3.6458333333vw; } } @media screen and (max-width: 767px) { .mv-text-wrapper h1 { font-size: 9.1145833333vw; line-height: 1.55; } } .mv-text-wrapper div { width: -moz-fit-content; width: fit-content; margin-bottom: 1rem; padding: 0.25% 3.25%; } @media screen and (max-width: 1440px) { .mv-text-wrapper div { font-size: 140%; font-size: 1.5277777778vw; } } @media screen and (max-width: 767px) { .mv-text-wrapper div { font-size: 140%; } } .mv-image-grid-wrapper { grid-column: 6/span 7; display: grid; grid-template-columns: 6; grid-template-rows: 2; gap: 1%; position: relative; z-index: 10; min-height: 70vh; padding-right: 1vw; } @media screen and (max-width: 900px) { .mv-image-grid-wrapper { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); align-content: center; row-gap: 0%; padding-right: 0; } } @media screen and (max-width: 767px) { .mv-image-grid-wrapper { min-height: unset; grid-column: 1/span 12; grid-template-columns: repeat(12, 1fr); gap: 0; max-width: 435px; margin-left: auto; width: 100%; transition-delay: calc(var(--popin-delay) * 4) !important; } } .mv-image-grid-wrapper:before { width: 85%; height: 70%; content: ""; z-index: 0; background-color: var(--sl-grey); position: absolute; bottom: -12%; right: 0; animation-name: boxFadeIn; animation-duration: 4000ms; animation-timing-function: ease; animation-fill-mode: both; animation-iteration-count: 1; } @media screen and (max-width: 767px) { .mv-image-grid-wrapper:before { bottom: 25%; height: 50%; } } .mv-image-grid-wrapper picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: relative; } @media screen and (max-width: 900px) { .mv-image-grid-wrapper picture { height: 30vh; } } @media screen and (max-width: 767px) { .mv-image-grid-wrapper picture { height: 155px; } } .mv-image-grid-wrapper picture:nth-of-type(1) { grid-column: 1/span 2; grid-row: 1/span 2; padding: 15% 0; } @media screen and (max-width: 900px) { .mv-image-grid-wrapper picture:nth-of-type(1) { padding: 0; grid-row: 1; grid-column: 1; } } @media screen and (max-width: 767px) { .mv-image-grid-wrapper picture:nth-of-type(1) { grid-column: 3/span 10; } } .mv-image-grid-wrapper picture:nth-of-type(2) { grid-column: 3/span 3; } @media screen and (max-width: 900px) { .mv-image-grid-wrapper picture:nth-of-type(2) { grid-row: 2; grid-column: 1; } } @media screen and (max-width: 767px) { .mv-image-grid-wrapper picture:nth-of-type(2) { grid-column: 2/span 10; padding-left: 0; } } .mv-image-grid-wrapper picture:nth-of-type(3) { grid-column: 3/span 3; grid-row: 2; } @media screen and (max-width: 900px) { .mv-image-grid-wrapper picture:nth-of-type(3) { grid-row: 3; grid-column: 1; } } @media screen and (max-width: 767px) { .mv-image-grid-wrapper picture:nth-of-type(3) { grid-column: 4/span 10; } } .mv-image-grid-wrapper picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .header-box { grid-column: 1/span var(--grid-column); justify-self: center; text-align: center; font-size: var(--font-xlp); width: 90%; max-width: 800px; } @media screen and (max-width: 767px) { .header-box { width: 95%; font-size: var(--font-xl); font-size: 5.2083333333vw; } } .str-1 { counter-reset: str-item 0; } .str-1 .header-box { box-shadow: 0 0 0 2px var(--sl-pink); padding: 1.5% 2%; margin-bottom: 6rem; } @media screen and (max-width: 767px) { .str-1 .header-box { box-shadow: 0 0 0 1px var(--sl-pink); margin-bottom: 3.5rem; } } .str-1 .str-item { counter-increment: str-item; grid-column-start: span 4; position: relative; box-shadow: var(--box-shadow); padding-top: 1rem; } @media screen and (max-width: 767px) { .str-1 .str-item { grid-column-start: span var(--grid-column); } } .str-1 .str-item:before { position: absolute; content: "0" counter(str-item); font-family: var(--font-en); color: var(--sl-green); font-size: var(--font-2xl); left: 1.5rem; top: 1rem; line-height: 1; } .str-1 .str-item .img-wrapper { position: relative; padding: 1rem 1rem 0; } .str-1 .str-item .img-wrapper .abs { top: 1rem; right: 0; padding: 0 1rem; z-index: 0; scale: 0.85; } @media screen and (max-width: 1440px) { .str-1 .str-item .img-wrapper .abs.fuki1 { right: -2.5%; width: 70%; } .str-1 .str-item .img-wrapper .abs.fuki2 { right: -5%; width: 85%; } } .str-1 .str-item .img-wrapper .base { position: relative; z-index: 10; } .str-1 .str-item h3 { color: var(--white); background-color: var(--sl-green); letter-spacing: var(--tracking-wider); font-size: var(--font-lg); font-size: 1.45rem; font-weight: var(--font-light); text-align: center; padding: 0.5rem 2.5%; line-height: 1.4; height: auto; display: flex; height: 6rem; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .str-1 .str-item h3 { font-size: calc(var(--font-lgp) * 0.95); } } .str-1 .wide { background-color: var(--pink); display: grid; grid-template-columns: repeat(2, 1fr); box-shadow: var(--box-shadow); position: relative; margin-top: var(--intra-section-spacing); } .str-1 .wide .cross-wrapper { position: absolute; height: 0; width: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; } .str-1 .wide .cross-wrapper:before, .str-1 .wide .cross-wrapper:after { height: 4rem; width: 2px; background-color: var(--white); left: 50%; top: 50%; content: ""; position: absolute; z-index: 20; } .str-1 .wide .cross-wrapper:before { transform: translate(-50%, -50%) skew(55deg); } .str-1 .wide .cross-wrapper:after { transform: translate(-50%, -50%) skew(-55deg); } .str-1 .wide .pharm-wrapper-sp { position: absolute; z-index: 10; width: 100%; height: 100%; overflow: hidden; background-color: #EA497F; } @media screen and (max-width: 767px) { .str-1 .wide { gap: 0; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); margin: 2rem 0 1.7rem; padding: 5rem 0; } .str-1 .wide .pharm-wrapper-sp:after { top: 0; } .str-1 .wide .pharm-wrapper-sp:before { top: 205%; } .str-1 .wide .pharm-wrapper-sp:before, .str-1 .wide .pharm-wrapper-sp:after { z-index: -10; position: absolute; left: 50%; content: ""; display: block; background: url(../appr-ptn.png); width: 100%; height: 200%; -o-object-fit: cover; object-fit: cover; animation-duration: 75000ms; animation-name: scrollApproachBg; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 1; } .str-1 .wide .cross-wrapper { z-index: 40; } .str-1 .wide .cross-wrapper:before, .str-1 .wide .cross-wrapper:after { height: 2rem; top: -1rem; } .str-1 .wide .cross-wrapper:before { transform: translate(-50%, 50%) skew(55deg); } .str-1 .wide .cross-wrapper:after { transform: translate(-50%, 50%) skew(-55deg); } } .str-1 .wide .hitoriatari-wrapper, .str-1 .wide .approachkigyo-wrapper { padding: 5%; background-color: var(--pink); z-index: 30; } .str-1 .wide .hitoriatari-wrapper { display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .str-1 .wide .hitoriatari-wrapper { padding: 2rem 0; } } .str-1 .wide .hitoriatari-wrapper .hitoriatari .img { margin-bottom: 0.66rem; padding: 10% 10% 5%; width: 100%; max-width: 20vw; } @media screen and (max-width: 767px) { .str-1 .wide .hitoriatari-wrapper .hitoriatari .img { padding: 10% 17.5% 5%; max-width: 50vw; } } .str-1 .wide .hitoriatari-wrapper .hitoriatari .text { border-radius: var(--rounded-xl); box-shadow: 0 0 0 2px var(--white); padding: 5%; text-align: center; font-size: var(--font-md); } @media screen and (max-width: 767px) { .str-1 .wide .hitoriatari-wrapper .hitoriatari .text { box-shadow: 0 0 0 1px var(--white); box-shadow: none; padding: 2.5% 7.5%; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; font-size: var(--font-xl); background-color: var(--white); color: var(--pink); } } .str-1 .wide .approachkigyo-wrapper { position: relative; overflow: hidden; padding: 6.6rem 0; } @media screen and (max-width: 767px) { .str-1 .wide .approachkigyo-wrapper { padding: 2rem 0; overflow: visible; } } .str-1 .wide .approachkigyo-wrapper:after { top: 0; } .str-1 .wide .approachkigyo-wrapper:before { top: 205%; } .str-1 .wide .approachkigyo-wrapper:before, .str-1 .wide .approachkigyo-wrapper:after { z-index: 10; position: absolute; left: 50%; content: ""; display: block; background: url(../appr-ptn.png); width: 100%; height: 200%; -o-object-fit: cover; object-fit: cover; animation-duration: 75000ms; animation-name: scrollApproachBg; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 1; } @media screen and (max-width: 767px) { .str-1 .wide .approachkigyo-wrapper:before, .str-1 .wide .approachkigyo-wrapper:after { display: none; } } .str-1 .wide .text-wrapper { position: relative; z-index: 20; background-color: var(--pink); width: 100%; box-shadow: var(--box-shadow); padding: 5% 0; } @media screen and (max-width: 767px) { .str-1 .wide .text-wrapper { position: static; transform: none; padding: 0; height: 100%; display: grid; align-content: center; box-shadow: none; } } .str-1 .wide .bg-white { color: var(--pink); width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; padding: 0.66% 3.33%; } .str-1 .wide .result { display: flex; align-items: baseline; gap: 0.66rem; width: 100%; justify-content: center; } @media screen and (max-width: 767px) { .str-1 .wide .result { gap: 0.45rem; } } .str-1 .wide .result span { line-height: 1; } .str-1 .wide .result .normal { font-size: var(--font-xl); } .str-1 .wide .result .bigger { font-family: var(--font-en); font-size: var(--font-5xl); } @media screen and (max-width: 767px) { .str-1 .wide .result .bigger { font-size: 900%; } } .str-1 .wide .result .big { font-size: var(--font-2xl); } .str-1 .wide .small { font-size: 1rem; text-align: center; } .konnakata-wrapper { background-color: var(--sl-green); padding: 8rem 0; position: relative; background-image: url(../bg-dots-merit-4-2.png); margin: var(--section-margin); } @media screen and (max-width: 1440px) { .konnakata-wrapper { padding: 5rem 0 6rem; } } @media screen and (max-width: 767px) { .konnakata-wrapper { margin-bottom: 4.5rem; } } .konnakata { margin-bottom: 0; } @media screen and (max-width: 767px) { .konnakata .popin.delay1 { transition-delay: 0ms; } .konnakata .popin.delay2 { transition-delay: 0ms; } .konnakata .popin.delay3 { transition-delay: 0ms; } .konnakata .popin.delay4 { transition-delay: 0ms; } .konnakata .popin.delay5 { transition-delay: 0ms; } .konnakata .popin.delay6 { transition-delay: 0ms; } .konnakata .popin.delay7 { transition-delay: 0ms; } .konnakata .popin.delay8 { transition-delay: 0ms; } .konnakata .popin.delay9 { transition-delay: 0ms; } } .konnakata .header-box { background-color: var(--sl-pink); color: var(--white); font-size: var(--font-lg); font-weight: var(--font-light); letter-spacing: var(--tracking-wider); border-radius: var(--rounded-xl); padding: 0.5% 3%; padding-left: 4%; width: -moz-fit-content; width: fit-content; margin-bottom: 3rem; } .konnakata .header-box br.sp { display: none; } @media screen and (max-width: 1440px) { .konnakata .header-box { margin-bottom: 2rem; } } @media screen and (max-width: 767px) { .konnakata .header-box { font-size: var(--font-xl); line-height: 1.7; padding: 3.5% 10% 4%; border-radius: 10rem; } .konnakata .header-box br.sp { display: block; } } .konnakata .merit-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column: span var(--grid-column); gap: 3%; padding: 0 5%; } @media screen and (max-width: 767px) { .konnakata .merit-wrapper { grid-template-columns: 1fr; padding: 0 12.5%; row-gap: 1rem; } } .konnakata .merit-wrapper li { padding: 5%; background-color: var(--white); box-shadow: 0 0 0 2px var(--sl-pink); } .konnakata .merit-wrapper li .textbox { padding: 7.5%; background-color: var(--sl-grey); border-radius: var(--rounded); min-height: 117px; } @media screen and (max-width: 900px) { .konnakata .merit-wrapper li .textbox { min-height: unset; } .konnakata .merit-wrapper li .textbox br { display: none; } } @media screen and (max-width: 767px) { .konnakata .merit-wrapper li .textbox { font-size: var(--font-md); } } .konnakata .merit-wrapper li img { margin-left: auto; margin-right: auto; } .str-2 { padding-bottom: 3rem; } .str-2 .infograph { grid-column: span var(--grid-column); margin-bottom: var(--intra-section-spacing); } .kekka-wrapper { grid-column: var(--grid-inner-column); } @media screen and (max-width: 767px) { .kekka-wrapper { grid-column: span var(--grid-column); } } .kekka-wrapper img { padding: 0 5%; display: block; margin: 0 auto; max-width: 725px; } @media screen and (max-width: 767px) { .kekka-wrapper .pc { display: none; } } .kekka-wrapper .sp { display: none; } @media screen and (max-width: 767px) { .kekka-wrapper .sp { display: block; } } .str-3 { margin-bottom: calc(var(--intra-section-spacing) * 2); } .nayami-wrapper { background-color: var(--sl-grey); background-image: url(../bg-dots2.png); } .nayami-wrapper section { margin-bottom: 5rem; } @media screen and (max-width: 767px) { .nayami-wrapper section { margin-bottom: 3rem; } } .nayami-wrapper .nayami-text-wrapper { position: relative; height: 0; width: 100%; } .nayami-wrapper .nayami-text-wrapper br.sp { display: none; } @media screen and (max-width: 767px) { .nayami-wrapper .nayami-text-wrapper br.sp { display: block; } } .nayami-wrapper h3 { color: var(--blue); font-weight: var(--text-light); letter-spacing: var(--tracking-wider); font-size: var(--font-xlp); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } @media screen and (max-width: 767px) { .nayami-wrapper h3 { line-height: 1.4; } } .nayami-wrapper picture { padding: 5rem 5%; grid-column: span var(--grid-column); } @media screen and (max-width: 767px) { .nayami-wrapper picture { padding: 6rem 2.5% 4rem; } } .solve-wrapper .solve-staff { grid-column: var(--grid-inner-column); justify-self: center; margin-bottom: 1rem; width: 45%; } @media screen and (max-width: 1280px) { .solve-wrapper .solve-staff { grid-column: span var(--grid-column); padding: 0 5%; } } @media screen and (max-width: 767px) { .solve-wrapper .solve-staff { padding: 0; width: 60%; } } .solve-wrapper .solve-content { grid-column: var(--grid-inner-column); display: grid; justify-content: center; gap: 1.25rem; margin-bottom: calc(var(--intra-section-spacing) * 1.5); } @media screen and (max-width: 1280px) { .solve-wrapper .solve-content { grid-column: span var(--grid-column); } } .solve-wrapper h3 { text-indent: 1.33rem; text-align: center; } @media screen and (max-width: 1440px) { .solve-wrapper h3 { text-indent: 0; } } @media screen and (max-width: 767px) { .solve-wrapper h3 { font-size: var(--font-xlp); font-size: calc(var(--font-xlp) * 0.9); } } .solve-wrapper h4 { text-align: center; box-shadow: 0 0 0 2px var(--sl-pink); padding: 1% 2.5%; line-height: 1.4; padding: 2.5% 0; } @media screen and (max-width: 1440px) { .solve-wrapper h4 { font-size: 145%; } } @media screen and (max-width: 767px) { .solve-wrapper h4 { font-size: var(--font-xl); color: var(--white); box-shadow: none; width: 100%; background-color: var(--sl-pink); } } .solve-wrapper h4 br.sp { display: none; } @media screen and (max-width: 767px) { .solve-wrapper h4 br.sp { display: block; } } @media screen and (max-width: 767px) { .solve-wrapper ul { padding: 0 1%; } } .solve-wrapper ul li { font-size: var(--font-md); position: relative; padding: 0.33rem 0 0.33rem 1.22rem; } @media screen and (max-width: 767px) { .solve-wrapper ul li { font-size: var(--font-lg); } } .solve-wrapper ul li:before { content: ""; height: 0; width: 0; padding: 0.33rem; background-color: var(--pink); border-radius: 100%; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .customer-consultant-overwrap { padding: 10rem 0 2rem; } @media screen and (max-width: 767px) { .customer-consultant-overwrap { padding-top: 8rem; } } .customer-consultant-overwrap h2 { position: relative; z-index: 10; max-width: 1100px; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1280px) { .customer-consultant-overwrap h2 { margin-left: 2.5%; padding-left: 2.5%; max-width: 90%; margin-bottom: 0; margin-top: 0; } } .customer-consultant-overwrap h2:before { padding: var(--numbering-size); background-color: var(--white); position: absolute; z-index: 0; left: calc(var(--numbering-size) * -0.75); top: calc(var(--numbering-size) * -0.75); height: 0; width: 0; content: ""; display: block; } @media screen and (max-width: 767px) { .customer-consultant-overwrap h2:before { padding: calc(var(--numbering-size) * 2); } } .customer-consultant-overwrap h2 span { position: relative; z-index: 10; } .customer { display: block; max-width: 100%; counter-reset: customer 0; margin-bottom: 5rem; } @media screen and (max-width: 1440px) { .customer { padding-left: 0; padding-right: 0; } .customer h2 { padding-left: 2.5%; padding-right: 2.5%; } } @media screen and (max-width: 1280px) { .customer h2 { margin-left: 5%; max-width: 90%; } } .customer-swiper { padding-top: 3rem; padding-bottom: 4rem; padding-left: calc((100% - 1100px) / 2); padding-right: 4rem; } @media screen and (max-width: 1440px) { .customer-swiper { padding-right: 0; } } @media screen and (max-width: 1280px) { .customer-swiper { margin-left: 5%; margin-right: 5%; padding-top: 1rem; } } .customer-slide { height: var(--slide-height); counter-increment: customer; display: grid; grid-template-areas: "a b"; -moz-column-gap: 5%; column-gap: 5%; box-shadow: var(--box-shadow); background-color: var(--white); align-items: baseline; } @media screen and (max-width: 767px) { .customer-slide { grid-template-areas: "a" "b"; overflow-y: auto; align-content: baseline; } .customer-slide::-webkit-scrollbar { width: 10px; } .customer-slide::-webkit-scrollbar-track { background: transparent; } .customer-slide::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } } .customer-slide .text-wrapper { height: var(--slide-height); overflow-y: auto; padding-right: 3%; padding-bottom: 2rem; } @media screen and (max-width: 767px) { .customer-slide .text-wrapper { overflow: initial; height: auto; } } .customer-slide .text-wrapper::-webkit-scrollbar { width: 10px; } .customer-slide .text-wrapper::-webkit-scrollbar-track { background: transparent; } .customer-slide .text-wrapper::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } .customer-slide .text-wrapper:after { position: absolute; z-index: 0; color: var(--sl-pink); content: "0" counter(customer); bottom: 2.5%; right: 2.5%; opacity: 0.1; font-family: var(--font-en); font-size: var(--font-5xl); line-height: 1; } .customer-slide .text-wrapper > * { position: relative; z-index: 10; } .customer-slide .photo { grid-area: a; grid-row: 1/span 3; height: var(--slide-height); -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .customer-slide .photo { grid-row: 1/span 1; height: 180px; width: 75px; -o-object-position: top; object-position: top; } } .customer-slide .text-wrapper { padding-top: 5%; } @media screen and (max-width: 767px) { .customer-slide .text-wrapper { margin-top: -180px; } } .customer-slide .customer-details { display: flex; gap: 1rem; height: 1rem; align-items: center; margin-bottom: 1.5rem; } @media screen and (max-width: 767px) { .customer-slide .customer-details { margin-left: 100px; } } .customer-slide .customer-details .en { padding: 0.025rem 0.5rem; height: -moz-fit-content; height: fit-content; font-size: 90%; } .customer-slide .customer-details .en:after { content: "CASE 0" counter(customer); } .customer-slide .customer-title { font-size: var(--font-xl); line-height: 1.6; margin-bottom: 1.5rem; } @media screen and (max-width: 767px) { .customer-slide .customer-title { margin-left: 100px; min-height: 125px; font-size: var(--font-xl); padding-right: 5%; } } .customer-slide .customer-story { padding-right: 5%; font-size: calc(var(--font-md) * 0.8); } @media screen and (max-width: 767px) { .customer-slide .customer-story { padding-left: 5%; font-size: 110%; } } .consultant { gap: 3rem; } @media screen and (max-width: 1280px) { .consultant { margin-bottom: 6rem; } } .consultant-list { grid-column: span var(--grid-column); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2%; position: relative; z-index: 10; } @media screen and (max-width: 1440px) { .consultant-list { max-width: 95%; } } @media screen and (max-width: 767px) { .consultant-list { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; margin-left: auto; margin-right: auto; } } .consultant-item { cursor: pointer; } .consultant-item:hover .photo { background-color: rgb(255, 255, 255); } .consultant-item:hover .photo img { scale: 1.066; } .consultant-item .photo { padding-top: 1.25rem; background-color: rgba(255, 255, 255, 0.4); border-radius: var(--rounded); box-shadow: var(--box-shadow); transition: background-color 0.2s ease; margin-bottom: 0.66rem; height: 16rem; overflow: hidden; } .consultant-item .photo img { scale: 1; transition: scale 0.2s ease-out; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; margin-left: auto; margin-right: auto; } .consultant-item .name { padding-left: 10%; position: relative; letter-spacing: var(--tracking-wide); font-size: 120%; } .consultant-item .name:before { content: ""; position: absolute; top: 0.66rem; padding: 0.25rem; border-radius: 100%; height: 0; width: 0; display: block; left: 0; background-color: var(--sl-pink); } .consultant-item .name .en { font-size: 80%; } .blue-bg { background: rgb(0, 172, 250); background: radial-gradient(circle, rgb(0, 172, 250) 0%, rgb(0, 182, 254) 100%); height: 100vh; width: 100%; top: 0; left: 0; z-index: 0; overflow: hidden; } .blue-bg svg { position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; display: block; transform: translate(-50%, -50%); opacity: 0.3; } .blue-bg svg.sl { opacity: 0.2; height: 50%; transform: scale(2); left: unset; right: -25%; } .blue-bg svg.cr { width: 50%; opacity: 0.3; } .blue-bg svg#cr01 { width: 100%; left: 125%; top: -15rem; } .blue-bg svg#cr02 { width: 37.5%; transform: none; left: -15%; transform: none; top: -5rem; } .cta-banner { color: var(--white); justify-items: center; letter-spacing: var(--tracking-wide); margin: calc(var(--intra-section-spacing) * 2) auto calc(var(--intra-section-spacing) * 2.8); } .cta-banner .catch { grid-column: span var(--grid-column); font-size: var(--font-2xl); font-weight: var(--font-light); position: relative; } @media screen and (max-width: 767px) { .cta-banner .catch { font-size: calc(var(--font-xlp) * 0.85); } } .cta-banner .catch:after { width: 100%; height: auto; position: absolute; bottom: -2rem; left: 0; content: url(../catch-ul.svg); line-height: 0; } @media screen and (max-width: 767px) { .cta-banner .catch:after { bottom: -1.5rem; transform: scaleX(-1); } } .cta-banner a { grid-column: span var(--grid-column); display: flex; align-items: center; gap: 1rem; } @media screen and (max-width: 767px) { .cta-banner a { position: relative; } } @media screen and (max-width: 767px) { .cta-banner a.linkphone { margin-top: 1rem; padding-top: 1rem; } } .cta-banner a svg { height: var(--numbering-size); width: var(--numbering-size); } @media screen and (max-width: 767px) { .cta-banner a svg { height: 3.66rem; width: 3.66rem; } } @media screen and (max-width: 767px) { .cta-banner a .oyakuzaisi { position: absolute; top: 0; right: 0; } } .cta-banner .phoneno { font-size: var(--font-4xl); } @media screen and (max-width: 767px) { .cta-banner .phoneno { font-size: var(--font-3xl); font-size: 11.4583333333vw; } } .cta-banner .btn { border: 2px solid var(--white); background-color: var(--pink); font-size: var(--font-xl); border-radius: 10rem; padding: 1.5rem 4rem; line-height: 1; box-shadow: var(--box-shadow); gap: 2.5rem; } @media screen and (max-width: 767px) { .cta-banner .btn { border: 1px solid var(--white); margin-top: 2rem; padding: 1.5rem 2rem; padding-right: 0; gap: 0; font-size: 4.1666666667vw; } } .cta-banner .btn .svgwrapper { position: relative; z-index: 0; --svg-sizing: 1.5rem; padding: var(--svg-sizing); } @media screen and (max-width: 767px) { .cta-banner .btn .svgwrapper { --svg-sizing: 1rem; padding-left: 4rem; } } .cta-banner .btn .svgwrapper svg { position: absolute; height: calc(var(--svg-sizing) * 0.66); left: 52.5%; top: 50%; transform: translate(-50%, -50%); } .cta-banner .btn .svgwrapper:before { height: 0; width: 0; padding: var(--svg-sizing); content: ""; position: absolute; background-color: var(--white); display: block; z-index: -10; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .footer { margin-bottom: 0; } footer { display: flex; width: 100%; justify-content: space-between; grid-column: span var(--grid-column); align-items: center; padding: calc(var(--intra-section-spacing) * 2) 0 calc(var(--intra-section-spacing) * 3); } @media screen and (max-width: 767px) { footer { display: grid; grid-template-columns: 1fr; font-size: 90%; padding: calc(var(--intra-section-spacing) * 2) 0 calc(var(--intra-section-spacing) * 3.25); } } footer .axis-logo { transform: translateX(-42%); } @media screen and (max-width: 1440px) { footer .axis-logo { transform: none; width: 65%; margin-top: 2rem; margin-bottom: 1rem; } } footer .top-link-wrap { gap: 1rem; margin-bottom: 1rem; } @media screen and (max-width: 767px) { footer .top-link-wrap { flex-wrap: wrap; row-gap: 0.25rem; margin-bottom: 1.5rem; } } footer .top-link-wrap a { align-items: center; width: -moz-fit-content; width: fit-content; gap: 0.5rem; } footer .top-link-wrap svg { height: 15px; } footer .certs { display: grid; grid-template-areas: "a b" ". c"; grid-template-columns: 0.33fr 1fr; margin-bottom: 1rem; } @media screen and (max-width: 767px) { footer .certs { grid-template-columns: 0.5fr 1fr; } } footer .certs div:nth-of-type(1) { grid-area: a; } footer .certs div:nth-of-type(2) { grid-area: b; } footer .certs div:nth-of-type(3) { grid-area: c; } footer .address { margin-bottom: 1rem; } footer .bot-link-wrap { display: grid; grid-template-areas: "a b" "c d"; row-gap: 0.25rem; } footer .bot-link-wrap .blt:nth-of-type(1) { grid-area: a; } footer .bot-link-wrap .blt:nth-of-type(2) { grid-area: c; } footer .bot-link-wrap a:nth-of-type(1) { grid-area: b; } footer .bot-link-wrap a:nth-of-type(2) { grid-area: d; } footer .bot-link-wrap a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.3rem; width: -moz-fit-content; width: fit-content; } footer .info-block { width: 100%; } @media screen and (max-width: 1440px) { footer .info-block { white-space: nowrap; } } @media screen and (max-width: 767px) { footer .info-block { order: 2; white-space: normal; } } footer .photo-block { padding-left: 10%; width: 100%; } @media screen and (max-width: 767px) { footer .photo-block { padding-left: 0; order: 1; width: 100%; } footer .photo-block img { max-width: 300px; margin-left: auto; } } .copyright { position: relative; z-index: 10; background-color: var(--sl-pink); color: var(--white); font-family: var(--font-en); text-align: center; margin-bottom: 0; letter-spacing: var(--tracking-wider); font-size: 80%; } #consul-modal { background-color: rgba(255, 255, 255, 0.4); } .modaal-overlay { background: rgba(51, 51, 51, 0.6) !important; } .consultant-slide .top { background-color: rgba(255, 255, 255, 0.5); background: rgb(255, 255, 255); background: radial-gradient(circle at 110%, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%); align-items: center; font-weight: var(--font-light); letter-spacing: var(--tracking-wider); padding: 3rem 5% 0; gap: 10%; justify-content: center; } @media screen and (max-width: 767px) { .consultant-slide .top { position: relative; display: block; z-index: 0; padding: 4rem 8% 2rem; height: 210px; } } .consultant-slide .top .name { font-size: var(--font-xlp); } @media screen and (max-width: 767px) { .consultant-slide .top .name { margin-bottom: 0.25rem; font-size: calc(var(--font-xl) * 1.2); line-height: 1.4; } } .consultant-slide .top .en { letter-spacing: 0.025em; margin-bottom: 1rem; } @media screen and (max-width: 767px) { .consultant-slide .top .en { margin-bottom: 0; } } .consultant-slide .top .img-wrapper { height: 22.5rem; } @media screen and (max-width: 767px) { .consultant-slide .top .img-wrapper { position: absolute; z-index: 0; bottom: 0; right: 5%; height: 90%; } } @media screen and (max-width: 767px) { .consultant-slide .top .text-wrapper { position: relative; z-index: 10; } .consultant-slide .top .text-wrapper .bg-pink { width: 50%; color: var(--sl-pink); background-color: transparent; letter-spacing: var(--tracking-wide); } } .consultant-slide .article { padding: 5rem 15% 8rem; } @media screen and (max-width: 767px) { .consultant-slide .article { padding: 6rem 7% 10rem; } } .consultant-slide .article h3 { font-size: var(--font-lgp); font-weight: var(--font-light); gap: 0.85rem; margin-bottom: calc(var(--intra-section-spacing) * 0.4); position: relative; padding-left: 7.5rem; line-height: 1.5; white-space: normal; } @media screen and (max-width: 767px) { .consultant-slide .article h3 { padding-left: 0; margin-bottom: 0.25rem; font-size: calc(var(--font-xl) * 1); } } .consultant-slide .article h3 .bg-pink { position: absolute; left: 0; top: 0.55rem; font-size: 60%; display: flex; align-items: center; justify-content: center; padding: 0.1rem 1rem; } @media screen and (max-width: 767px) { .consultant-slide .article h3 .bg-pink { top: -1.8rem; } } .consultant-slide .article p { margin-bottom: calc(var(--intra-section-spacing) * 1.5); font-size: 100%; font-size: calc(var(--font-md) * 0.8); line-height: 2.1; text-align: justify; } @media screen and (max-width: 767px) { .consultant-slide .article p { margin-bottom: calc(var(--intra-section-spacing) * 2); font-size: calc(var(--font-lg) * 0.8); } } .consultant-slide .article p:last-child { margin-bottom: 0; } .consultant-slide .bottom { background-color: var(--white); padding: 2rem 10% 4rem; } @media screen and (max-width: 767px) { .consultant-slide .bottom { padding: 2rem 7% 4rem; } } .consultant-slide .bottom .h2wrapper { height: 0px; position: relative; width: 100%; } .consultant-slide .bottom h2 { width: 100%; position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); margin-bottom: 0; } @media screen and (max-width: 767px) { .consultant-slide .bottom h2 { margin-left: 0; padding-bottom: 0; } } .consultant-slide .bottom ul { padding-top: 1.5rem; gap: 2.5%; } @media screen and (max-width: 767px) { .consultant-slide .bottom ul { padding-top: 0.5rem; display: grid; grid-template-columns: repeat(2, 1fr); } } .modaal-container { background-color: var(--sl-grey); } .modaal-content-container { padding: 0; } @keyframes scrollApproachBg { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -100%); } } @keyframes boxFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }/*# sourceMappingURL=style.css.map */