@charset "UTF-8"; /* ======================================= このCSSファイルはSassにて生成されています。 This file is created by Sass Files. =========================================*/ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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):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; 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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-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; } /* --------------------------------------- Mixin -----------------------------------------*/ /* --------------------------------------- Basic Settings -----------------------------------------*/ :root { --cl-main: #004294; --cl-cta: linear-gradient(90deg, #f6ae54 0%, #ec6d74 100%); --cl-line: #05c655; --cl-border: #dedede; --cl-bg: #f2f2f2; --cl-text: #164071; --cl-link: #164071; --cl-link-hover: #164071; --cl-gray: #ccc; --cl-white: #fff; --font-barlow: "Barlow Semi Condensed", sans-serif; --font-noto: "Noto Sans JP", sans-serif; --font-awesome: "Font Awesome 6 Free"; --scale: 1.1; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-in-out; --opacity: 0.8; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } @container (width < 750px) { html { scroll-padding-top: 13.3333333333vw; } } html body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; font-family: var(--font-noto); font-size: 1rem; background-color: var(--cl-white); color: var(--cl-text); line-height: 1.5; min-height: 100dvh; } @container (width < 750px) { html body { font-size: 16px; font-size: 2.1333333333vw; } } html body img { width: 100%; height: auto; vertical-align: bottom; font-size: 0; line-height: 0; } html body a { color: var(--cl-link); text-decoration: none; word-break: break-all; transition: var(--transition); } html body a:hover, html body a:link, html body a:visited, html body a:active { text-decoration: none; } @media (any-hover: hover) { html body a:hover { color: var(--cl-link-hover); opacity: var(--opacity); } } html body textarea, html body input, html body select { background-color: var(--cl-white); border: var(--cl-border) 1px solid; border-radius: 6px; padding: 8px 10px; box-sizing: border-box; } html body.is_hidden { overflow: hidden; } /* --------------------------------------- Header -----------------------------------------*/ .header { position: fixed; width: 100%; max-width: 46.875rem; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; transition: all 0.3s; } @container (width < 750px) { .header { max-width: 100%; } } .header__wrapper { width: 100%; max-width: 46.875rem; height: 6.25rem; background-color: var(--cl-white); margin-inline: auto; padding: 0 1.875rem; display: flex; align-items: center; justify-content: space-between; } @container (width < 750px) { .header__wrapper { max-width: 100vw; height: 13.3333333333vw; padding: 0 4vw; } } .header__logo { width: 16.875rem; height: 3rem; } @container (width < 750px) { .header__logo { width: 36vw; height: 6.4vw; } } .header__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } /* --------------------------------------- Global Navigation -----------------------------------------*/ .gNavi { position: fixed; top: 6.25rem; width: 100%; visibility: hidden; opacity: 0; transition: var(--transition); } @container (width < 750px) { .gNavi { top: 13.3333333333vw; } } .gNavi__nav { background-color: rgba(243, 243, 243, 0.8); width: 100%; height: calc(100dvh - 6.25rem); padding-block: 2rem; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } @container (width < 750px) { .gNavi__nav { height: calc(100dvh - 13.3333333333vw); padding-block: 4.2666666667vw; } } .gNavi__nav::-webkit-scrollbar { display: none; } .gNavi__list { background-color: rgba(255, 255, 255, 0.8); padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; margin-inline: 1.5rem; } @container (width < 750px) { .gNavi__list { padding: 0 3.2vw 3.2vw; gap: 1.0666666667vw; margin-inline: 3.2vw; } } .gNavi__list li { border-bottom: var(--cl-main) 1px solid; } .gNavi__list li a { display: flex; align-items: center; justify-content: space-between; font-size: 2rem; padding-block: 1rem; position: relative; } @container (width < 750px) { .gNavi__list li a { font-size: 32px; font-size: 4.2666666667vw; } } .gNavi__list li a::after { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; } .gNavi__cta-wrapper { display: flex; gap: 0.5rem; margin: 0.5rem 1.25rem 0; } @container (width < 390px) { .gNavi__cta-wrapper { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-wrapper { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } .gNavi__cta-btn { flex: 1; border-radius: 0.25rem; display: flex; align-items: center; gap: 0.125rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.3; text-align: center; padding: 0.5rem 0.875rem 0.625rem 0.5rem; } @container (width < 390px) { .gNavi__cta-btn { font-size: 12px; font-size: 3.0769230769vw; padding: 2.0512820513vw 3.5897435897vw 2.5641025641vw 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn { font-size: 12px; font-size: 3.0769230769vw; padding: 2.0512820513vw 3.5897435897vw 2.5641025641vw 2.0512820513vw; } } @media (any-hover: hover) { .gNavi__cta-btn:hover { box-shadow: none; transform: translateY(0.25rem); } } .gNavi__cta-btn--line { background-color: #4cc764; color: var(--cl-white); box-shadow: 0 0.25rem 0 0 #2c794c; } @container (width < 390px) { .gNavi__cta-btn--line { box-shadow: 0 1.0256410256vw 0 0 #2c794c; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn--line { box-shadow: 0 1.0256410256vw 0 0 #2c794c; } } @media (any-hover: hover) { .gNavi__cta-btn--line:hover { color: var(--cl-white); } } .gNavi__cta-btn--online { background-color: #a9d7ff; color: var(--cl-main); box-shadow: 0 0.25rem 0 0 #176395; } @container (width < 390px) { .gNavi__cta-btn--online { box-shadow: 0 1.0256410256vw 0 0 #176395; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn--online { box-shadow: 0 1.0256410256vw 0 0 #176395; } } @media (any-hover: hover) { .gNavi__cta-btn--online:hover { color: var(--cl-main); } } .gNavi__cta-btn .-icon { flex-shrink: 0; width: 2rem; } .gNavi.is_active { visibility: visible; opacity: 1; } /* --------------------------------------- Global Navigation for Smartphone -----------------------------------------*/ .navToggle__btn { cursor: pointer; display: flex; justify-content: center; flex-direction: column; gap: 0.625rem; } @container (width < 750px) { .navToggle__btn { gap: 1.3333333333vw; } } .navToggle__btn .-line { display: block; background-color: var(--cl-main); width: 2.25rem; height: 0.1875rem; position: relative; transition: var(--transition); } @container (width < 750px) { .navToggle__btn .-line { width: 4.8vw; height: 0.4vw; } } .navToggle__btn.is_active .-line:nth-child(1) { transform: translateY(0.8125rem) rotate(45deg); } @container (width < 750px) { .navToggle__btn.is_active .-line:nth-child(1) { transform: translateY(1.7333333333vw) rotate(45deg); } } .navToggle__btn.is_active .-line:nth-child(2) { opacity: 0; } .navToggle__btn.is_active .-line:nth-child(3) { transform: translateY(-0.8125rem) rotate(-45deg); } @container (width < 750px) { .navToggle__btn.is_active .-line:nth-child(3) { transform: translateY(-1.7333333333vw) rotate(-45deg); } } /* --------------------------------------- Container -----------------------------------------*/ .container { display: grid; align-items: start; grid-template-columns: 1fr 46.875rem 1fr; background-image: -webkit-image-set("../img/container_bg.webp" type("image/webp"), "../img/container_bg.png" type("image/png")); background-image: image-set("../img/container_bg.webp" type("image/webp"), "../img/container_bg.png" type("image/png")); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } @media screen and (width <= 767px) { .container { display: block; } } .container__left, .container__right { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-content: center; } @media screen and (width <= 767px) { .container__left, .container__right { display: none; } } .container__logo { width: 18.375rem; } .container__btn-wrapper { display: flex; flex-direction: column; gap: 1.25rem; } .container__btn { display: block; border-radius: 9999px; cursor: pointer; position: relative; width: 18.75rem; height: 3.75rem; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.04em; } .container__btn::after { content: ""; display: block; position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; background-repeat: no-repeat; background-size: contain; } .container__btn--cta { display: flex; align-items: center; justify-content: center; background: var(--cl-cta); color: var(--cl-white); } .container__btn--cta::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 4.8125rem; height: 4.375rem; background-image: -webkit-image-set(url("../img/container_right_btn_cta_img.webp") type("image/webp"), url("../img/container_right_btn_cta_img.png") type("image/png")); background-image: image-set(url("../img/container_right_btn_cta_img.webp") type("image/webp"), url("../img/container_right_btn_cta_img.png") type("image/png")); background-repeat: no-repeat; background-size: contain; } .container__btn--cta::after { background-image: url("../img/btn_cta_arrow.svg"); } @media (any-hover: hover) { .container__btn--cta:hover { color: var(--cl-white); opacity: var(--opacity); } } .container__btn--line { display: flex; align-items: center; gap: 0.5rem; background: var(--cl-white); border: var(--cl-line) 3px solid; color: var(--cl-line); padding-left: 1.25rem; } .container__btn--line::before { content: ""; display: block; width: 2.5rem; height: 2.5rem; background-image: url("../img/container_right_btn_line_icon.svg"); background-repeat: no-repeat; background-size: contain; } .container__btn--line::after { background-image: url("../img/btn_line_arrow.svg"); } @media (any-hover: hover) { .container__btn--line:hover { color: var(--cl-line); opacity: var(--opacity); } } .container__main { background-color: var(--cl-white); container-type: inline-size; position: relative; overflow: clip; } @media screen and (width <= 767px) { .container__main { width: 100%; } } @media screen and (width <= 1400px) { .container__inner { display: none; } } /* --------------------------------------- Footer -----------------------------------------*/ .footer { background-color: var(--cl-white); background-image: -webkit-image-set(url("../img/cta_bottom_bg.webp") type("image/webp"), url("../img/cta_bottom_bg.png") type("image/png")); background-image: image-set(url("../img/cta_bottom_bg.webp") type("image/webp"), url("../img/cta_bottom_bg.png") type("image/png")); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; position: relative; } @media screen and (width <= 1400px) { .footer { padding-bottom: 10rem; } } @container (width < 750px) { .footer { padding-bottom: 21.3333333333vw; } } .footer__cta { padding-top: 4.5rem; } @container (width < 750px) { .footer__cta { padding-top: 9.6vw; } } .footer__wrapper { padding: 6.25rem 1.25rem 1.25rem; } @container (width < 750px) { .footer__wrapper { padding: 13.3333333333vw 2.6666666667vw 2.6666666667vw; } } .footer__logo { width: 22.75rem; margin-inline: auto; } @container (width < 750px) { .footer__logo { width: 48.5333333333vw; } } .footer__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .footer__nav { display: flex; align-items: center; flex-direction: column; gap: 1.5rem; margin-top: 3.5rem; } @container (width < 750px) { .footer__nav { margin-top: 7.4666666667vw; gap: 3.2vw; } } .footer__nav li { font-size: 1.5rem; letter-spacing: 0.08em; } @container (width < 750px) { .footer__nav li { font-size: 24px; font-size: 3.2vw; } } .footer__nav li a { display: flex; align-items: center; gap: 1.5rem; } @container (width < 750px) { .footer__nav li a { gap: 3.2vw; } } .footer__nav li a::after { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; transform: translateY(0.125rem); } @container (width < 750px) { .footer__nav li a::after { transform: translateY(0.2666666667vw); } } .footer__copyright { font-size: 1.125rem; letter-spacing: 0.06em; text-align: center; margin-top: 4rem; } @container (width < 750px) { .footer__copyright { font-size: 18px; font-size: 2.4vw; margin-top: 8.5333333333vw; } } .footer__btn-wrapper { display: none; } @media screen and (width <= 1400px) { .footer__btn-wrapper { width: 44.375rem; margin: 3.5rem auto 0; display: flex; justify-content: space-between; z-index: 5; position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: none; } } @container (width < 425px) { .footer__btn-wrapper { width: 100%; bottom: 2.6666666667vw; padding-inline: 2.6666666667vw; margin-top: 7.4666666667vw; display: block; } } .footer__btn { display: flex; align-items: center; justify-content: center; text-align: center; width: 21.875rem; height: 6.875rem; border-radius: 0.625rem; box-shadow: 0 0 0.625rem rgba(51, 51, 51, 0.2); font-size: 1.75rem; font-weight: bold; } @container (width < 750px) { .footer__btn { height: 4rem; font-size: 28px; font-size: 3.7333333333vw; } } @media (any-hover: hover) { .footer__btn:hover { opacity: var(--opacity); } } .footer__btn--cta { background: var(--cl-cta); color: var(--cl-white); font-size: 2rem; border-radius: 9999px; width: 100%; } @container (width < 750px) { .footer__btn--cta { font-size: 1.4rem; } } @media screen and (width <= ) { .footer__btn--cta { display: none; font-size: 2rem; } } @media (any-hover: hover) { .footer__btn--cta:hover { color: var(--cl-white); } } .footer__btn--cta::after { content: ""; display: block; position: absolute; top: 50%; right: 2.5rem; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; } @container (width < 750px) { .footer__btn--cta::after { width: 1.5rem; height: 1.5rem; } } .footer__btn--cta::after { background-repeat: no-repeat; background-size: contain; background-image: url(../img/btn_cta_arrow.svg); } .footer__btn--cta--line { gap: 1.25rem; background: var(--cl-white); border: var(--cl-line) solid 0.25rem; color: var(--cl-line); } @container (width < 750px) { .footer__btn--cta--line { gap: 2.6666666667vw; border: var(--cl-line) solid 0.5333333333vw; } } .footer__btn--cta--line::before { content: ""; width: 5rem; height: 5rem; background-image: url("../img/btn_line_icon.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .footer__btn--cta--line::before { width: 10.6666666667vw; height: 10.6666666667vw; } } @media (any-hover: hover) { .footer__btn--cta--line:hover { color: var(--cl-line); } } /* --------------------------------------- Button -----------------------------------------*/ .btn { display: flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-size: 2rem; font-weight: 700; color: var(--cl-white); letter-spacing: 0.04em; width: 37.5rem; height: 7.5rem; } @container (width < 750px) { .btn { font-size: 32px; font-size: 4.2666666667vw; width: 80vw; height: 16vw; } } .btn::after { content: ""; display: block; position: absolute; top: 50%; right: 2.5rem; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .btn::after { right: 5.3333333333vw; width: 5.3333333333vw; height: 5.3333333333vw; } } .btn--cta { display: flex; align-items: center; justify-content: center; background: var(--cl-cta); color: var(--cl-white); } .btn--cta::before { content: ""; display: block; position: absolute; bottom: 0; left: -1.875rem; width: 11.75rem; height: 10.75rem; background-image: -webkit-image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-image: image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .btn--cta::before { left: -4vw; width: 25.0666666667vw; height: 22.9333333333vw; } } .btn--cta::after { background-image: url("../img/btn_cta_arrow.svg"); } @media (any-hover: hover) { .btn--cta:hover { color: var(--cl-white); opacity: var(--opacity); } } .btn--line { justify-content: flex-start; gap: 0.5rem; background: var(--cl-white); border: var(--cl-line) 3px solid; color: var(--cl-line); padding-left: 3.125rem; } @container (width < 750px) { .btn--line { gap: 1.0666666667vw; padding-left: 6.6666666667vw; } } .btn--line::before { content: ""; display: block; width: 5rem; height: 5rem; background-image: url("../img/container_right_btn_line_icon.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .btn--line::before { width: 10.6666666667vw; height: 10.6666666667vw; } } .btn--line::after { background-image: url("../img/btn_line_arrow.svg"); } @media (any-hover: hover) { .btn--line:hover { color: var(--cl-line); opacity: var(--opacity); } } .cta-btn-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; padding-top: 2.625rem; } @container (width < 750px) { .cta-btn-wrapper { gap: 2.6666666667vw; padding-top: 5.6vw; } } /* --------------------------------------- Episode Card -----------------------------------------*/ .episode-card__inner { background-color: var(--cl-white); border-radius: 3.75rem 0.625rem 0.625rem 0.625rem; box-shadow: 0 0 1.25rem rgba(51, 51, 51, 0.1); position: relative; overflow: hidden; margin-inline: 1.25rem; padding-bottom: 4.375rem; min-height: 55rem; } @container (width < 750px) { .episode-card__inner { margin-inline: 2.6666666667vw; padding-bottom: 9.3333333333vw; min-height: 31rem; } } .episode-card__head { display: flex; align-items: flex-end; gap: 3.75rem; height: 20rem; margin-bottom: 2.5rem; } @container (width < 750px) { .episode-card__head { gap: 8vw; height: 42.6666666667vw; margin-bottom: 5.3333333333vw; } } .episode-card__img { width: 16.875rem; height: 20rem; } @container (width < 750px) { .episode-card__img { width: 36vw; height: 42.6666666667vw; } } .episode-card__img img { -o-object-fit: cover; object-fit: cover; } .episode-card__user { padding-right: 1.25rem; } @container (width < 750px) { .episode-card__user { padding-right: 2.6666666667vw; } } .episode-card__name { font-size: 1.5rem; font-weight: bold; } @container (width < 750px) { .episode-card__name { font-size: 24px; font-size: 3.2vw; } } .episode-card__name .-lg { font-size: 5.375rem; font-weight: 500; font-family: var(--font-barlow); } @container (width < 750px) { .episode-card__name .-lg { font-size: 86px; font-size: 11.4666666667vw; } } .episode-card__before, .episode-card__after { display: flex; align-items: center; gap: 0.625rem; } @container (width < 750px) { .episode-card__before, .episode-card__after { gap: 1.3333333333vw; } } .episode-card__before dt, .episode-card__after dt { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 6.25rem; height: 2.5rem; border-radius: 9999px; color: var(--cl-white); font-size: 1.25rem; font-weight: bold; letter-spacing: 0.08em; } @container (width < 750px) { .episode-card__before dt, .episode-card__after dt { width: 13.3333333333vw; height: 5.3333333333vw; font-size: 20px; font-size: 2.6666666667vw; } } .episode-card__before dd, .episode-card__after dd { font-size: 1.5rem; } @container (width < 750px) { .episode-card__before dd, .episode-card__after dd { font-size: 24px; font-size: 3.2vw; } } .episode-card__before { position: relative; margin-bottom: 3.25rem; } @container (width < 750px) { .episode-card__before { margin-bottom: 6.9333333333vw; } } .episode-card__before dt { background-color: #50d0ef; } .episode-card__before::after { content: ""; background-color: var(--cl-text); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); width: 1.875rem; height: 1rem; position: absolute; bottom: -2.25rem; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .episode-card__before::after { width: 4vw; height: 2.1333333333vw; bottom: -4.8vw; } } .episode-card__after dt { background-color: #e3556d; } .episode-card__after dd { color: #e3556d; font-weight: bold; } .episode-card__title { font-size: 1.875rem; font-weight: bold; margin-bottom: 1.25rem; text-align: center; } @container (width < 750px) { .episode-card__title { font-size: 30px; font-size: 4vw; margin-bottom: 2.6666666667vw; } } .episode-card__desc { width: 30.625rem; margin-inline: auto; font-size: 1.5rem; line-height: 2; } @container (width < 750px) { .episode-card__desc { width: 65.3333333333vw; font-size: 24px; font-size: 3.2vw; } } @media (max-width: 390px) { .episode-card__inner { min-height: 29rem; } } @media (max-width: 375px) { .episode-card__inner { min-height: 27.5rem; } } /* --------------------------------------- FAQ Card -----------------------------------------*/ .faq-card { background-color: var(--cl-white); border-radius: 0.625rem; box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); padding: 1.5rem 1.875rem; } @container (width < 750px) { .faq-card { padding: 3.2vw 4vw; } } .faq-card__question, .faq-card__answer .-inner { display: flex; gap: 1.25rem; font-size: 1.5rem; } @container (width < 750px) { .faq-card__question, .faq-card__answer .-inner { gap: 2.6666666667vw; font-size: 24px; font-size: 3.2vw; } } .faq-card__question::before, .faq-card__answer .-inner::before { content: ""; flex-shrink: 0; display: inline-block; width: 3.75rem; height: 3.75rem; background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .faq-card__question::before, .faq-card__answer .-inner::before { width: 8vw; height: 8vw; } } .faq-card__question { align-items: center; position: relative; padding-right: 1.75rem; cursor: pointer; } @container (width < 750px) { .faq-card__question { padding-right: 3.7333333333vw; } } .faq-card__question::before { background-image: url("../img/faq_q.svg"); } .faq-card__question::after { content: "+"; font-family: var(--font-awesome); font-weight: 900; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .faq-card__question.-active::after { content: "\f068"; } .faq-card__answer { margin-top: 2.875rem; display: none; } @container (width < 750px) { .faq-card__answer { margin-top: 6.1333333333vw; } } .faq-card__answer .-inner::before { background-image: url("../img/faq_a.svg"); } /* --------------------------------------- Point Card -----------------------------------------*/ .point-card { background-color: var(--cl-white); border-radius: 1.875rem; width: 37.5rem; margin-inline: auto; padding: 4.5rem 2rem; position: relative; } @container (width < 750px) { .point-card { width: 80vw; padding: 9.6vw 4.2666666667vw; } } .point-card__num { width: 9.375rem; height: 9.375rem; position: absolute; top: -1.875rem; left: -1.875rem; } @container (width < 750px) { .point-card__num { width: 20vw; height: 20vw; top: -4vw; left: -4vw; } } .point-card__inner { display: flex; flex-direction: column; align-items: center; } .point-card__icon { width: 13.0625rem; height: 11.25rem; } @container (width < 750px) { .point-card__icon { width: 27.8666666667vw; height: 24vw; } } .point-card__title { font-size: 2.5rem; font-weight: bold; letter-spacing: 0.04em; text-align: center; margin-top: 4.375rem; margin-bottom: 1.5rem; } @container (width < 750px) { .point-card__title { font-size: 40px; font-size: 5.3333333333vw; margin-top: 9.3333333333vw; margin-bottom: 3.2vw; } } .point-card__desc { display: flex; justify-content: center; font-size: 1.75rem; letter-spacing: 0.04em; text-align: center; } @container (width < 750px) { .point-card__desc { font-size: 28px; font-size: 3.7333333333vw; } } /* --------------------------------------- Works Card -----------------------------------------*/ .works-card { padding-inline: 1.25rem; } @container (width < 750px) { .works-card { padding-inline: 2.6666666667vw; } } .works-card__inner { margin-inline: auto; background-color: var(--cl-white); border-radius: 0.625rem 3.75rem 0.625rem 3.75rem; padding: 3.125rem; } @container (width < 750px) { .works-card__inner { padding: 6.6666666667vw; } } .works-card__category { width: 100%; max-width: 9.375rem; margin-inline: auto; height: 3.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background-color: #ec6d74; color: var(--cl-white); font-size: 1.875rem; letter-spacing: 0.03em; } @container (width < 750px) { .works-card__category { max-width: 20vw; height: 8vw; font-size: 30px; font-size: 4vw; } } .works-card__title { min-height: 7.6rem; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; letter-spacing: 0.04em; text-align: center; margin-top: 0.625rem; margin-bottom: 1.375rem; } @container (width < 750px) { .works-card__title { min-height: 4.2rem; font-size: 40px; font-size: 5.3333333333vw; margin-top: 1.3333333333vw; margin-bottom: 2.9333333333vw; } } .works-card__img { width: 100%; height: auto; margin-bottom: 1rem; } @container (width < 750px) { .works-card__img { margin-bottom: 2.1333333333vw; } } .works-card__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .works-card__annual-salary { display: flex; justify-content: center; margin-block: var(--trim-leading); } .works-card__annual-salary .-label { font-size: 1.75rem; font-weight: bold; } @container (width < 750px) { .works-card__annual-salary .-label { font-size: 28px; font-size: 3.7333333333vw; } } .works-card__annual-salary .-value { font-family: var(--font-barlow); font-weight: normal; font-size: 4.375rem; color: #f6ae54; } @container (width < 750px) { .works-card__annual-salary .-value { font-size: 70px; font-size: 9.3333333333vw; } } .works-card__monthly-salary { display: flex; justify-content: center; margin-top: -1.25rem; } @container (width < 750px) { .works-card__monthly-salary { margin-top: -2.6666666667vw; } } .works-card__monthly-salary .-label { font-size: 1.5rem; letter-spacing: 0.02em; font-weight: bold; } @container (width < 750px) { .works-card__monthly-salary .-label { font-size: 24px; font-size: 3.2vw; } } .works-card__monthly-salary .-value { font-family: var(--font-barlow); font-weight: normal; font-size: 3.125rem; color: #ec6d74; } @container (width < 750px) { .works-card__monthly-salary .-value { font-size: 50px; font-size: 6.6666666667vw; } } .works-card__desc { display: flex; justify-content: center; font-size: 1.75rem; font-weight: bold; letter-spacing: 0.04em; text-align: center; } @container (width < 750px) { .works-card__desc { font-size: 28px; font-size: 3.7333333333vw; } } /* --------------------------------------- Top -----------------------------------------*/ .mv { background-color: #f3f3f3; background-image: -webkit-image-set(url("../img/mv_bg.webp") type("image/webp"), url("../img/mv_bg.png") type("image/png")); background-image: image-set(url("../img/mv_bg.webp") type("image/webp"), url("../img/mv_bg.png") type("image/png")); background-repeat: no-repeat; background-size: 100% auto; padding-bottom: 2.5rem; } @container (width < 750px) { .mv { padding-bottom: 5.3333333333vw; } } .mv__img { padding-top: 19.75rem; width: 23.75rem; padding-left: 1.5rem; } @container (width < 750px) { .mv__img { padding-top: 42.1333333333vw; width: 50.6666666667vw; padding-left: 3.2vw; } } .mv__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .mv__text { font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1.6; padding-left: 3.125rem; margin-top: 1.5rem; } @container (width < 750px) { .mv__text { font-size: 24px; font-size: 3.2vw; padding-left: 6.6666666667vw; margin-top: 3.2vw; } } .mv__list { display: grid; grid-template-columns: repeat(3, 12.5rem); justify-content: center; gap: 1.5rem; margin-top: 2.625rem; } @container (width < 750px) { .mv__list { grid-template-columns: repeat(3, 26.6666666667vw); gap: 3.2vw; margin-top: 5.6vw; } } .mv__list li { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; height: 15.625rem; background-color: var(--cl-white); border-radius: 0.625rem 2.5rem 0.625rem 2.5rem; box-shadow: 0 0 1.875rem rgba(51, 51, 51, 0.1); } @container (width < 750px) { .mv__list li { gap: 4.2666666667vw; height: 33.3333333333vw; } } .mv__list li .-icon { display: flex; align-items: center; justify-content: center; width: 5.1875rem; height: 4.5rem; margin-inline: auto; } @container (width < 750px) { .mv__list li .-icon { width: 11.0666666667vw; height: 9.6vw; } } .mv__list li .-icon img { vertical-align: bottom; } .mv__list li .-icon.-document img { margin-top: 1.4rem; } .mv__list li .-text { font-size: 1.25rem; letter-spacing: 0.04em; font-weight: bold; text-align: center; } @container (width < 750px) { .mv__list li .-text { font-size: 20px; font-size: 2.6666666667vw; } } .mv__cta { background-color: var(--cl-white); margin-top: 2rem; margin-bottom: 2rem; } .infinity_scroll { display: flex; overflow: hidden; margin-top: 1.5rem; } @container (width < 750px) { .infinity_scroll { margin-top: 3.2vw; } } .infinity_scroll__list { display: flex; list-style: none; padding: 0; animation: infinity-scroll-left 20s infinite linear 0.5s both; } .infinity_scroll__item { width: 375px; } @container (width < 750px) { .infinity_scroll__item { width: 50vw; } } .infinity_scroll__item img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } @keyframes infinity-scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } .works { background-color: #f3f3f3; background-image: -webkit-image-set(url("../img/works_bg_top.webp") type("image/webp"), url("../img/works_bg_top.png") type("image/png")), -webkit-image-set(url("../img/works_bg_bottom.webp") type("image/webp"), url("../img/works_bg_bottom.png") type("image/png")); background-image: image-set(url("../img/works_bg_top.webp") type("image/webp"), url("../img/works_bg_top.png") type("image/png")), image-set(url("../img/works_bg_bottom.webp") type("image/webp"), url("../img/works_bg_bottom.png") type("image/png")); background-repeat: no-repeat, no-repeat; background-position: top left, bottom left; background-size: 100% auto, 100% auto; padding-top: 3.125rem; padding-bottom: 6.25rem; } @container (width < 750px) { .works { padding-top: 6.6666666667vw; padding-bottom: 13.3333333333vw; } } .works__head { position: relative; text-align: center; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } @container (width < 750px) { .works__head { padding-bottom: 5.3333333333vw; margin-bottom: 5.3333333333vw; } } .works__head .-title { font-size: 2.8125rem; font-weight: bold; letter-spacing: 0.06em; position: relative; z-index: 1; padding-top: 6.25rem; } @container (width < 750px) { .works__head .-title { font-size: 45px; font-size: 6vw; padding-top: 13.3333333333vw; } } .works__head .-title::before { content: ""; display: block; background-image: url("../img/works_title_bg.svg"); background-repeat: no-repeat; background-size: contain; width: 34rem; height: 8.9375rem; margin-inline: auto; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .works__head .-title::before { width: 72.5333333333vw; height: 19.0666666667vw; } } .works__head::after { content: ""; display: block; width: 3.75rem; height: 0.3125rem; background: linear-gradient(to right, #f6ae54 0 50%, #ec6d74 50% 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .works__head::after { width: 8vw; height: 0.6666666667vw; } } .works__text { font-size: 1.75rem; letter-spacing: 0.06em; text-align: center; } @container (width < 750px) { .works__text { line-height: 1.7; font-size: 28px; font-size: 3.7333333333vw; margin-bottom: 5.3333333333vw; } } .works__slider { margin-top: 3.5rem; position: relative; } @container (width < 750px) { .works__slider { margin-top: 7.4666666667vw; } } .works__slider .slick-list { overflow: visible; } .works__slider .dots_box { display: flex; align-items: center; justify-content: center; margin-top: 3rem; gap: 1.25rem; } @container (width < 750px) { .works__slider .dots_box { margin-top: 6.4vw; gap: 2.6666666667vw; } } .works__slider .dots_box li { width: 1.25rem; height: 1.25rem; border: #937864 1px solid; border-radius: 50%; background-color: var(--cl-white); } @container (width < 750px) { .works__slider .dots_box li { width: 2.6666666667vw; height: 2.6666666667vw; } } .works__slider .dots_box li.slick-active { background-color: #e3556d; border-color: #e3556d; } .works__slider .dots_box li button { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; padding: 0; border: none; background-color: transparent; } .works__slider .arrow_box { display: flex; align-items: center; justify-content: space-between; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .works__slider .arrow_box .prev-arrow, .works__slider .arrow_box .next-arrow { position: relative; cursor: pointer; } .works__slider .arrow_box .prev-arrow:before, .works__slider .arrow_box .next-arrow:before { content: ""; display: block; width: 5.625rem; height: 5.625rem; background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .works__slider .arrow_box .prev-arrow:before, .works__slider .arrow_box .next-arrow:before { width: 12vw; height: 12vw; } } .works__slider .arrow_box .prev-arrow { left: 1rem; } @container (width < 750px) { .works__slider .arrow_box .prev-arrow { left: 2.1333333333vw; } } .works__slider .arrow_box .prev-arrow:before { background-image: url("../img/works_slider_arrow_prev.svg"); } .works__slider .arrow_box .next-arrow { right: 1rem; } @container (width < 750px) { .works__slider .arrow_box .next-arrow { right: 2.1333333333vw; } } .works__slider .arrow_box .next-arrow:before { background-image: url("../img/works_slider_arrow_next.svg"); } .works__slideInner { width: 37.5rem; margin-inline: auto; } @container (width < 750px) { .works__slideInner { width: 80vw; } } .problem { background-color: var(--cl-white); } .problem__head { position: relative; text-align: center; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } @container (width < 750px) { .problem__head { padding-bottom: 5.3333333333vw; margin-bottom: 5.3333333333vw; } } .problem__head .-title { font-size: 2.8125rem; font-weight: bold; letter-spacing: 0.06em; padding-top: 6.25rem; } @container (width < 750px) { .problem__head .-title { font-size: 45px; font-size: 6vw; padding-top: 13.3333333333vw; } } .problem__head::after { content: ""; display: block; width: 3.75rem; height: 0.3125rem; background: linear-gradient(to right, #f6ae54 0 50%, #ec6d74 50% 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .problem__head::after { width: 8vw; height: 0.6666666667vw; } } .problem__img { width: 41.25rem; margin-inline: auto; } @container (width < 750px) { .problem__img { width: 88vw; } } .point { background-color: #f3f3f3; background-image: -webkit-image-set(url("../img/point_bg.webp") type("image/webp"), url("../img/point_bg.png") type("image/png")); background-image: image-set(url("../img/point_bg.webp") type("image/webp"), url("../img/point_bg.png") type("image/png")); background-repeat: no-repeat; background-position: top left; background-size: 100% auto; padding-top: 6.25rem; padding-bottom: 6.25rem; } @container (width < 750px) { .point { padding-top: 13.3333333333vw; padding-bottom: 13.3333333333vw; } } .point__head { position: relative; text-align: center; padding-bottom: 2.5rem; margin-bottom: 5.5rem; } @container (width < 750px) { .point__head { padding-bottom: 5.3333333333vw; margin-bottom: 11.7333333333vw; } } .point__head .-title { font-size: 2.8125rem; font-weight: bold; letter-spacing: 0.06em; position: relative; z-index: 1; padding-top: 6.25rem; } @container (width < 750px) { .point__head .-title { font-size: 45px; font-size: 6vw; padding-top: 13.3333333333vw; } } .point__head .-title::before { content: ""; display: block; background-image: url("../img/point_title_bg.svg"); background-repeat: no-repeat; background-size: contain; width: 27.8125rem; height: 8.9375rem; margin-inline: auto; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .point__head .-title::before { width: 59.3333333333vw; height: 19.0666666667vw; } } .point__head::after { content: ""; display: block; width: 3.75rem; height: 0.3125rem; background: linear-gradient(to right, #f6ae54 0 50%, #ec6d74 50% 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .point__head::after { width: 8vw; height: 0.6666666667vw; } } .point__list { display: flex; flex-direction: column; gap: 5rem; } @container (width < 750px) { .point__list { gap: 10.6666666667vw; } } .profile { background-color: var(--cl-white); background-image: -webkit-image-set(url("../img/profile_bg.webp") type("image/webp"), url("../img/profile_bg.png") type("image/png")); background-image: image-set(url("../img/profile_bg.webp") type("image/webp"), url("../img/profile_bg.png") type("image/png")); background-repeat: no-repeat; background-position: top left; background-size: 100% auto; } .profile__head { padding: 5.625rem 3.125rem 0; margin-bottom: 4rem; } @container (width < 750px) { .profile__head { padding: 12vw 6.6666666667vw 0; margin-bottom: 8.5333333333vw; } } .profile__head .-title { position: relative; font-size: 3.4375rem; font-weight: bold; } @container (width < 750px) { .profile__head .-title { font-size: 55px; font-size: 7.3333333333vw; } } .profile__head .-title::before { content: ""; display: block; background-image: url("../img/profile_title_bg.svg"); background-repeat: no-repeat; background-size: contain; width: 17.3125rem; height: 4.5625rem; margin-left: 3.5rem; margin-bottom: 2rem; } @container (width < 750px) { .profile__head .-title::before { width: 36.9333333333vw; height: 9.7333333333vw; margin-left: 7.4666666667vw; margin-bottom: 4.2666666667vw; } } .profile__body { width: 37.5rem; margin-inline: auto; background-color: var(--cl-white); border-radius: 1.875rem; box-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.1); padding: 3.5rem 3.125rem; } @container (width < 750px) { .profile__body { width: 80vw; padding: 7.4666666667vw 6.6666666667vw; } } .profile__catch { font-size: 2.5rem; line-height: 1.3; font-weight: bold; text-align: center; margin-bottom: 1.875rem; } @container (width < 750px) { .profile__catch { font-size: 40px; font-size: 5.3333333333vw; } } .profile__text { font-size: 1.5rem; line-height: 1.88; } @container (width < 750px) { .profile__text { font-size: 24px; font-size: 3.2vw; } } .profile__area { width: 37.5rem; margin: 4.5rem auto 0; } @container (width < 750px) { .profile__area { width: 80vw; margin: 9.6vw auto 0; } } .profile__area .-heading { text-align: center; font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; } @container (width < 750px) { .profile__area .-heading { font-size: 30px; font-size: 4vw; margin-bottom: 2.1333333333vw; } } .profile__area .-text { font-size: 1.5rem; line-height: 1.88; } @container (width < 750px) { .profile__area .-text { font-size: 24px; font-size: 3.2vw; } } .cta_gradient:before { content: ""; display: block; background-image: url("../img/cta_gradient_bg_top.svg"); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; width: 100%; height: 7.875rem; } @container (width < 750px) { .cta_gradient:before { height: 16.8vw; } } .cta_gradient__inner { background: linear-gradient(to right, #fcf0c5 0%, #f5d6db 100%); padding-block: 3.75rem 2.625rem; } @container (width < 750px) { .cta_gradient__inner { padding-block: 8vw 5.6vw; } } .cta_gradient__title { font-size: 1.875rem; letter-spacing: 0.08em; font-weight: bold; text-align: center; } @container (width < 750px) { .cta_gradient__title { font-size: 30px; font-size: 4vw; } } .episode { background-color: var(--cl-white); background-image: -webkit-image-set(url("../img/episode_bg_top.webp") type("image/webp"), url("../img/episode_bg_top.png") type("image/png")); background-image: image-set(url("../img/episode_bg_top.webp") type("image/webp"), url("../img/episode_bg_top.png") type("image/png")); background-repeat: no-repeat; background-size: 100% auto; } .episode__head { position: relative; text-align: center; padding-bottom: 2.5rem; padding-top: 10.625rem; margin-bottom: 2.5rem; } @container (width < 750px) { .episode__head { padding-bottom: 5.3333333333vw; padding-top: 22.6666666667vw; margin-bottom: 5.3333333333vw; } } .episode__head .-title { font-size: 2.8125rem; font-weight: bold; letter-spacing: 0.06em; position: relative; z-index: 1; padding-top: 6.25rem; } @container (width < 750px) { .episode__head .-title { font-size: 45px; font-size: 6vw; padding-top: 13.3333333333vw; } } .episode__head .-title::before { content: ""; display: block; background-image: url("../img/episode_title_bg.svg"); background-repeat: no-repeat; background-size: contain; width: 40.0625rem; height: 8.9375rem; margin-inline: auto; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .episode__head .-title::before { width: 85.4666666667vw; height: 19.0666666667vw; } } .episode__head::after { content: ""; display: block; width: 3.75rem; height: 0.3125rem; background: linear-gradient(to right, #f6ae54 0 50%, #ec6d74 50% 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .episode__head::after { width: 8vw; height: 0.6666666667vw; } } .episode__text { font-size: 1.75rem; letter-spacing: 0.06em; text-align: center; } @container (width < 750px) { .episode__text { line-height: 1.7; font-size: 28px; font-size: 3.7333333333vw; margin-bottom: 5.3333333333vw; } } .episode__slider { margin-top: 3.5rem; position: relative; } @container (width < 750px) { .episode__slider { margin-top: 7.4666666667vw; } } .episode__slider .slick-list { overflow: visible; } .episode__slider .dots_box { display: flex; align-items: center; justify-content: center; margin-top: 3rem; gap: 1.25rem; } @container (width < 750px) { .episode__slider .dots_box { margin-top: 6.4vw; gap: 2.6666666667vw; } } .episode__slider .dots_box li { width: 1.25rem; height: 1.25rem; border: #937864 1px solid; border-radius: 50%; background-color: var(--cl-white); } @container (width < 750px) { .episode__slider .dots_box li { width: 2.6666666667vw; height: 2.6666666667vw; } } .episode__slider .dots_box li.slick-active { background-color: #e3556d; border-color: #e3556d; } .episode__slider .dots_box li button { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; padding: 0; border: none; background-color: transparent; } .episode__slider .episode__arrow_box { display: flex; align-items: center; justify-content: space-between; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .episode__slider .episode__arrow_box .prev-arrow, .episode__slider .episode__arrow_box .next-arrow { position: relative; cursor: pointer; } .episode__slider .episode__arrow_box .prev-arrow:before, .episode__slider .episode__arrow_box .next-arrow:before { content: ""; display: block; width: 5.625rem; height: 5.625rem; background-repeat: no-repeat; background-size: contain; } @container (width < 750px) { .episode__slider .episode__arrow_box .prev-arrow:before, .episode__slider .episode__arrow_box .next-arrow:before { width: 12vw; height: 12vw; } } .episode__slider .episode__arrow_box .prev-arrow { left: 1rem; } @container (width < 750px) { .episode__slider .episode__arrow_box .prev-arrow { left: 2.1333333333vw; } } .episode__slider .episode__arrow_box .prev-arrow:before { background-image: url("../img/works_slider_arrow_prev.svg"); } .episode__slider .episode__arrow_box .next-arrow { right: 1rem; } @container (width < 750px) { .episode__slider .episode__arrow_box .next-arrow { right: 2.1333333333vw; } } .episode__slider .episode__arrow_box .next-arrow:before { background-image: url("../img/works_slider_arrow_next.svg"); } .episode__slideInner { width: 40.625rem; margin-inline: auto; } @container (width < 750px) { .episode__slideInner { width: 86.6666666667vw; } } .faq { background-color: #f3f3f3; background-image: -webkit-image-set(url("../img/faq_bg_top.webp") type("image/webp"), url("../img/faq_bg_top.png") type("image/png")); background-image: image-set(url("../img/faq_bg_top.webp") type("image/webp"), url("../img/faq_bg_top.png") type("image/png")); background-repeat: no-repeat; background-position: top center; background-size: 100% auto, 100% auto; padding-top: 12.5rem; padding-bottom: 5rem; } @container (width < 750px) { .faq { padding-top: 26.6666666667vw; padding-bottom: 10.6666666667vw; } } .faq__head { position: relative; text-align: center; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } @container (width < 750px) { .faq__head { padding-bottom: 5.3333333333vw; margin-bottom: 5.3333333333vw; } } .faq__head .-title { font-size: 2.8125rem; font-weight: bold; letter-spacing: 0.06em; position: relative; z-index: 0; } @container (width < 750px) { .faq__head .-title { font-size: 45px; font-size: 6vw; } } .faq__head .-title::before { content: ""; display: block; background-image: url("../img/faq_title_bg.svg"); background-repeat: no-repeat; background-size: contain; width: 10.3125rem; height: 18.6875rem; margin-inline: auto; position: absolute; z-index: -1; top: -4.6875rem; right: 1.25rem; } @container (width < 750px) { .faq__head .-title::before { width: 22vw; height: 39.8666666667vw; top: -10vw; right: 2.6666666667vw; } } .faq__head::after { content: ""; display: block; width: 3.75rem; height: 0.3125rem; background: linear-gradient(to right, #f6ae54 0 50%, #ec6d74 50% 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @container (width < 750px) { .faq__head::after { width: 8vw; height: 0.6666666667vw; } } .faq__list { width: 37.5rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; } @container (width < 750px) { .faq__list { width: 80vw; gap: 2.6666666667vw; } } /* --------------------------------------- Margin -----------------------------------------*/ .u-mt00 { margin-top: 0px !important; } .u-mt01 { margin-top: 1px !important; } .u-mt02 { margin-top: 2px !important; } .u-mt03 { margin-top: 3px !important; } .u-mt04 { margin-top: 4px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt06 { margin-top: 6px !important; } .u-mt07 { margin-top: 7px !important; } .u-mt08 { margin-top: 8px !important; } .u-mt09 { margin-top: 9px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt11 { margin-top: 11px !important; } .u-mt12 { margin-top: 12px !important; } .u-mt13 { margin-top: 13px !important; } .u-mt14 { margin-top: 14px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt16 { margin-top: 16px !important; } .u-mt17 { margin-top: 17px !important; } .u-mt18 { margin-top: 18px !important; } .u-mt19 { margin-top: 19px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mr00 { margin-right: 0 !important; } .u-mr01 { margin-right: 1px !important; } .u-mr02 { margin-right: 2px !important; } .u-mr03 { margin-right: 3px !important; } .u-mr04 { margin-right: 4px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr06 { margin-right: 6px !important; } .u-mr07 { margin-right: 7px !important; } .u-mr08 { margin-right: 8px !important; } .u-mr09 { margin-right: 9px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr11 { margin-right: 11px !important; } .u-mr12 { margin-right: 12px !important; } .u-mr13 { margin-right: 13px !important; } .u-mr14 { margin-right: 14px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr16 { margin-right: 16px !important; } .u-mr17 { margin-right: 17px !important; } .u-mr18 { margin-right: 18px !important; } .u-mr19 { margin-right: 19px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb01 { margin-bottom: 1px !important; } .u-mb02 { margin-bottom: 2px !important; } .u-mb03 { margin-bottom: 3px !important; } .u-mb04 { margin-bottom: 4px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb06 { margin-bottom: 6px !important; } .u-mb07 { margin-bottom: 7px !important; } .u-mb08 { margin-bottom: 8px !important; } .u-mb09 { margin-bottom: 9px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb11 { margin-bottom: 11px !important; } .u-mb12 { margin-bottom: 12px !important; } .u-mb13 { margin-bottom: 13px !important; } .u-mb14 { margin-bottom: 14px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb16 { margin-bottom: 16px !important; } .u-mb17 { margin-bottom: 17px !important; } .u-mb18 { margin-bottom: 18px !important; } .u-mb19 { margin-bottom: 19px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml01 { margin-left: 1px !important; } .u-ml02 { margin-left: 2px !important; } .u-ml03 { margin-left: 3px !important; } .u-ml04 { margin-left: 4px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml06 { margin-left: 6px !important; } .u-ml07 { margin-left: 7px !important; } .u-ml08 { margin-left: 8px !important; } .u-ml09 { margin-left: 9px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml11 { margin-left: 11px !important; } .u-ml12 { margin-left: 12px !important; } .u-ml13 { margin-left: 13px !important; } .u-ml14 { margin-left: 14px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml16 { margin-left: 16px !important; } .u-ml17 { margin-left: 17px !important; } .u-ml18 { margin-left: 18px !important; } .u-ml19 { margin-left: 19px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ma00 { margin: 0px !important; } .u-ma01 { margin: 1px !important; } .u-ma02 { margin: 2px !important; } .u-ma03 { margin: 3px !important; } .u-ma04 { margin: 4px !important; } .u-ma05 { margin: 5px !important; } .u-ma06 { margin: 6px !important; } .u-ma07 { margin: 7px !important; } .u-ma08 { margin: 8px !important; } .u-ma09 { margin: 9px !important; } .u-ma10 { margin: 10px !important; } .u-ma11 { margin: 11px !important; } .u-ma12 { margin: 12px !important; } .u-ma13 { margin: 13px !important; } .u-ma14 { margin: 14px !important; } .u-ma15 { margin: 15px !important; } .u-ma16 { margin: 16px !important; } .u-ma17 { margin: 17px !important; } .u-ma18 { margin: 18px !important; } .u-ma19 { margin: 19px !important; } .u-ma20 { margin: 20px !important; } .u-ma25 { margin: 25px !important; } .u-ma30 { margin: 30px !important; } .u-ma35 { margin: 35px !important; } .u-ma40 { margin: 40px !important; } .u-ma45 { margin: 45px !important; } .u-ma50 { margin: 50px !important; } .u-ma55 { margin: 55px !important; } .u-ma60 { margin: 60px !important; } .u-ma65 { margin: 65px !important; } .u-ma70 { margin: 70px !important; } .u-ma75 { margin: 75px !important; } .u-ma80 { margin: 80px !important; } .u-ma85 { margin: 85px !important; } .u-ma90 { margin: 90px !important; } .u-ma95 { margin: 95px !important; } .u-ma100 { margin: 100px !important; } /* --------------------------------------- Padding -----------------------------------------*/ .u-pt00 { padding-top: 0px !important; } .u-pt01 { padding-top: 1px !important; } .u-pt02 { padding-top: 2px !important; } .u-pt03 { padding-top: 3px !important; } .u-pt04 { padding-top: 4px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt06 { padding-top: 6px !important; } .u-pt07 { padding-top: 7px !important; } .u-pt08 { padding-top: 8px !important; } .u-pt09 { padding-top: 9px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt11 { padding-top: 11px !important; } .u-pt12 { padding-top: 12px !important; } .u-pt13 { padding-top: 13px !important; } .u-pt14 { padding-top: 14px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt16 { padding-top: 16px !important; } .u-pt17 { padding-top: 17px !important; } .u-pt18 { padding-top: 18px !important; } .u-pt19 { padding-top: 19px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr01 { padding-right: 1px !important; } .u-pr02 { padding-right: 2px !important; } .u-pr03 { padding-right: 3px !important; } .u-pr04 { padding-right: 4px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr06 { padding-right: 6px !important; } .u-pr07 { padding-right: 7px !important; } .u-pr08 { padding-right: 8px !important; } .u-pr09 { padding-right: 9px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr11 { padding-right: 11px !important; } .u-pr12 { padding-right: 12px !important; } .u-pr13 { padding-right: 13px !important; } .u-pr14 { padding-right: 14px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr16 { padding-right: 16px !important; } .u-pr17 { padding-right: 17px !important; } .u-pr18 { padding-right: 18px !important; } .u-pr19 { padding-right: 19px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb01 { padding-bottom: 1px !important; } .u-pb02 { padding-bottom: 2px !important; } .u-pb03 { padding-bottom: 3px !important; } .u-pb04 { padding-bottom: 4px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb06 { padding-bottom: 6px !important; } .u-pb07 { padding-bottom: 7px !important; } .u-pb08 { padding-bottom: 8px !important; } .u-pb09 { padding-bottom: 9px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb11 { padding-bottom: 11px !important; } .u-pb12 { padding-bottom: 12px !important; } .u-pb13 { padding-bottom: 13px !important; } .u-pb14 { padding-bottom: 14px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb16 { padding-bottom: 16px !important; } .u-pb17 { padding-bottom: 17px !important; } .u-pb18 { padding-bottom: 18px !important; } .u-pb19 { padding-bottom: 19px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl01 { padding-left: 1px !important; } .u-pl02 { padding-left: 2px !important; } .u-pl03 { padding-left: 3px !important; } .u-pl04 { padding-left: 4px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl06 { padding-left: 6px !important; } .u-pl07 { padding-left: 7px !important; } .u-pl08 { padding-left: 8px !important; } .u-pl09 { padding-left: 9px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl11 { padding-left: 11px !important; } .u-pl12 { padding-left: 12px !important; } .u-pl13 { padding-left: 13px !important; } .u-pl14 { padding-left: 14px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl16 { padding-left: 16px !important; } .u-pl17 { padding-left: 17px !important; } .u-pl18 { padding-left: 18px !important; } .u-pl19 { padding-left: 19px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pa00 { padding: 0px !important; } .u-pa01 { padding: 1px !important; } .u-pa02 { padding: 2px !important; } .u-pa03 { padding: 3px !important; } .u-pa04 { padding: 4px !important; } .u-pa05 { padding: 5px !important; } .u-pa06 { padding: 6px !important; } .u-pa07 { padding: 7px !important; } .u-pa08 { padding: 8px !important; } .u-pa09 { padding: 9px !important; } .u-pa10 { padding: 10px !important; } .u-pa11 { padding: 11px !important; } .u-pa12 { padding: 12px !important; } .u-pa13 { padding: 13px !important; } .u-pa14 { padding: 14px !important; } .u-pa15 { padding: 15px !important; } .u-pa16 { padding: 16px !important; } .u-pa17 { padding: 17px !important; } .u-pa18 { padding: 18px !important; } .u-pa19 { padding: 19px !important; } .u-pa20 { padding: 20px !important; } .u-pa25 { padding: 25px !important; } .u-pa30 { padding: 30px !important; } .u-pa35 { padding: 35px !important; } .u-pa40 { padding: 40px !important; } .u-pa45 { padding: 45px !important; } .u-pa50 { padding: 50px !important; } .u-pa55 { padding: 55px !important; } .u-pa60 { padding: 60px !important; } .u-pa65 { padding: 65px !important; } .u-pa70 { padding: 70px !important; } .u-pa75 { padding: 75px !important; } .u-pa80 { padding: 80px !important; } .u-pa85 { padding: 85px !important; } .u-pa90 { padding: 90px !important; } .u-pa95 { padding: 95px !important; } .u-pa100 { padding: 100px !important; } /*# sourceMappingURL=maps/style.css.map */