@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, #fd6101 0%, #f5483d 100%); --cl-dept01: linear-gradient(126deg, #f6735d 13.56%, #e94c69 85.43%); --cl-dept02: linear-gradient(126deg, #9cda8b 13.56%, #44a561 85.43%); --cl-dept03: linear-gradient(126deg, #67caf2 13.56%, #2f9ed8 85.43%); --cl-dept04: linear-gradient(126deg, #4b9bea 13.56%, #3060c9 85.43%); --cl-dept05: linear-gradient(126deg, #edb20d 13.56%, #f69f3a 85.43%); --cl-line: #4cc764; --cl-trial: #a9d7ff; --cl-gradient01: linear-gradient(141deg, #8dc1b4 14.24%, #82b4bf 86.45%); --cl-gradient02: linear-gradient(141deg, #bfc1d8 14.24%, #5fa5be 86.45%); --cl-gradient03: linear-gradient(141deg, #7da8bb 14.24%, #abae9b 86.45%); --cl-border: #dedede; --cl-bg: #f2f2f2; --cl-text: #333; --cl-link: #333; --cl-link-hover: #333; --cl-gray: #ccc; --cl-white: #fff; --font-poppins: "Poppins", sans-serif; --font-noto: "Noto Sans JP", sans-serif; --scale: 1.1; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-in-out; --opacity: 0.8; } html { scroll-behavior: smooth; } @container (width >= 501px) and (width < 768px) { html { scroll-padding-top: 15.3846153846vw; } } @container (width >= 769px) and (width < 1024px) { html { scroll-padding-top: 15.3846153846vw; } } 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; display: grid; grid-template: "header" auto "contents" 1fr "footer" auto/1fr; min-height: 100dvh; position: relative; } 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); box-sizing: border-box; } html body.modal-open { overflow: hidden; } /* --------------------------------------- Header -----------------------------------------*/ .header { display: none; } @media screen and (width <= 1024px) { .header { display: block; background-color: var(--cl-white); position: sticky; width: 100%; top: 0; left: 0; z-index: 10; transition: all 0.3s; } } .header__wrapper { width: 100%; height: 3.75rem; max-width: 28.75rem; margin-inline: auto; padding-block: 0.8125rem; display: flex; align-items: center; justify-content: space-between; } @container (width >= 501px) and (width < 768px) { .header__wrapper { height: 15.3846153846vw; max-width: 89.7435897436vw; padding-block: 3.3333333333vw; } } @container (width < 500px) { .header__wrapper { height: 15.3846153846vw; max-width: 89.7435897436vw; padding-block: 3.3333333333vw; } } .header__logo { width: 12.5625rem; height: 2.125rem; } @container (width >= 501px) and (width < 768px) { .header__logo { width: 51.5384615385vw; height: 8.7179487179vw; } } @container (width < 500px) { .header__logo { width: 51.5384615385vw; height: 8.7179487179vw; } } .header__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header.is_sticked { background-color: rgba(255, 255, 255, 0.9); } /* --------------------------------------- Global Navigation -----------------------------------------*/ .gNavi { display: none; } @media screen and (width <= 1024px) { .gNavi { display: block; width: 25rem; border-radius: 0 0 0 0.5rem; position: fixed; top: 3.75rem; right: calc(50% - 15.625rem); z-index: 10; transition: 0.5s ease-in-out; visibility: hidden; opacity: 0; transition: var(--transition); } @container (width >= 501px) and (width < 768px) { .gNavi { width: 86%; border-radius: 0 0 0 2.0512820513vw; top: 15.3846153846vw; right: 0; } } @container (width < 500px) { .gNavi { width: 86%; border-radius: 0 0 0 2.0512820513vw; top: 15.3846153846vw; right: 0; } } .gNavi.is_active { visibility: visible; opacity: 1; } } .gNavi__list { display: flex; flex-direction: column; background-color: #fff; } .gNavi__list li { border-bottom: 1px solid #dedede; } .gNavi__list li a { display: flex; padding: 1rem; -moz-column-gap: 0.5rem; column-gap: 0.5rem; position: relative; } @container (width >= 501px) and (width < 768px) { .gNavi__list li a { padding: 4.1025641026vw; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; } } @container (width < 500px) { .gNavi__list li a { padding: 4.1025641026vw; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; } } .gNavi__list li a::after { content: ""; background-image: url("../img/page/icon_arrow.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 0.5rem; height: 0.6875rem; } @container (width >= 501px) and (width < 768px) { .gNavi__list li a::after { right: 4.1025641026vw; width: 2.0512820513vw; height: 2.8205128205vw; } } @container (width < 500px) { .gNavi__list li a::after { right: 4.1025641026vw; width: 2.0512820513vw; height: 2.8205128205vw; } } .gNavi__list li .-jp, .gNavi__list li .-en { font-weight: 500; margin-block: var(--trim-leading); } .gNavi__list li .-jp { font-size: 0.9375rem; letter-spacing: 0.046875rem; line-height: 2.2; } @container (width >= 501px) and (width < 768px) { .gNavi__list li .-jp { font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } @container (width < 500px) { .gNavi__list li .-jp { font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } .gNavi__list li .-en { display: block; color: var(--cl-gray); font-size: 0.8125rem; line-height: 2.5; text-transform: capitalize; } @container (width >= 501px) and (width < 768px) { .gNavi__list li .-en { font-size: 13px; font-size: 3.3333333333vw; } } @container (width < 500px) { .gNavi__list li .-en { font-size: 13px; font-size: 3.3333333333vw; } } /* --------------------------------------- Global Navigation for Smartphone -----------------------------------------*/ .navToggle { display: none; } @media screen and (width <= 1024px) { .navToggle { display: block; } } .navToggle__btn { width: 3.75rem; height: 1.75rem; display: grid; place-content: center; border-radius: 0.375rem; border: 1px solid #bbd4f5; background-color: var(--cl-white); color: var(--cl-main); text-transform: capitalize; font-size: 0.75rem; letter-spacing: 0.0375rem; transition: var(--transition); } @container (width >= 501px) and (width < 768px) { .navToggle__btn { width: 15.3846153846vw; height: 7.1794871795vw; border-radius: 1.5384615385vw; font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } @container (width < 500px) { .navToggle__btn { width: 15.3846153846vw; height: 7.1794871795vw; border-radius: 1.5384615385vw; font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } .navToggle__btn.is_active { background-color: #bbd4f5; } .gNaviOverlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9; transition: opacity 0.3s ease; } .gNaviOverlay.is_active { display: block; } .gNavi.js-gNavi { z-index: 10; background: #fff; padding: 0.5rem 0.5rem 1.5rem; } .gNavi__btn { width: 96%; margin: 0 auto; margin-top: 1.25rem; } @media (max-width: 350px) { .gNavi__btn { margin-top: 0.75rem; } } @media (max-width: 375px) { .gNavi__btn { margin-top: 0.875rem; } .gNavi__btn:first-of-type { margin-top: 0.5rem; } } /* --------------------------------------- Container -----------------------------------------*/ .container { display: grid; align-items: start; grid-template-columns: 1fr 31.25rem 1fr; } @media screen and (width <= 767px) { .container { display: block; } } .container__nav, .container__cta { position: sticky; top: 0; height: 100dvh; overflow: hidden; } .container__nav { background: linear-gradient(106deg, #b7bed6 0%, #fff 100%); } @media screen and (width <= 767px) { .container__nav { display: none; } } .container__cta { background: linear-gradient(106deg, #fff 0%, #67a7c0 175.35%); } @media screen and (width <= 767px) { .container__cta { display: none; } } .container__main { container-type: inline-size; position: relative; overflow: clip; } @media screen and (width <= 767px) { .container__main { width: 100%; } } .pc-navi { width: 100%; background: var(--cl-white); position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (width > 1400px) { .pc-navi { max-width: 21.75rem; border-radius: 1rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.08); padding: 2.5rem 2.5rem 1.5rem; } } @media screen and (width <= 1400px) { .pc-navi { max-width: 24.8571428571vw; border-radius: 1.1428571429vw; box-shadow: 0 0 1.1428571429vw 0 rgba(0, 0, 0, 0.08); padding: 2.8571428571vw 2.8571428571vw 1.7142857143vw; } } @media screen and (width <= 1024px) { .pc-navi { display: none; } } .pc-navi__list { display: flex; flex-direction: column; } .pc-navi__list > li { position: relative; } .pc-navi__list > li > a { display: block; margin-block: var(--trim-leading); } @media screen and (width > 1400px) { .pc-navi__list > li > a { padding-block: 0.8125rem 0.75rem; } } @media screen and (width <= 1400px) { .pc-navi__list > li > a { padding-block: 0.9285714286vw 0.8571428571vw; } } .pc-navi__list > li:not(:last-child) { border-bottom: var(--cl-border) 1px solid; } @media screen and (width > 1400px) { .pc-navi__list > li:first-child > a { padding-block: 0 0.8125rem; } } @media screen and (width <= 1400px) { .pc-navi__list > li:first-child > a { padding-block: 0 0.9285714286vw; } } @media screen and (width > 1400px) { .pc-navi__list > li:last-child > a { padding-block: 0.625rem 0; } } @media screen and (width <= 1400px) { .pc-navi__list > li:last-child > a { padding-block: 0.7142857143vw 0; } } .pc-navi__list > li::after { content: ""; background-image: url("../img/page/icon_arrow.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } @media screen and (width > 1400px) { .pc-navi__list > li::after { width: 0.5rem; height: 0.6875rem; } } @media screen and (width <= 1400px) { .pc-navi__list > li::after { width: 0.5714285714vw; height: 0.7857142857vw; } } .pc-navi__list > li .-jp, .pc-navi__list > li .-en { font-weight: 500; margin-block: var(--trim-leading); } .pc-navi__list > li .-jp { letter-spacing: 0.046875rem; line-height: 2.2; } @media screen and (width > 1400px) { .pc-navi__list > li .-jp { font-size: 0.9375rem; } } @media screen and (width <= 1400px) { .pc-navi__list > li .-jp { font-size: 15px; font-size: 1.0714285714vw; } } .pc-navi__list > li .-en { display: block; color: var(--cl-gray); line-height: 2.5; text-transform: capitalize; } @media screen and (width > 1400px) { .pc-navi__list > li .-en { font-size: 0.8125rem; } } @media screen and (width <= 1400px) { .pc-navi__list > li .-en { font-size: 13px; font-size: 0.9285714286vw; } } .pc-cta { width: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (width <= 1024px) { .pc-cta { display: none; } } .pc-cta__title { margin-inline: auto; } @media screen and (width > 1400px) { .pc-cta__title { width: 16.4375rem; height: 2.8125rem; margin-bottom: 2.5rem; } } @media screen and (width <= 1400px) { .pc-cta__title { width: 18.7857142857vw; height: 3.2142857143vw; margin-bottom: 2.8571428571vw; } } .pc-cta__title img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .pc-cta__catch { text-align: center; font-weight: bold; line-height: 1.2; background: var(--cl-cta); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-block: var(--trim-leading); } @media screen and (width > 1400px) { .pc-cta__catch { font-size: 1.75rem; letter-spacing: 0.0875rem; margin-bottom: 2.5rem; } } @media screen and (width <= 1400px) { .pc-cta__catch { font-size: 28px; font-size: 2vw; letter-spacing: 0.1vw; margin-bottom: 2.8571428571vw; } } .pc-cta__dept-list { display: grid; grid-template-columns: repeat(12, 1fr); margin-inline: auto; } @media screen and (width > 1400px) { .pc-cta__dept-list { gap: 0.5625rem 0.75rem; width: 20rem; margin-bottom: 1rem; } } @media screen and (width <= 1400px) { .pc-cta__dept-list { gap: 0.6428571429vw 0.8571428571vw; width: 22.8571428571vw; margin-bottom: 1.1428571429vw; } } .pc-cta__dept-list .-dept01, .pc-cta__dept-list .-dept02, .pc-cta__dept-list .-dept03, .pc-cta__dept-list .-dept04, .pc-cta__dept-list .-dept05 { position: relative; display: flex; align-items: center; justify-content: center; } @media screen and (width > 1400px) { .pc-cta__dept-list .-dept01, .pc-cta__dept-list .-dept02, .pc-cta__dept-list .-dept03, .pc-cta__dept-list .-dept04, .pc-cta__dept-list .-dept05 { height: 2rem; } } @media screen and (width <= 1400px) { .pc-cta__dept-list .-dept01, .pc-cta__dept-list .-dept02, .pc-cta__dept-list .-dept03, .pc-cta__dept-list .-dept04, .pc-cta__dept-list .-dept05 { height: 2.2857142857vw; } } .pc-cta__dept-list .-dept01::before, .pc-cta__dept-list .-dept01::after, .pc-cta__dept-list .-dept02::before, .pc-cta__dept-list .-dept02::after, .pc-cta__dept-list .-dept03::before, .pc-cta__dept-list .-dept03::after, .pc-cta__dept-list .-dept04::before, .pc-cta__dept-list .-dept04::after, .pc-cta__dept-list .-dept05::before, .pc-cta__dept-list .-dept05::after { content: ""; display: block; position: absolute; } @media screen and (width > 1400px) { .pc-cta__dept-list .-dept01::before, .pc-cta__dept-list .-dept01::after, .pc-cta__dept-list .-dept02::before, .pc-cta__dept-list .-dept02::after, .pc-cta__dept-list .-dept03::before, .pc-cta__dept-list .-dept03::after, .pc-cta__dept-list .-dept04::before, .pc-cta__dept-list .-dept04::after, .pc-cta__dept-list .-dept05::before, .pc-cta__dept-list .-dept05::after { border-radius: 0.25rem; } } @media screen and (width <= 1400px) { .pc-cta__dept-list .-dept01::before, .pc-cta__dept-list .-dept01::after, .pc-cta__dept-list .-dept02::before, .pc-cta__dept-list .-dept02::after, .pc-cta__dept-list .-dept03::before, .pc-cta__dept-list .-dept03::after, .pc-cta__dept-list .-dept04::before, .pc-cta__dept-list .-dept04::after, .pc-cta__dept-list .-dept05::before, .pc-cta__dept-list .-dept05::after { border-radius: 0.2857142857vw; } } .pc-cta__dept-list .-dept01::before, .pc-cta__dept-list .-dept02::before, .pc-cta__dept-list .-dept03::before, .pc-cta__dept-list .-dept04::before, .pc-cta__dept-list .-dept05::before { width: 100%; height: 100%; top: 0; left: 0; z-index: -2; } .pc-cta__dept-list .-dept01::after, .pc-cta__dept-list .-dept02::after, .pc-cta__dept-list .-dept03::after, .pc-cta__dept-list .-dept04::after, .pc-cta__dept-list .-dept05::after { display: block; background-color: var(--cl-white); width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; z-index: -1; } .pc-cta__dept-list .-dept01 span, .pc-cta__dept-list .-dept02 span, .pc-cta__dept-list .-dept03 span, .pc-cta__dept-list .-dept04 span, .pc-cta__dept-list .-dept05 span { display: block; text-align: center; position: relative; z-index: 2; font-weight: 500; line-height: 1.8; } @media screen and (width > 1400px) { .pc-cta__dept-list .-dept01 span, .pc-cta__dept-list .-dept02 span, .pc-cta__dept-list .-dept03 span, .pc-cta__dept-list .-dept04 span, .pc-cta__dept-list .-dept05 span { font-size: 0.8125rem; letter-spacing: 0.01625rem; } } @media screen and (width <= 1400px) { .pc-cta__dept-list .-dept01 span, .pc-cta__dept-list .-dept02 span, .pc-cta__dept-list .-dept03 span, .pc-cta__dept-list .-dept04 span, .pc-cta__dept-list .-dept05 span { font-size: 13px; font-size: 0.9285714286vw; letter-spacing: 0.0185714286vw; } } .pc-cta__dept-list .-dept01 { grid-column: 1/5; } .pc-cta__dept-list .-dept01 span { background: var(--cl-dept01); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pc-cta__dept-list .-dept01::before { background: var(--cl-dept01); } .pc-cta__dept-list .-dept02 { grid-column: 5/9; } .pc-cta__dept-list .-dept02 span { background: var(--cl-dept02); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pc-cta__dept-list .-dept02::before { background: var(--cl-dept02); } .pc-cta__dept-list .-dept03 { grid-column: 9/13; } .pc-cta__dept-list .-dept03 span { background: var(--cl-dept03); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pc-cta__dept-list .-dept03::before { background: var(--cl-dept03); } .pc-cta__dept-list .-dept04 { grid-column: 1/7; } .pc-cta__dept-list .-dept04 span { background: var(--cl-dept04); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pc-cta__dept-list .-dept04::before { background: var(--cl-dept04); } .pc-cta__dept-list .-dept05 { grid-column: 7/13; } .pc-cta__dept-list .-dept05 span { background: var(--cl-dept05); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pc-cta__dept-list .-dept05::before { background: var(--cl-dept05); } .pc-cta__btn-wrapper { margin-inline: auto; } @media screen and (width > 1400px) { .pc-cta__btn-wrapper { width: 20rem; margin-bottom: 2.25rem; } } @media screen and (width <= 1400px) { .pc-cta__btn-wrapper { width: 22.8571428571vw; margin-bottom: 2.5714285714vw; } } .pc-cta__info-wrapper { background-color: #f2f2f2; display: flex; margin-inline: auto; } @media screen and (width > 1400px) { .pc-cta__info-wrapper { width: 21.75rem; border-radius: 1rem; padding: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; } } @media screen and (width <= 1400px) { .pc-cta__info-wrapper { width: 24.8571428571vw; border-radius: 1.1428571429vw; padding: 1.4285714286vw; -moz-column-gap: 1.4285714286vw; column-gap: 1.4285714286vw; } } .pc-cta__info-btn { display: grid; place-content: center; position: relative; font-weight: bold; line-height: 1.3; text-align: center; } @media screen and (width > 1400px) { .pc-cta__info-btn { width: 9rem; height: 7.375rem; border-radius: 0.5rem; font-size: 0.875rem; letter-spacing: 0.04375rem; } } @media screen and (width <= 1400px) { .pc-cta__info-btn { width: 10.2857142857vw; height: 8.4285714286vw; border-radius: 0.5714285714vw; font-size: 14px; font-size: 1vw; letter-spacing: 0.05vw; } } .pc-cta__info-btn::before { content: ""; display: block; background-repeat: no-repeat; background-size: contain; position: absolute; } @media screen and (width > 1400px) { .pc-cta__info-btn::before { width: 0.5rem; height: 0.5rem; bottom: 0.375rem; right: 0.375rem; } } @media screen and (width <= 1400px) { .pc-cta__info-btn::before { width: 0.5714285714vw; height: 0.5714285714vw; bottom: 0.4285714286vw; right: 0.4285714286vw; } } .pc-cta__info-btn--line { background-color: var(--cl-line); color: var(--cl-white); box-shadow: rgb(45, 120, 76) 0px 6px 0px; } @media (min-width: 1024px) { .pc-cta__info-btn--line:hover { box-shadow: none; transform: translateY(5px); } } .pc-cta__info-btn--line::before { background-image: url("../img/page/icon_arrow_info_btn_line.svg"); } @media (any-hover: hover) { .pc-cta__info-btn--line:hover { color: var(--cl-white); } } .pc-cta__info-btn--trial { background-color: var(--cl-trial); color: var(--cl-main); box-shadow: rgb(24, 99, 149) 0px 6px 0px; } @media (min-width: 1024px) { .pc-cta__info-btn--trial:hover { box-shadow: none; transform: translateY(5px); } } .pc-cta__info-btn--trial::before { background-image: url("../img/page/icon_arrow_info_btn_trial.svg"); } @media (any-hover: hover) { .pc-cta__info-btn--trial:hover { color: var(--cl-main); } } .pc-cta__info-btn-icon { margin-inline: auto; } @media screen and (width > 1400px) { .pc-cta__info-btn-icon { width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; } } @media screen and (width <= 1400px) { .pc-cta__info-btn-icon { width: 2.5714285714vw; height: 2.5714285714vw; margin-bottom: 0.8571428571vw; } } .pc-cta__info-btn-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* --------------------------------------- Footer -----------------------------------------*/ .footer { background-color: var(--cl-bg); } .footer__wrapper { width: 24.375rem; margin-inline: auto; padding-bottom: 1.875rem; } @container (width >= 501px) and (width < 768px) { .footer__wrapper { width: 89.7435897436vw; padding-bottom: 25.641025641vw; } } @container (width < 500px) { .footer__wrapper { width: 89.7435897436vw; padding-bottom: 25.641025641vw; } } .footer__title { position: relative; padding-top: 3.375rem; } @container (width >= 501px) and (width < 768px) { .footer__title { padding-top: 13.8461538462vw; } } @container (width < 500px) { .footer__title { padding-top: 13.8461538462vw; } } .footer__title .-en { display: block; text-align: center; font-family: var(--font-poppins); font-weight: 500; font-size: 4rem; color: var(--cl-white); text-transform: capitalize; position: absolute; bottom: -0.25rem; left: 50%; transform: translateX(-50%); } @container (width >= 501px) and (width < 768px) { .footer__title .-en { font-size: 64px; font-size: 16.4102564103vw; bottom: -1.0256410256vw; } } @container (width < 500px) { .footer__title .-en { font-size: 64px; font-size: 16.4102564103vw; bottom: -1.0256410256vw; } } .footer__title .-ja { display: block; text-align: center; font-size: 1.625rem; font-weight: 700; position: relative; z-index: 1; } @container (width >= 501px) and (width < 768px) { .footer__title .-ja { font-size: 26px; font-size: 6.6666666667vw; } } @container (width < 500px) { .footer__title .-ja { font-size: 26px; font-size: 6.6666666667vw; } } .footer__text { text-align: center; font-size: 0.8125rem; letter-spacing: 0.040625rem; margin-top: 0.5rem; } @container (width >= 501px) and (width < 768px) { .footer__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .footer__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .footer__contact-wrapper { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; } @container (width >= 501px) and (width < 768px) { .footer__contact-wrapper { margin-top: 7.1794871795vw; gap: 2.0512820513vw; } } @container (width < 500px) { .footer__contact-wrapper { margin-top: 7.1794871795vw; gap: 2.0512820513vw; } } .footer__contact-name { text-align: center; font-size: 0.8125rem; } @container (width >= 501px) and (width < 768px) { .footer__contact-name { font-size: 13px; font-size: 3.3333333333vw; } } @container (width < 500px) { .footer__contact-name { font-size: 13px; font-size: 3.3333333333vw; } } .footer__contact-btn { background-color: var(--cl-white); max-width: 17.5rem; height: 3rem; margin-inline: auto; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.046875rem; } @container (width >= 501px) and (width < 768px) { .footer__contact-btn { max-width: 71.7948717949vw; height: 12.3076923077vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } @container (width < 500px) { .footer__contact-btn { max-width: 71.7948717949vw; height: 12.3076923077vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } .footer__contact-btn::after { content: ""; background-image: url("../img/page/icon_arrow_btn_gray.svg"); background-repeat: no-repeat; background-size: contain; width: 1.625rem; height: 1.625rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } @container (width >= 501px) and (width < 768px) { .footer__contact-btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @container (width < 500px) { .footer__contact-btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @media (any-hover: hover) { .footer__contact-btn:hover { opacity: var(--opacity); } } .footer__sns { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; } @container (width >= 501px) and (width < 768px) { .footer__sns { gap: 6.1538461538vw; margin-top: 6.1538461538vw; } } @container (width < 500px) { .footer__sns { gap: 6.1538461538vw; margin-top: 6.1538461538vw; } } .footer__sns li a { display: block; width: 1.6875rem; height: 1.6875rem; } @container (width >= 501px) and (width < 768px) { .footer__sns li a { width: 6.9230769231vw; height: 6.9230769231vw; } } @container (width < 500px) { .footer__sns li a { width: 6.9230769231vw; height: 6.9230769231vw; } } .footer__sns li a img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .footer__copyright { font-size: 0.625rem; letter-spacing: 0.03125rem; margin-top: 2.25rem; } @container (width >= 501px) and (width < 768px) { .footer__copyright { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; margin-top: 9.2307692308vw; } } @container (width < 500px) { .footer__copyright { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; margin-top: 9.2307692308vw; } } /* --------------------------------------- Section -----------------------------------------*/ .section__head { width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .section__head { max-width: 89.7435897436vw; } } @container (width < 500px) { .section__head { max-width: 89.7435897436vw; } } .section__head .-en, .section__head .-ja { display: block; } .section__head .-en { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-poppins); font-size: 0.875rem; letter-spacing: 0.04375rem; font-weight: 500; text-transform: capitalize; margin-bottom: 0.25rem; } @container (width >= 501px) and (width < 768px) { .section__head .-en { gap: 1.5384615385vw; font-size: 14px; font-size: 3.5897435897vw; letter-spacing: 0.1794871795vw; margin-bottom: 1.0256410256vw; } } @container (width < 500px) { .section__head .-en { gap: 1.5384615385vw; font-size: 14px; font-size: 3.5897435897vw; letter-spacing: 0.1794871795vw; margin-bottom: 1.0256410256vw; } } .section__head .-en::before { content: "●"; font-size: 0.375rem; color: var(--cl-main); } @container (width >= 501px) and (width < 768px) { .section__head .-en::before { font-size: 6px; font-size: 1.5384615385vw; } } @container (width < 500px) { .section__head .-en::before { font-size: 6px; font-size: 1.5384615385vw; } } .section__head .-ja { font-feature-settings: "palt"; font-size: 1.625rem; font-weight: 700; letter-spacing: 0.08125rem; } @container (width >= 501px) and (width < 768px) { .section__head .-ja { font-size: 26px; font-size: 6.6666666667vw; letter-spacing: 0.3333333333vw; } } @container (width < 500px) { .section__head .-ja { font-size: 26px; font-size: 6.6666666667vw; letter-spacing: 0.3333333333vw; } } /* --------------------------------------- Button -----------------------------------------*/ .btn { display: flex; align-items: center; justify-content: center; border-radius: 9999px; width: 100%; font-weight: bold; position: relative; } .btn--cta { background: var(--cl-cta); box-shadow: 0 7px 0 #bd3f23; color: var(--cl-white); } @media (min-width: 1024px) { .btn--cta:hover { box-shadow: none; transform: translateY(5px); } } @media screen and (width > 1400px) { .btn--cta { height: 3.875rem; font-size: 1.125rem; letter-spacing: 0.05625rem; } } @media screen and (width <= 1400px) { .btn--cta { height: 4.4285714286vw; font-size: 18px; font-size: 1.2857142857vw; letter-spacing: 0.0642857143vw; } } @media screen and (width <= 767px) { .btn--cta { height: 15.8974358974vw; font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @media (any-hover: hover) { .btn--cta:hover { opacity: var(--opacity); color: var(--cl-white); } } .btn--cta::before { content: ""; display: block; background-image: url("../img/page/icon_book.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1400px) { .btn--cta::before { width: 1.375rem; height: 1.375rem; left: 1.5rem; } } @media screen and (width <= 1400px) { .btn--cta::before { width: 1.5714285714vw; height: 1.5714285714vw; left: 1.7142857143vw; } } @media screen and (width <= 767px) { .btn--cta::before { width: 5.641025641vw; height: 5.641025641vw; left: 6.1538461538vw; } } .btn--cta::after { content: ""; display: block; background-image: url("../img/page/icon_arrow_btn.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1400px) { .btn--cta::after { width: 1.625rem; height: 1.625rem; right: 1rem; } } @media screen and (width <= 1400px) { .btn--cta::after { width: 1.8571428571vw; height: 1.8571428571vw; right: 1.1428571429vw; } } @media screen and (width <= 767px) { .btn--cta::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } /* --------------------------------------- Course Card -----------------------------------------*/ .course-card { border-radius: 1rem; min-height: 10rem; box-sizing: border-box; position: relative; background-repeat: no-repeat; background-size: cover; } @container (width >= 501px) and (width < 768px) { .course-card { border_radius: 4.1025641026vw; min-height: 41.0256410256vw; } } @container (width < 500px) { .course-card { border-radius: 4.1025641026vw; min-height: 41.0256410256vw; } } .course-card.-dept01 { background-image: url("../img/page/course_dept01_bg.png"); } .course-card.-dept01 .course-card__icon:after { background-image: url("../img/page/icon_dept01.svg"); } .course-card.-dept02 { background-size: 110% auto; background-image: url("../img/page/course_dept02_bg.png"); } .course-card.-dept02 .course-card__icon:after { background-image: url("../img/page/icon_dept02.svg"); } .course-card.-dept02 .course-card__icon.-active::after { background-image: url("../img/page/icon_dept02_active.svg"); } .course-card.-dept03 { background-image: url("../img/page/course_dept03_bg.png"); } .course-card.-dept03 .course-card__icon:after { background-image: url("../img/page/icon_dept03.svg"); } .course-card.-dept03 .course-card__icon.-active::after { background-image: url("../img/page/icon_dept03_active.svg"); } .course-card.-dept04 { background-image: url("../img/page/course_dept04_bg.png"); } .course-card.-dept04 .course-card__icon:after { background-image: url("../img/page/icon_dept04.svg"); } .course-card.-dept04 .course-card__icon.-active::after { background-image: url("../img/page/icon_dept04_active.svg"); } .course-card.-dept05 { background-size: 114% auto; background-image: url("../img/page/course_dept05_bg.png"); } .course-card.-dept05 .course-card__icon:after { background-image: url("../img/page/icon_dept05.svg"); } .course-card.-dept05 .course-card__icon.-active::after { background-image: url("../img/page/icon_dept05_active.svg"); } .course-card__head { cursor: pointer; padding: 2.25rem 2rem 0; } @container (width >= 501px) and (width < 768px) { .course-card__head { padding: 9.2307692308vw 8.2051282051vw 0; } } @container (width < 500px) { .course-card__head { padding: 9.2307692308vw 8.2051282051vw 0; } } .course-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05625rem; color: var(--cl-white); } @container (width >= 501px) and (width < 768px) { .course-card__title { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @container (width < 500px) { .course-card__title { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } .course-card__text { font-size: 0.8125rem; font-feature-settings: "palt"; font-weight: 400; letter-spacing: 0.040625rem; color: var(--cl-white); margin-top: 0.75rem; } @container (width >= 501px) and (width < 768px) { .course-card__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; margin-top: 3.0769230769vw; } } @container (width < 500px) { .course-card__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; margin-top: 3.0769230769vw; } } .course-card__icon { position: absolute; top: 3.5rem; right: 1.5rem; } @container (width >= 501px) and (width < 768px) { .course-card__icon { top: 14.358974359vw; right: 6.1538461538vw; } } @container (width < 500px) { .course-card__icon { top: 14.358974359vw; right: 6.1538461538vw; } } .course-card__icon::after { content: ""; display: inline-block; width: 2.625rem; height: 2.625rem; background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .course-card__icon::after { width: 10.7692307692vw; height: 10.7692307692vw; } } @container (width < 500px) { .course-card__icon::after { width: 10.7692307692vw; height: 10.7692307692vw; } } .course-card__body { padding: 1.5rem 2rem 2.25rem; display: none; } @container (width >= 501px) and (width < 768px) { .course-card__body { padding: 6.1538461538vw 8.2051282051vw 9.2307692308vw; } } @container (width < 500px) { .course-card__body { padding: 6.1538461538vw 8.2051282051vw 9.2307692308vw; } } .course-card__list { display: flex; flex-direction: column; gap: 0.5rem; } @container (width >= 501px) and (width < 768px) { .course-card__list { gap: 2.0512820513vw; } } @container (width < 500px) { .course-card__list { gap: 2.0512820513vw; } } .course-card__list:not(:last-of-type) { margin-bottom: 0.5rem; } @container (width >= 501px) and (width < 768px) { .course-card__list:not(:last-of-type) { margin-bottom: 2.0512820513vw; } } @container (width < 500px) { .course-card__list:not(:last-of-type) { margin-bottom: 2.0512820513vw; } } .course-card__btn { display: flex; align-items: center; width: 100%; height: 2.625rem; border: var(--cl-white) 1px solid; border-radius: 9999px; padding-inline: 1.25rem; font-size: 0.8125rem; letter-spacing: 0.0375rem; font-weight: 700; font-feature-settings: "palt"; color: var(--cl-white); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: relative; } @container (width >= 501px) and (width < 768px) { .course-card__btn { height: 10.7692307692vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1538461538vw; } } @container (width < 500px) { .course-card__btn { height: 10.7692307692vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1538461538vw; } } @media (any-hover: hover) { .course-card__btn:hover { color: var(--cl-white); } } .course-card__btn::after { content: ""; display: inline-block; background-image: url("../img/page/icon_chevron_right.svg"); background-repeat: no-repeat; background-size: contain; width: 0.3125rem; height: 0.6875rem; position: absolute; top: 54%; right: 1.25rem; transform: translateY(-50%); } @container (width >= 501px) and (width < 768px) { .course-card__btn::after { width: 1.2820512821vw; height: 2.8205128205vw; right: 5.1282051282vw; } } @container (width < 500px) { .course-card__btn::after { width: 1.2820512821vw; height: 2.8205128205vw; right: 5.1282051282vw; } } .course-card__btn.-sm { width: 8.75rem; margin-left: auto; } @container (width >= 501px) and (width < 768px) { .course-card__btn.-sm { width: 35.8974358974vw; } } @container (width < 500px) { .course-card__btn.-sm { width: 35.8974358974vw; } } .course-card__btn.-sm-l { width: 9.375rem; margin-left: auto; } @container (width >= 501px) and (width < 768px) { .course-card__btn.-sm-l { width: 38.4615384615vw; } } @container (width < 500px) { .course-card__btn.-sm-l { width: 38.4615384615vw; } } .js-course-accordion { transition: all 0.3s; } .js-course-accordion:hover { opacity: var(--opacity); } .creation-card { width: 100%; max-width: 24.375rem; margin-inline: auto; padding-inline: 0.625rem; } @container (width >= 501px) and (width < 768px) { .creation-card { max-width: 100vw; padding-inline: 2.5641025641vw; } } @container (width < 500px) { .creation-card { max-width: 100vw; padding-inline: 2.5641025641vw; } } .creation-card__wrapper { cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 1rem; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); background: var(--cl-dept04); } @container (width >= 501px) and (width < 768px) { .creation-card__wrapper { border-radius: 4.1025641026vw; } } @container (width < 500px) { .creation-card__wrapper { border-radius: 4.1025641026vw; } } .creation-card__wrapper.-dept01 { background: var(--cl-dept01); } .creation-card__wrapper.-dept02 { background: var(--cl-dept02); } .creation-card__wrapper.-dept03 { background: var(--cl-dept03); } .creation-card__wrapper.-dept04 { background: var(--cl-dept04); } .creation-card__wrapper.-dept05 { background: var(--cl-dept05); } .creation-card__wrapper:hover { opacity: 0.8; } .creation-card__head { position: relative; } .creation-card__img { border-radius: 1rem 1rem 0 0; overflow: hidden; } @container (width >= 501px) and (width < 768px) { .creation-card__img { border-radius: 4.1025641026vw 4.1025641026vw 0 0; } } @container (width < 500px) { .creation-card__img { border-radius: 4.1025641026vw 4.1025641026vw 0 0; } } .creation-card__img img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .creation-card__user { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; position: absolute; bottom: -4.0625rem; right: 1.25rem; } @container (width >= 501px) and (width < 768px) { .creation-card__user { gap: 1.0256410256vw; bottom: -16.6666666667vw; right: 5.1282051282vw; } } @container (width < 500px) { .creation-card__user { gap: 1.0256410256vw; bottom: -16.6666666667vw; right: 5.1282051282vw; } } .creation-card__user-img { background-color: var(--cl-white); border-radius: 50%; width: 3.25rem; height: 3.25rem; } @container (width >= 501px) and (width < 768px) { .creation-card__user-img { width: 13.3333333333vw; height: 13.3333333333vw; } } @container (width < 500px) { .creation-card__user-img { width: 13.3333333333vw; height: 13.3333333333vw; } } .creation-card__user-img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .creation-card__user-age { font-size: 0.6875rem; color: var(--cl-white); } @container (width >= 501px) and (width < 768px) { .creation-card__user-age { font-size: 11px; font-size: 2.8205128205vw; } } @container (width < 500px) { .creation-card__user-age { font-size: 11px; font-size: 2.8205128205vw; } } .creation-card__body { position: relative; padding: 1.25rem 1.25rem 1.5rem; min-height: 18rem; } @container (width >= 501px) and (width < 768px) { .creation-card__body { min-height: 32rem; padding: 5.1282051282vw 5.1282051282vw 6.1538461538vw; } } @container (width < 500px) { .creation-card__body { min-height: 19rem; padding: 5.1282051282vw 5.1282051282vw 6.1538461538vw; } } .creation-card__course-name { display: inline-block; max-width: 15.625rem; background-color: var(--cl-white); border-radius: 0.25rem; padding: 0.125rem 0.625rem; font-size: 0.9375rem; letter-spacing: 0.046875rem; font-weight: 700; font-feature-settings: "palt"; margin-bottom: 1.25rem; } @container (width >= 501px) and (width < 768px) { .creation-card__course-name { max-width: 64.1025641026vw; border-radius: 1.0256410256vw; padding: 0.5128205128vw 2.5641025641vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } @container (width < 500px) { .creation-card__course-name { max-width: 64.1025641026vw; border-radius: 1.0256410256vw; padding: 0.5128205128vw 2.5641025641vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } .creation-card__course-name-position { min-height: 4.3rem; } @container (width >= 501px) and (width < 768px) { .creation-card__course-name-position { min-height: 6.3rem; } } .creation-card__text { color: var(--cl-white); font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 400; } @container (width >= 501px) and (width < 768px) { .creation-card__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .creation-card__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .creation-card__more { position: absolute; bottom: 1.25rem; right: 1.25rem; } .creation-card__more-link { color: var(--cl-white); display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; justify-content: flex-end; letter-spacing: 0.05em; font-size: 0.75rem; text-decoration: underline; } @container (width >= 501px) and (width < 768px) { .creation-card__more-link { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; } } @container (width < 500px) { .creation-card__more-link { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; } } .creation-card__more-link::after { content: ""; display: inline-block; background-image: url("../img/page/icon_more_bgw.svg"); background-repeat: no-repeat; background-size: contain; width: 0.8125rem; height: 0.8125rem; margin-top: 0.13rem; } @container (width >= 501px) and (width < 768px) { .creation-card__more-link::after { width: 3.3333333333vw; height: 3.3333333333vw; } } @container (width < 500px) { .creation-card__more-link::after { width: 3.3333333333vw; height: 3.3333333333vw; } } .creation-card__more-link.-sp { display: none; } @container (width >= 501px) and (width < 768px) { .creation-card__more-link.-sp { display: none; } } @container (width < 500px) { .creation-card__more-link.-sp { display: flex; } } .creation-card__more-link.-pc { display: flex; } @container (width >= 501px) and (width < 768px) { .creation-card__more-link.-pc { display: flex; } } @container (width < 500px) { .creation-card__more-link.-pc { display: none; } } /* --------------------------------------- CTA02 -----------------------------------------*/ .cta02 { background-image: url("../img/page/cta02_bg.png"); background-repeat: no-repeat; background-size: cover; } .cta02__wrapper { width: 100%; max-width: 21.875rem; margin-inline: auto; padding-block: 1.25rem; } @container (width >= 501px) and (width < 768px) { .cta02__wrapper { max-width: 89.7435897436vw; padding-block: 5.1282051282vw; } } @container (width < 500px) { .cta02__wrapper { max-width: 89.7435897436vw; padding-block: 5.1282051282vw; } } .cta02__catch { text-align: center; } .cta02__catch .-sm { font-size: 0.75rem; letter-spacing: 0.0375rem; text-shadow: 0px 0px 8px #fff; } @container (width >= 501px) and (width < 768px) { .cta02__catch .-sm { font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } @container (width < 500px) { .cta02__catch .-sm { font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } .cta02__catch .-lg { display: flex; align-items: center; justify-content: center; font-size: 1rem; letter-spacing: 0.05rem; font-weight: 700; position: relative; } @container (width >= 501px) and (width < 768px) { .cta02__catch .-lg { font-size: 16px; font-size: 4.1025641026vw; letter-spacing: 0.2051282051vw; } } @container (width < 500px) { .cta02__catch .-lg { font-size: 16px; font-size: 4.1025641026vw; letter-spacing: 0.2051282051vw; } } .cta02__catch .-lg span { color: #fd6101; } .cta02__catch .-lg sup { font-size: 0.5rem; vertical-align: super; } @container (width >= 501px) and (width < 768px) { .cta02__catch .-lg sup { font-size: 2.0512820513vw; } } @container (width < 500px) { .cta02__catch .-lg sup { font-size: 2.0512820513vw; } } .cta02__catch .-lg::before, .cta02__catch .-lg::after { content: ""; display: block; width: 1px; height: 1rem; border-left: var(--cl-text) 1px dashed; } @container (width >= 501px) and (width < 768px) { .cta02__catch .-lg::before, .cta02__catch .-lg::after { height: 4.1025641026vw; } } @container (width < 500px) { .cta02__catch .-lg::before, .cta02__catch .-lg::after { height: 4.1025641026vw; } } .cta02__catch .-lg::before { transform: rotate(-45deg); margin-right: 0.5rem; } .cta02__catch .-lg::after { transform: rotate(45deg); margin-left: 0.5rem; } .cta02__list { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.625rem; } @container (width >= 501px) and (width < 768px) { .cta02__list { gap: 2.0512820513vw; margin-top: 2.5641025641vw; } } @container (width < 500px) { .cta02__list { gap: 2.0512820513vw; margin-top: 2.5641025641vw; } } .cta02__list > li { background-color: var(--cl-white); border-radius: 0.25rem; width: 100%; max-width: 8.125rem; height: 1.5rem; display: grid; place-content: center; font-size: 0.75rem; letter-spacing: 0.0375rem; font-weight: 400; } @container (width >= 501px) and (width < 768px) { .cta02__list > li { max-width: 33.3333333333vw; height: 6.1538461538vw; font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } @container (width < 500px) { .cta02__list > li { max-width: 33.3333333333vw; height: 6.1538461538vw; font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } .cta02__btn-wrapper { margin-top: 1rem; padding-inline: 0.9375rem; } @container (width >= 501px) and (width < 768px) { .cta02__btn-wrapper { margin-top: 4.1025641026vw; padding-inline: 3.8461538462vw; } } @container (width < 500px) { .cta02__btn-wrapper { margin-top: 4.1025641026vw; padding-inline: 3.8461538462vw; } } .cta02__btn { background: var(--cl-cta); box-shadow: 0 7px 0 #bd3f23; color: var(--cl-white); font-size: 1.125rem; height: 3.5rem; } @media (min-width: 1024px) { .cta02__btn:hover { box-shadow: none; transform: translateY(5px); } } @container (width >= 501px) and (width < 768px) { .cta02__btn { font-size: 18px; font-size: 4.6153846154vw; height: 14.358974359vw; } } @container (width < 500px) { .cta02__btn { font-size: 18px; font-size: 4.6153846154vw; height: 14.358974359vw; } } .cta02__btn::before { content: ""; display: block; background-image: url("../img/page/icon_book.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; left: 1.5rem; } @container (width >= 501px) and (width < 768px) { .cta02__btn::before { width: 5.641025641vw; height: 5.641025641vw; left: 6.1538461538vw; } } @container (width < 500px) { .cta02__btn::before { width: 5.641025641vw; height: 5.641025641vw; left: 6.1538461538vw; } } .cta02__btn::after { content: ""; display: block; background-image: url("../img/page/icon_arrow_btn.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); width: 1.625rem; height: 1.625rem; right: 1rem; } @container (width >= 501px) and (width < 768px) { .cta02__btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @container (width < 500px) { .cta02__btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @media (any-hover: hover) { .cta02__btn:hover { color: var(--cl-white); } } .cta02__note { font-size: 0.625rem; letter-spacing: 0.03125rem; margin-top: 0.875rem; } @container (width >= 501px) and (width < 768px) { .cta02__note { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; margin-top: 3.5897435897vw; } } @container (width < 500px) { .cta02__note { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; margin-top: 3.5897435897vw; } } .modal-topics { position: fixed; z-index: 100; inset: 0; width: 100vw; height: 100dvh; background: rgba(102, 102, 102, 0.6); overflow-y: auto; transition: 0.3s; display: grid; place-content: center; visibility: hidden; opacity: 0; } .modal-topics__container { background-color: var(--cl-white); border-radius: 1rem; box-sizing: border-box; width: 100%; max-width: 21.5625rem; height: 100%; max-height: calc(100dvh - 5rem); padding: 3rem 1.25rem 2.25rem; position: relative; } @container (width >= 501px) and (width < 768px) { .modal-topics__container { max-width: 88.4615384615vw; padding: 12.3076923077vw 5.1282051282vw 9.2307692308vw; } } @container (width < 500px) { .modal-topics__container { max-width: 88.4615384615vw; padding: 12.3076923077vw 5.1282051282vw 9.2307692308vw; } } .modal-topics__close { position: absolute; top: -1rem; right: 0.5rem; transform: translateY(-50%); font-size: 1rem; color: var(--cl-white); cursor: pointer; transition: var(--transition); } @container (width >= 501px) and (width < 768px) { .modal-topics__close { top: -4.1025641026vw; right: 2.0512820513vw; font-size: 16px; font-size: 4.1025641026vw; } } @container (width < 500px) { .modal-topics__close { top: -4.1025641026vw; right: 2.0512820513vw; font-size: 16px; font-size: 4.1025641026vw; } } .modal-topics__num { display: grid; grid-template-columns: 0.8125rem auto; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; position: absolute; z-index: 1; top: -2.25rem; left: 1.25rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } @container (width < 500px) { .modal-topics__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } .modal-topics__num .-en { display: grid; place-content: center; width: 2.5rem; height: 0.8125rem; background-color: var(--cl-main); font-family: var(--font-poppins); color: var(--cl-white); text-transform: capitalize; font-size: 0.5625rem; letter-spacing: 0.028125rem; transform: rotate(90deg) translateY(0.8125rem); } @container (width >= 501px) and (width < 768px) { .modal-topics__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } @container (width < 500px) { .modal-topics__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } .modal-topics__num .-num { font-family: var(--font-poppins); color: var(--cl-main); font-size: 3rem; font-weight: 400; letter-spacing: 0.15rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__num .-num { font-size: 48px; font-size: 12.3076923077vw; letter-spacing: 0.6153846154vw; } } .modal-topics__inner { height: 100%; overflow-y: scroll; overflow-x: hidden; } .modal-topics__inner::-webkit-scrollbar { display: none; } .modal-topics__head { margin-bottom: 1.125rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__head { margin-bottom: 4.6153846154vw; } } @container (width < 500px) { .modal-topics__head { margin-bottom: 4.6153846154vw; } } .modal-topics__heading { color: var(--cl-main); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05625rem; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .modal-topics__heading { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @container (width < 500px) { .modal-topics__heading { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } .modal-topics__heading.-color { color: #fb5a15; } .modal-topics__img { margin-inline: auto; margin-bottom: 1.25rem; } .modal-topics__img.-img01 { width: 11.8125rem; height: 9.75rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__img.-img01 { width: 48.4615384615vw; height: 40vw; } } @container (width < 500px) { .modal-topics__img.-img01 { width: 48.4615384615vw; height: 40vw; } } .modal-topics__img.-img02, .modal-topics__img.-img03, .modal-topics__img.-img04 { width: 19.0625rem; height: 9.75rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__img.-img02, .modal-topics__img.-img03, .modal-topics__img.-img04 { width: 78.2051282051vw; height: 40vw; } } @container (width < 500px) { .modal-topics__img.-img02, .modal-topics__img.-img03, .modal-topics__img.-img04 { width: 78.2051282051vw; height: 40vw; } } .modal-topics__img.-img03_02 { width: 19.0625rem; height: 11.6875rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__img.-img03_02 { width: 78.2051282051vw; height: 47.9487179487vw; } } @container (width < 500px) { .modal-topics__img.-img03_02 { width: 78.2051282051vw; height: 47.9487179487vw; } } .modal-topics__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .modal-topics__text { font-size: 0.8125rem; letter-spacing: 0.040625rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .modal-topics__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .modal-topics__text sup { font-size: 0.5rem; vertical-align: super; } @container (width >= 501px) and (width < 768px) { .modal-topics__text sup { font-size: 2.0512820513vw; } } @container (width < 500px) { .modal-topics__text sup { font-size: 2.0512820513vw; } } .modal-topics__text strong { font-weight: 700; color: var(--cl-main); } .modal-topics__note { font-size: 0.625rem; margin-top: 0.375rem; } @container (width >= 501px) and (width < 768px) { .modal-topics__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 1.5384615385vw; } } @container (width < 500px) { .modal-topics__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 1.5384615385vw; } } .modal-topics__divider { padding-top: 1.5rem; margin-top: 1.5rem; border-top: var(--cl-border) 1px dashed; } @container (width >= 501px) and (width < 768px) { .modal-topics__divider { padding-top: 6.1538461538vw; margin-top: 6.1538461538vw; } } @container (width < 500px) { .modal-topics__divider { padding-top: 6.1538461538vw; margin-top: 6.1538461538vw; } } .modal-topics__btn-wrapper { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .modal-topics__btn { background-color: var(--cl-main); color: var(--cl-white); height: 3.5rem; box-shadow: 0 7px 0 #00215c; font-size: 0.9375rem; font-weight: 700; position: relative; } @media (min-width: 1024px) { .modal-topics__btn:hover { box-shadow: none; transform: translateY(5px); } } @container (width >= 501px) and (width < 768px) { .modal-topics__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } @container (width < 500px) { .modal-topics__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } @media (any-hover: hover) { .modal-topics__btn:hover { color: var(--cl-white); } } .modal-topics__btn::after { content: ""; display: inline-block; background-image: url("../img/page/icon_arrow_btn_blue.svg"); background-repeat: no-repeat; background-size: contain; width: 1.5625rem; height: 1.5625rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } @container (width >= 501px) and (width < 768px) { .modal-topics__btn::after { width: 6.4102564103vw; height: 6.4102564103vw; right: 4.1025641026vw; } } @container (width < 500px) { .modal-topics__btn::after { width: 6.4102564103vw; height: 6.4102564103vw; right: 4.1025641026vw; } } .modal-topics.is_active { opacity: 1; visibility: visible; } .modal-creation { position: fixed; z-index: 100; inset: 0; width: 100vw; height: 100dvh; background: rgba(102, 102, 102, 0.6); overflow-y: auto; transition: 0.3s; display: grid; place-content: center; visibility: hidden; opacity: 0; } .modal-creation__container { background-color: var(--cl-white); border-radius: 1rem; box-sizing: border-box; width: 100%; height: 100%; max-height: calc(100dvh - 5rem); padding: 1.25rem 1.25rem 1.25rem; position: relative; } @container (width >= 501px) and (width < 768px) { .modal-creation__container { padding: 5.1282051282vw 5.1282051282vw 5.1282051282vw; } } @container (width < 500px) { .modal-creation__container { max-width: 88.4615384615vw; padding: 5.1282051282vw 5.1282051282vw 5.1282051282vw; } } .modal-creation__close { position: absolute; top: -1rem; right: 0.5rem; transform: translateY(-50%); font-size: 1rem; color: var(--cl-white); cursor: pointer; transition: var(--transition); } @container (width >= 501px) and (width < 768px) { .modal-creation__close { top: -4.1025641026vw; right: 2.0512820513vw; font-size: 16px; font-size: 4.1025641026vw; } } @container (width < 500px) { .modal-creation__close { top: -4.1025641026vw; right: 2.0512820513vw; font-size: 16px; font-size: 4.1025641026vw; } } .modal-creation__num { display: grid; grid-template-columns: 0.8125rem auto; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; position: absolute; z-index: 1; top: -2.25rem; left: 1.25rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } @container (width < 500px) { .modal-creation__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } .modal-creation__num .-en { display: grid; place-content: center; width: 2.5rem; height: 0.8125rem; background-color: var(--cl-main); font-family: var(--font-poppins); color: var(--cl-white); text-transform: capitalize; font-size: 0.5625rem; letter-spacing: 0.028125rem; transform: rotate(90deg) translateY(0.8125rem); } @container (width >= 501px) and (width < 768px) { .modal-creation__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } @container (width < 500px) { .modal-creation__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } .modal-creation__num .-num { font-family: var(--font-poppins); color: var(--cl-main); font-size: 3rem; font-weight: 400; letter-spacing: 0.15rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__num .-num { font-size: 48px; font-size: 12.3076923077vw; letter-spacing: 0.6153846154vw; } } .modal-creation__inner { height: 100%; overflow-y: scroll; overflow-x: hidden; } .modal-creation__inner::-webkit-scrollbar { display: none; } .modal-creation__heading { color: var(--cl-main); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05625rem; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .modal-creation__heading { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @container (width < 500px) { .modal-creation__heading { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } .modal-creation__heading.-color { color: #fb5a15; } .modal-creation__img { margin-inline: auto; } .modal-creation__img.-img01 { width: 11.8125rem; height: 9.75rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__img.-img01 { width: 48.4615384615vw; height: 40vw; } } @container (width < 500px) { .modal-creation__img.-img01 { width: 48.4615384615vw; height: 40vw; } } .modal-creation__img.-img02, .modal-creation__img.-img03, .modal-creation__img.-img04 { width: 19.0625rem; height: 9.75rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__img.-img02, .modal-creation__img.-img03, .modal-creation__img.-img04 { width: 78.2051282051vw; height: 40vw; } } @container (width < 500px) { .modal-creation__img.-img02, .modal-creation__img.-img03, .modal-creation__img.-img04 { width: 78.2051282051vw; height: 40vw; } } .modal-creation__img.-img03_02 { width: 19.0625rem; height: 11.6875rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__img.-img03_02 { width: 78.2051282051vw; height: 47.9487179487vw; } } @container (width < 500px) { .modal-creation__img.-img03_02 { width: 78.2051282051vw; height: 47.9487179487vw; } } .modal-creation__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .modal-creation__text { font-size: 0.8125rem; letter-spacing: 0.040625rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .modal-creation__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .modal-creation__text sup { font-size: 0.5rem; vertical-align: super; } @container (width >= 501px) and (width < 768px) { .modal-creation__text sup { font-size: 2.0512820513vw; } } @container (width < 500px) { .modal-creation__text sup { font-size: 2.0512820513vw; } } .modal-creation__text strong { font-weight: 700; color: var(--cl-main); } .modal-creation__note { font-size: 0.625rem; margin-top: 0.375rem; } @container (width >= 501px) and (width < 768px) { .modal-creation__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 1.5384615385vw; } } @container (width < 500px) { .modal-creation__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 1.5384615385vw; } } .modal-creation__divider { padding-top: 1.5rem; margin-top: 1.5rem; border-top: var(--cl-border) 1px dashed; } @container (width >= 501px) and (width < 768px) { .modal-creation__divider { padding-top: 6.1538461538vw; margin-top: 6.1538461538vw; } } @container (width < 500px) { .modal-creation__divider { padding-top: 6.1538461538vw; margin-top: 6.1538461538vw; } } .modal-creation__btn-wrapper { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; } .modal-creation__btn { background-color: var(--cl-main); color: var(--cl-white); height: 3.5rem; font-size: 0.9375rem; font-weight: 700; position: relative; } @container (width >= 501px) and (width < 768px) { .modal-creation__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } @container (width < 500px) { .modal-creation__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } @media (any-hover: hover) { .modal-creation__btn:hover { color: var(--cl-white); } } .modal-creation__btn::after { content: ""; display: inline-block; background-image: url("../img/page/icon_arrow_btn_blue.svg"); background-repeat: no-repeat; background-size: contain; width: 1.5625rem; height: 1.5625rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } @container (width >= 501px) and (width < 768px) { .modal-creation__btn::after { width: 6.4102564103vw; height: 6.4102564103vw; right: 4.1025641026vw; } } @container (width < 500px) { .modal-creation__btn::after { width: 6.4102564103vw; height: 6.4102564103vw; right: 4.1025641026vw; } } .modal-creation.is_active { opacity: 1; visibility: visible; } .point-card { width: 100%; max-width: 21.875rem; margin-inline: auto; padding-inline: 0.625rem; } @container (width >= 501px) and (width < 768px) { .point-card { max-width: 89.7435897436vw; padding-inline: 2.5641025641vw; } } @container (width < 500px) { .point-card { max-width: 89.7435897436vw; padding-inline: 2.5641025641vw; } } .point-card__img { width: 100%; height: auto; border-radius: 0.5rem; overflow: hidden; } @container (width >= 501px) and (width < 768px) { .point-card__img { border-radius: 2.0512820513vw; } } @container (width < 500px) { .point-card__img { border-radius: 2.0512820513vw; } } .point-card__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .point-card__img.-card02 { max-width: 18.75rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .point-card__img.-card02 { max-width: 76.9230769231vw; } } @container (width < 500px) { .point-card__img.-card02 { max-width: 76.9230769231vw; } } .point-card__head { margin-block: 0.75rem; } @container (width >= 501px) and (width < 768px) { .point-card__head { margin-block: 3.0769230769vw; } } @container (width < 500px) { .point-card__head { margin-block: 3.0769230769vw; } } .point-card__title { font-size: 0.9375rem; letter-spacing: 0.046875rem; font-feature-settings: "palt"; font-weight: 700; border-left: var(--cl-main) 2px solid; padding-left: 0.5rem; } @container (width >= 501px) and (width < 768px) { .point-card__title { font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; padding-left: 2.0512820513vw; } } @container (width < 500px) { .point-card__title { font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; padding-left: 2.0512820513vw; } } .point-card__text { font-size: 0.6875rem; letter-spacing: 0.034375rem; font-weight: 400; } @container (width >= 501px) and (width < 768px) { .point-card__text { font-size: 11px; font-size: 2.8205128205vw; letter-spacing: 0.141025641vw; } } @container (width < 500px) { .point-card__text { font-size: 11px; font-size: 2.8205128205vw; letter-spacing: 0.141025641vw; } } .topics-card { flex-shrink: 0; cursor: pointer; width: 100%; max-width: 20.625rem; padding: 2rem 1.25rem 1.5rem; background-color: var(--cl-white); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 1rem; transition: var(--transition); position: relative; } @container (width >= 501px) and (width < 768px) { .topics-card { max-width: 84.6153846154vw; padding: 8.2051282051vw 5.1282051282vw 6.1538461538vw; border-radius: 4.1025641026vw; } } @container (width < 500px) { .topics-card { max-width: 84.6153846154vw; padding: 8.2051282051vw 5.1282051282vw 6.1538461538vw; border-radius: 4.1025641026vw; } } .topics-card__num { display: grid; grid-template-columns: 0.8125rem auto; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; position: absolute; z-index: 1; top: -2.25rem; left: 1.25rem; } @container (width >= 501px) and (width < 768px) { .topics-card__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } @container (width < 500px) { .topics-card__num { grid-template-columns: 3.3333333333vw auto; -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; top: -9.2307692308vw; left: 5.1282051282vw; } } .topics-card__num .-en { display: grid; place-content: center; width: 2.5rem; height: 0.8125rem; background-color: var(--cl-main); font-family: var(--font-poppins); color: var(--cl-white); text-transform: capitalize; font-size: 0.5625rem; letter-spacing: 0.028125rem; transform: rotate(90deg) translateY(0.8125rem); } @container (width >= 501px) and (width < 768px) { .topics-card__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } @container (width < 500px) { .topics-card__num .-en { width: 10.2564102564vw; height: 3.3333333333vw; font-size: 9px; font-size: 2.3076923077vw; letter-spacing: 0.1153846154vw; transform: rotate(90deg) translateY(3.3333333333vw); } } .topics-card__num .-num { font-family: var(--font-poppins); color: var(--cl-main); font-size: 3rem; font-weight: 400; letter-spacing: 0.15rem; } @container (width >= 501px) and (width < 768px) { .topics-card__num .-num { font-size: 48px; font-size: 12.3076923077vw; letter-spacing: 0.6153846154vw; } } .topics-card__img { margin-inline: auto; margin-bottom: 1.5rem; } @container (width >= 501px) and (width < 768px) { .topics-card__img { margin-bottom: 6.1538461538vw; } } @container (width < 500px) { .topics-card__img { margin-bottom: 6.1538461538vw; } } .topics-card__img.-img01 { width: 11.8125rem; height: 9.6875rem; } @container (width >= 501px) and (width < 768px) { .topics-card__img.-img01 { width: 48.4615384615vw; height: 39.7435897436vw; } } @container (width < 500px) { .topics-card__img.-img01 { width: 48.4615384615vw; height: 39.7435897436vw; } } .topics-card__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .topics-card__title { color: var(--cl-main); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.046875rem; } @container (width >= 501px) and (width < 768px) { .topics-card__title { font-size: 15px; font-size: 3vw; letter-spacing: 0.15vw; } } @container (width < 500px) { .topics-card__title { font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } .topics-card__more { position: absolute; bottom: 1.25rem; right: 1.25rem; } .topics-card__more-link { display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; justify-content: flex-end; font-size: 0.75rem; text-decoration: underline; } @container (width >= 501px) and (width < 768px) { .topics-card__more-link { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; } } @container (width < 500px) { .topics-card__more-link { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; } } .topics-card__more-link::after { content: ""; display: inline-block; background-image: url("../img/page/icon_more.svg"); background-repeat: no-repeat; background-size: contain; width: 0.9375rem; height: 0.9375rem; } @container (width >= 501px) and (width < 768px) { .topics-card__more-link::after { width: 3.8461538462vw; height: 3.8461538462vw; } } @container (width < 500px) { .topics-card__more-link::after { width: 3.8461538462vw; height: 3.8461538462vw; } } @media (any-hover: hover) { .topics-card:hover { opacity: var(--opacity); } } .topics-card__wrapper { position: relative; overflow: visible; } .topics-card { position: relative; } .topics__slider .slick-slide, .topics__slider .slick-track { overflow: visible !important; margin: 0.9375rem 0 0.3125rem; } .topics-card { min-height: 375px; } .mv__wrapper { position: relative; width: 31.25rem; } @container (width >= 501px) and (width < 768px) { .mv__wrapper { width: 100vw; } } @container (width < 500px) { .mv__wrapper { width: 100vw; } } .mv__slider-item img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .mv__slider-item .-caption { color: var(--cl-white); font-size: 0.8125rem; font-feature-settings: "palt"; font-weight: 400; letter-spacing: 0.03125rem; position: absolute; bottom: 3.75rem; right: 1.5rem; } @container (width >= 501px) and (width < 768px) { .mv__slider-item .-caption { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1282051282vw; bottom: 15.3846153846vw; right: 6.1538461538vw; } } @container (width < 500px) { .mv__slider-item .-caption { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; bottom: 15.3846153846vw; right: 5.1282051282vw; } } .mv__no1 { width: 12.1875rem; height: 5.3125rem; position: absolute; top: 2rem; left: 1.5rem; filter: drop-shadow(0px 0px 3px #000); } @container (width >= 501px) and (width < 768px) { .mv__no1 { width: 39vw; height: 17vw; top: 6.4vw; left: 4.8vw; } } @container (width < 500px) { .mv__no1 { width: 38.9743589744vw; height: 16.4102564103vw; top: 6.1538461538vw; left: 5.1282051282vw; } } .mv__no1 img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .mv__catch { display: flex; align-items: center; -moz-column-gap: 0.625rem; column-gap: 0.625rem; position: absolute; bottom: 4.6875rem; left: 1.5rem; } @container (width >= 501px) and (width < 768px) { .mv__catch { -moz-column-gap: 2.5641025641vw; column-gap: 2.5641025641vw; bottom: 19.2307692308vw; left: 6.1538461538vw; } } @container (width < 500px) { .mv__catch { -moz-column-gap: 2.5641025641vw; column-gap: 2.5641025641vw; bottom: 19.2307692308vw; left: 6.1538461538vw; } } .mv__atn { position: absolute; bottom: 1.25rem; left: 1.5rem; font-size: 0.6875rem; color: var(--cl-white); display: block; } @media screen and (width <= 1024px) { .mv__atn { display: none; } } .mv__catch-circle-wrapper { flex-shrink: 0; display: flex; align-items: center; justify-content: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } @container (width >= 501px) and (width < 768px) { .mv__catch-circle-wrapper { -moz-column-gap: 1.6vw; column-gap: 1.6vw; } } @container (width < 500px) { .mv__catch-circle-wrapper { -moz-column-gap: 1.5384615385vw; column-gap: 1.5384615385vw; } } .mv__catch-circle { display: grid; place-content: center; width: 5.3125rem; height: 5.3125rem; border-radius: 50%; color: var(--cl-white); font-size: 1rem; font-weight: bold; letter-spacing: 0.039375rem; line-height: 1.3; text-shadow: 0px 0px 5.596px rgba(0, 0, 0, 0.25); text-align: center; } @container (width >= 501px) and (width < 768px) { .mv__catch-circle { width: 17vw; height: 17vw; font-size: 16px; font-size: 3.2vw; } } @container (width < 500px) { .mv__catch-circle { width: 16.9230769231vw; height: 16.9230769231vw; font-size: 13px; font-size: 3.3333333333vw; } } .mv__catch-circle--cl01 { background: var(--cl-gradient01); } .mv__catch-circle--cl02 { background: var(--cl-gradient02); } .mv__catch-circle--cl03 { background: var(--cl-gradient03); } .mv__catch-circle .-sm { font-size: 0.875rem; } @container (width >= 501px) and (width < 768px) { .mv__catch-circle .-sm { font-size: 14px; font-size: 2.8vw; } } @container (width < 500px) { .mv__catch-circle .-sm { font-size: 11px; font-size: 2.8205128205vw; } } .mv__catch-text { color: var(--cl-white); font-weight: bold; line-height: 1.5; letter-spacing: 0.05625rem; font-size: 1.5rem; } @container (width >= 501px) and (width < 768px) { .mv__catch-text { font-size: 24px; font-size: 4.8vw; } } @container (width < 500px) { .mv__catch-text { font-size: 18px; font-size: 4.6153846154vw; } } .mv .slick-dotted { margin-bottom: -0.3125rem; } .mv .dots-wrap { display: flex; justify-content: center; position: absolute; -moz-column-gap: 0.75rem; column-gap: 0.75rem; top: 1.25rem; right: 1.25rem; } .mv .dots-wrap li { background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; cursor: pointer; width: 0.375rem; height: 0.375rem; } .mv .dots-wrap li:hover, .mv .dots-wrap li.slick-active { background-color: var(--cl-white); } .mv .dots-wrap li button { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; padding: 0; border: none; background-color: transparent; } .cta { display: none; } @media screen and (width <= 1024px) { .cta { display: block; background-color: var(--cl-bg); } } .cta__wrapper { width: 100%; max-width: 28.75rem; margin-inline: auto; border-radius: 0.5rem; background: var(--cl-white); padding: 1rem; position: relative; margin-top: -3.125rem; } @container (width >= 501px) and (width < 768px) { .cta__wrapper { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 4.1025641026vw; margin-top: -12.8205128205vw; } } @container (width < 500px) { .cta__wrapper { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 4.1025641026vw; margin-top: -12.8205128205vw; } } .cta__catch { display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; letter-spacing: 0.05rem; margin-block: var(--trim-leading); position: relative; } @container (width >= 501px) and (width < 768px) { .cta__catch { font-size: 16px; font-size: 4.1025641026vw; letter-spacing: 0.2051282051vw; } } @container (width < 500px) { .cta__catch { font-size: 14px; font-size: 3.5897435897vw; letter-spacing: 0.2051282051vw; } } .cta__catch span { color: #fd6101; } .cta__catch sup { font-size: 0.5rem; font-weight: normal; vertical-align: super; line-height: 1; } @container (width >= 501px) and (width < 768px) { .cta__catch sup { font-size: 2.0512820513vw; } } @container (width < 500px) { .cta__catch sup { font-size: 2.0512820513vw; } } .cta__catch::before, .cta__catch::after { content: ""; display: block; width: 1px; height: 1rem; border-left: var(--cl-text) 1px dashed; } @container (width >= 501px) and (width < 768px) { .cta__catch::before, .cta__catch::after { height: 4.1025641026vw; } } @container (width < 500px) { .cta__catch::before, .cta__catch::after { height: 4.1025641026vw; } } .cta__catch::before { transform: rotate(-45deg); margin-right: 0.5rem; } @container (width >= 501px) and (width < 768px) { .cta__catch::before { margin-right: 2.0512820513vw; } } @container (width < 500px) { .cta__catch::before { margin-right: 2.0512820513vw; } } .cta__catch::after { transform: rotate(45deg); margin-left: 0.5rem; } @container (width >= 501px) and (width < 768px) { .cta__catch::after { margin-left: 2.0512820513vw; } } @container (width < 500px) { .cta__catch::after { margin-left: 2.0512820513vw; } } .cta__btn-wrapper { margin-top: 0.625rem; } @container (width >= 501px) and (width < 768px) { .cta__btn-wrapper { margin-top: 2.5641025641vw; } } @container (width < 500px) { .cta__btn-wrapper { margin-top: 2.5641025641vw; } } .cta__btn { background: var(--cl-cta); color: var(--cl-white); height: 3.5rem; box-shadow: 0 7px 0 #bd3f23; font-size: 1.125rem; letter-spacing: 0.05625rem; font-weight: 700; font-feature-settings: "palt"; position: relative; } @media (min-width: 1024px) { .cta__btn:hover { box-shadow: none; transform: translateY(5px); } } @container (width >= 501px) and (width < 768px) { .cta__btn { height: 14.358974359vw; font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @container (width < 500px) { .cta__btn { height: 14.358974359vw; font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } .cta__btn::before { content: ""; display: block; background-image: url("../img/page/icon_book.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; left: 1.5rem; } @container (width >= 501px) and (width < 768px) { .cta__btn::before { width: 5.641025641vw; height: 5.641025641vw; left: 6.1538461538vw; } } @container (width < 500px) { .cta__btn::before { width: 5.641025641vw; height: 5.641025641vw; left: 6.1538461538vw; } } .cta__btn::after { content: ""; display: block; background-image: url("../img/page/icon_arrow_btn.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); width: 1.625rem; height: 1.625rem; right: 1rem; } @container (width >= 501px) and (width < 768px) { .cta__btn::after { right: 4.1025641026vw; width: 6.6666666667vw; height: 6.6666666667vw; } } @container (width < 500px) { .cta__btn::after { right: 4.1025641026vw; width: 6.6666666667vw; height: 6.6666666667vw; } } .cta__list { margin-top: 0.625rem; counter-reset: number; } @container (width >= 501px) and (width < 768px) { .cta__list { margin-top: 2.5641025641vw; } } @container (width < 500px) { .cta__list { margin-top: 2.5641025641vw; } } .cta__list > li { counter-increment: number; font-size: 0.625rem; font-weight: 400; letter-spacing: 0.03125rem; padding-left: 1.5rem; position: relative; } @container (width >= 501px) and (width < 768px) { .cta__list > li { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; padding-left: 6.1538461538vw; } } @container (width < 500px) { .cta__list > li { font-size: 10px; font-size: 2.5641025641vw; letter-spacing: 0.1282051282vw; padding-left: 6.1538461538vw; } } .cta__list > li::before { content: "※" counter(number); position: absolute; top: 0; left: 0; } .topics { background-color: var(--cl-bg); padding-block: 4rem; position: relative; } @container (width >= 501px) and (width < 768px) { .topics { padding-block: 16.4102564103vw; } } @container (width < 500px) { .topics { padding-block: 16.4102564103vw; } } .topics__body { width: 100%; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .topics__body { max-width: 100%; } } @container (width < 500px) { .topics__body { max-width: 24.375rem; } } .topics__slider { display: flex; gap: 1.25rem; padding: 1.875rem 1.875rem 2.5rem 3.125rem; } @container (width >= 501px) and (width < 768px) { .topics__slider { gap: 5.1282051282vw; padding: 7.6923076923vw 1.875rem 10.2564102564vw 5.1282051282vw; } } @container (width < 500px) { .topics__slider { gap: 5.1282051282vw; padding: 7.6923076923vw 0 10.2564102564vw 2.5641025641vw; } } .topics .topics_arrow_box { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; position: absolute; top: 2.5rem; right: 4.6875rem; } @container (width >= 501px) and (width < 768px) { .topics .topics_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } @container (width < 500px) { .topics .topics_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } .topics .topics_arrow_box .prev-arrow, .topics .topics_arrow_box .next-arrow { cursor: pointer; } .topics .topics_arrow_box .prev-arrow:before, .topics .topics_arrow_box .next-arrow:before { content: ""; display: block; width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .topics .topics_arrow_box .prev-arrow:before, .topics .topics_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } @container (width < 500px) { .topics .topics_arrow_box .prev-arrow:before, .topics .topics_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } .topics .topics_arrow_box .prev-arrow:before { background-image: url("../img/page/icon_arrow_circle_prev.svg"); } .topics .topics_arrow_box .next-arrow:before { background-image: url("../img/page/icon_arrow_circle_next.svg"); } .topics .topics__indicator { position: relative; width: 100%; height: 2px; background: #dedede; margin-bottom: 1.5rem; overflow: visible; width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .topics .topics__indicator { max-width: 89.7435897436vw; } } @container (width < 500px) { .topics .topics__indicator { max-width: 89.7435897436vw; } } .topics .topics__indicator .topics__indicator-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0; border-radius: 9999px; background: #333; transition: width 0.3s ease; } .course { background-color: var(--cl-white); padding-block: 4rem; } @container (width >= 501px) and (width < 768px) { .course { padding-block: 16.4102564103vw; } } @container (width < 500px) { .course { padding-block: 16.4102564103vw; } } .course__body { width: 100%; max-width: 21.875rem; margin: 2.5rem auto 0; } @container (width >= 501px) and (width < 768px) { .course__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; } } @container (width < 500px) { .course__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; } } .course__list { display: flex; flex-direction: column; gap: 0.5rem; } @container (width >= 501px) and (width < 768px) { .course__list { gap: 2.0512820513vw; } } @container (width < 500px) { .course__list { gap: 2.0512820513vw; } } .creation { padding-block: 3rem; position: relative; } @container (width >= 501px) and (width < 768px) { .creation { padding-block: 12.3076923077vw; } } @container (width < 500px) { .creation { padding-block: 12.3076923077vw; } } .creation__body { margin-top: 2.75rem; } @container (width >= 501px) and (width < 768px) { .creation__body { margin-top: 11.2820512821vw; } } @container (width < 500px) { .creation__body { margin-top: 11.2820512821vw; } } .creation__slider { width: 100%; max-width: 23.125rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .creation__slider { max-width: 94.8717948718vw; } } @container (width < 500px) { .creation__slider { max-width: 94.8717948718vw; } } .creation .creation_arrow_box { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; position: absolute; top: 2.5rem; right: 4.6875rem; } @container (width >= 501px) and (width < 768px) { .creation .creation_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } @container (width < 500px) { .creation .creation_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } .creation .creation_arrow_box .prev-arrow, .creation .creation_arrow_box .next-arrow { cursor: pointer; } .creation .creation_arrow_box .prev-arrow:before, .creation .creation_arrow_box .next-arrow:before { content: ""; display: block; width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .creation .creation_arrow_box .prev-arrow:before, .creation .creation_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } @container (width < 500px) { .creation .creation_arrow_box .prev-arrow:before, .creation .creation_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } .creation .creation_arrow_box .prev-arrow:before { background-image: url("../img/page/icon_arrow_circle_prev.svg"); } .creation .creation_arrow_box .next-arrow:before { background-image: url("../img/page/icon_arrow_circle_next.svg"); } .creation .creation__indicator { position: relative; width: 100%; height: 2px; background: #dedede; margin-top: 2.75rem; margin-bottom: 1.5rem; overflow: visible; width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .creation .creation__indicator { max-width: 89.7435897436vw; } } @container (width < 500px) { .creation .creation__indicator { max-width: 89.7435897436vw; } } .creation .creation__indicator .creation__indicator-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0; border-radius: 9999px; background: #333; transition: width 0.3s ease; } .interview { position: relative; background-color: var(--cl-bg); padding-block: 3.125rem 4rem; } @container (width >= 501px) and (width < 768px) { .interview { padding-block: 12.8205128205vw 16.4102564103vw; } } @container (width < 500px) { .interview { padding-block: 12.8205128205vw 16.4102564103vw; } } .interview__body { margin-top: 2.5rem; } @container (width >= 501px) and (width < 768px) { .interview__body { margin-top: 10.2564102564vw; } } @container (width < 500px) { .interview__body { margin-top: 10.2564102564vw; } } .interview__slider { width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .interview__slider { max-width: 89.7435897436vw; } } @container (width < 500px) { .interview__slider { max-width: 89.7435897436vw; } } .interview__slide-item { width: 100%; aspect-ratio: 16/9; } .interview__slide-item iframe { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .interview .interview_arrow_box { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; position: absolute; top: 2.5rem; right: 4.6875rem; } @container (width >= 501px) and (width < 768px) { .interview .interview_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } @container (width < 500px) { .interview .interview_arrow_box { gap: 2.0512820513vw; margin-top: 6.1538461538vw; top: 10.2564102564vw; right: 5.1282051282vw; } } .interview .interview_arrow_box .prev-arrow, .interview .interview_arrow_box .next-arrow { cursor: pointer; } .interview .interview_arrow_box .prev-arrow:before, .interview .interview_arrow_box .next-arrow:before { content: ""; display: block; width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .interview .interview_arrow_box .prev-arrow:before, .interview .interview_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } @container (width < 500px) { .interview .interview_arrow_box .prev-arrow:before, .interview .interview_arrow_box .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } .interview .interview_arrow_box .prev-arrow:before { background-image: url("../img/page/icon_arrow_circle_prev.svg"); } .interview .interview_arrow_box .next-arrow:before { background-image: url("../img/page/icon_arrow_circle_next.svg"); } .interview .interview__indicator { position: relative; width: 100%; height: 2px; background: #dedede; margin-top: 2.5rem; overflow: visible; width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width >= 501px) and (width < 768px) { .interview .interview__indicator { max-width: 89.7435897436vw; } } @container (width < 500px) { .interview .interview__indicator { max-width: 89.7435897436vw; } } .interview .interview__indicator .interview__indicator-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0; border-radius: 9999px; background: #333; transition: width 0.3s ease; } .interview__slide__btn-wrapper { padding-block: 3.125rem 0; margin-inline: auto; max-width: 18.75rem; } @container (width >= 501px) and (width < 768px) { .interview__slide__btn-wrapper { max-width: 85.7142857143vw; } } @container (width < 500px) { .interview__slide__btn-wrapper { max-width: 85.7142857143vw; } } .interview__slide-item__text__wrapper { display: flex; background-color: #fff; align-items: center; padding: 1.015625rem 1.25rem; } @container (width >= 501px) and (width < 768px) { .interview__slide-item__text__wrapper { padding: 1.015625rem; } } @container (width < 500px) { .interview__slide-item__text__wrapper { padding: 1.015625rem; } } .interview__slide-item__text__cource { font-size: 0.9375rem; font-weight: 700; } .interview__slide-item__text__cource p { background: linear-gradient(126.33deg, #4b9bea 13.56%, #3060c9 85.43%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; padding: 0.1em 0.7em; } .interview__slide-item__text__cource p::before { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: 4px; background: linear-gradient(126.33deg, #4b9bea 13.56%, #3060c9 85.43%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; box-sizing: border-box; } .interview__slide-item__text__name { font-size: 1rem; color: var(--cl-text); font-weight: 700; margin-left: 0.625rem; } .point { padding-block: 3.5rem; overflow: hidden; } @container (width >= 501px) and (width < 768px) { .point { padding-block: 14.358974359vw; } } @container (width < 500px) { .point { padding-block: 14.358974359vw; } } .point__body { width: 100%; max-width: 21.875rem; margin: 2rem auto 0; } @container (width >= 501px) and (width < 768px) { .point__body { max-width: 89.7435897436vw; margin: 8.2051282051vw auto 0; } } @container (width < 500px) { .point__body { max-width: 89.7435897436vw; margin: 8.2051282051vw auto 0; } } .point__detail:not(:last-of-type) { margin-bottom: 2.5rem; } @container (width >= 501px) and (width < 768px) { .point__detail:not(:last-of-type) { margin-bottom: 10.2564102564vw; } } @container (width < 500px) { .point__detail:not(:last-of-type) { margin-bottom: 10.2564102564vw; } } .point__sub-title { color: var(--cl-main); font-weight: 700; font-size: 0.9375rem; border-top: var(--cl-main) 1px solid; border-bottom: var(--cl-main) 1px solid; padding-block: 0.4375rem; text-align: center; margin-bottom: 1rem; } @container (width >= 501px) and (width < 768px) { .point__sub-title { font-size: 15px; font-size: 3.8461538462vw; padding-block: 1.7948717949vw; margin-bottom: 4.1025641026vw; } } @container (width < 500px) { .point__sub-title { font-size: 15px; font-size: 3.8461538462vw; padding-block: 1.7948717949vw; margin-bottom: 4.1025641026vw; } } .point__text { font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 400; } @container (width >= 501px) and (width < 768px) { .point__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .point__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .point__slider { margin-top: 1.5rem; } @container (width >= 501px) and (width < 768px) { .point__slider { margin-top: 6.1538461538vw; } } @container (width < 500px) { .point__slider { margin-top: 6.1538461538vw; } } .point__slider .slick-list { overflow: visible; } .point .arrow_box, .point .arrow_box02 { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; } @container (width >= 501px) and (width < 768px) { .point .arrow_box, .point .arrow_box02 { gap: 2.0512820513vw; margin-top: 6.1538461538vw; } } @container (width < 500px) { .point .arrow_box, .point .arrow_box02 { gap: 2.0512820513vw; margin-top: 6.1538461538vw; } } .point .arrow_box .prev-arrow, .point .arrow_box .next-arrow, .point .arrow_box02 .prev-arrow, .point .arrow_box02 .next-arrow { position: relative; cursor: pointer; } .point .arrow_box .prev-arrow:before, .point .arrow_box .next-arrow:before, .point .arrow_box02 .prev-arrow:before, .point .arrow_box02 .next-arrow:before { content: ""; display: block; width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .point .arrow_box .prev-arrow:before, .point .arrow_box .next-arrow:before, .point .arrow_box02 .prev-arrow:before, .point .arrow_box02 .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } @container (width < 500px) { .point .arrow_box .prev-arrow:before, .point .arrow_box .next-arrow:before, .point .arrow_box02 .prev-arrow:before, .point .arrow_box02 .next-arrow:before { width: 10.2564102564vw; height: 10.2564102564vw; } } .point .arrow_box .prev-arrow:before, .point .arrow_box02 .prev-arrow:before { background-image: url("../img/page/icon_arrow_circle_prev.svg"); } .point .arrow_box .next-arrow:before, .point .arrow_box02 .next-arrow:before { background-image: url("../img/page/icon_arrow_circle_next.svg"); } .trial { background-image: url("../img/page/trial_bg.png"); background-repeat: no-repeat; background-size: cover; border-radius: 0.5rem; } @container (width >= 501px) and (width < 768px) { .trial { border-radius: 2.0512820513vw; } } @container (width < 500px) { .trial { border-radius: 2.0512820513vw; } } .trial__wrapper { width: 100%; max-width: 21.875rem; margin-inline: auto; padding-block: 2rem 4rem; } @container (width >= 501px) and (width < 768px) { .trial__wrapper { max-width: 89.7435897436vw; padding-block: 8.2051282051vw 16.4102564103vw; } } @container (width < 500px) { .trial__wrapper { max-width: 89.7435897436vw; padding-block: 8.2051282051vw 16.4102564103vw; } } .trial__head { text-align: center; margin-top: 1rem; } @container (width >= 501px) and (width < 768px) { .trial__head { margin-top: 4.1025641026vw; } } @container (width < 500px) { .trial__head { margin-top: 4.1025641026vw; } } .trial__head .-sm, .trial__head .-lg { display: block; color: var(--cl-white); font-weight: 700; } .trial__head .-sm { display: flex; align-items: center; justify-content: center; font-size: 1rem; letter-spacing: 0.05rem; } @container (width >= 501px) and (width < 768px) { .trial__head .-sm { font-size: 16px; font-size: 4.1025641026vw; letter-spacing: 0.2051282051vw; } } @container (width < 500px) { .trial__head .-sm { font-size: 16px; font-size: 4.1025641026vw; letter-spacing: 0.2051282051vw; } } .trial__head .-sm::before, .trial__head .-sm::after { content: ""; display: block; width: 1px; height: 1rem; border-left: var(--cl-white) 1px dashed; margin-top: 0.75rem; } @container (width >= 501px) and (width < 768px) { .trial__head .-sm::before, .trial__head .-sm::after { height: 4.1025641026vw; margin-top: 3.0769230769vw; } } @container (width < 500px) { .trial__head .-sm::before, .trial__head .-sm::after { height: 4.1025641026vw; margin-top: 3.0769230769vw; } } .trial__head .-sm::before { transform: rotate(-45deg); margin-right: 0.5rem; } @container (width >= 501px) and (width < 768px) { .trial__head .-sm::before { margin-right: 2.0512820513vw; } } @container (width < 500px) { .trial__head .-sm::before { margin-right: 2.0512820513vw; } } .trial__head .-sm::after { transform: rotate(45deg); margin-left: 0.5rem; } @container (width >= 501px) and (width < 768px) { .trial__head .-sm::after { margin-left: 2.0512820513vw; } } @container (width < 500px) { .trial__head .-sm::after { margin-left: 2.0512820513vw; } } .trial__head .-lg { font-size: 1.5rem; letter-spacing: 0.075rem; } @container (width >= 501px) and (width < 768px) { .trial__head .-lg { font-size: 24px; font-size: 6.1538461538vw; letter-spacing: 0.3076923077vw; } } @container (width < 500px) { .trial__head .-lg { font-size: 24px; font-size: 6.1538461538vw; letter-spacing: 0.3076923077vw; } } .trial__body { margin-top: 2.25rem; } @container (width >= 501px) and (width < 768px) { .trial__body { margin-top: 9.2307692308vw; } } @container (width < 500px) { .trial__body { margin-top: 9.2307692308vw; } } .trial__content { display: grid; grid-template-columns: auto 1fr; gap: 1rem; } @container (width >= 501px) and (width < 768px) { .trial__content { gap: 4.1025641026vw; } } @container (width < 500px) { .trial__content { gap: 4.1025641026vw; } } .trial__img { width: 11.875rem; } @container (width >= 501px) and (width < 768px) { .trial__img { width: 48.7179487179vw; } } @container (width < 500px) { .trial__img { width: 38.4615384615vw; } } .trial__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .trial__text { display: flex; align-items: center; gap: 0.5rem; color: var(--cl-white); font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 700; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .trial__text { gap: 2.0512820513vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .trial__text { gap: 2.0512820513vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .trial__text::before { content: ""; display: inline-block; width: 0.125rem; height: 1rem; background-color: rgba(255, 255, 255, 0.5); } @container (width >= 501px) and (width < 768px) { .trial__text::before { width: 0.5128205128vw; height: 4.1025641026vw; } } @container (width < 500px) { .trial__text::before { width: 0.5128205128vw; height: 4.1025641026vw; } } .trial__list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; } @container (width >= 501px) and (width < 768px) { .trial__list { margin-top: 3.0769230769vw; gap: 1.5384615385vw; } } @container (width < 500px) { .trial__list { margin-top: 3.0769230769vw; gap: 1.5384615385vw; } } .trial__list > li { background-color: var(--cl-white); border-radius: 0.25rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; letter-spacing: 0.034375rem; line-height: 1.3; font-feature-settings: "palt"; text-align: center; } @container (width >= 501px) and (width < 768px) { .trial__list > li { border-radius: 0.25rem; height: 10.2564102564vw; font-size: 11px; font-size: 2.8205128205vw; letter-spacing: 0.141025641vw; } } @container (width < 500px) { .trial__list > li { border-radius: 0.25rem; height: 10.2564102564vw; font-size: 11px; font-size: 2.8205128205vw; letter-spacing: 0.141025641vw; } } .trial__btn-wrapper { margin-top: 1.25rem; padding-inline: 0.9375rem; } @container (width >= 501px) and (width < 768px) { .trial__btn-wrapper { margin-top: 5.1282051282vw; padding-inline: 3.8461538462vw; } } @container (width < 500px) { .trial__btn-wrapper { margin-top: 5.1282051282vw; padding-inline: 3.8461538462vw; } } .trial__btn { height: 3.5rem; background-color: var(--cl-main); color: var(--cl-white); box-shadow: 0 7px 0 #00215c; font-size: 0.9375rem; letter-spacing: 0.046875rem; font-weight: 700; position: relative; } @media (min-width: 1024px) { .trial__btn:hover { box-shadow: none; transform: translateY(5px); } } @container (width >= 501px) and (width < 768px) { .trial__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } @container (width < 500px) { .trial__btn { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; letter-spacing: 0.1923076923vw; } } .trial__btn::after { content: ""; background-image: url("../img/page/icon_arrow_btn_blue.svg"); background-repeat: no-repeat; background-size: contain; width: 1.625rem; height: 1.625rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } @container (width >= 501px) and (width < 768px) { .trial__btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @container (width < 500px) { .trial__btn::after { width: 6.6666666667vw; height: 6.6666666667vw; right: 4.1025641026vw; } } @media (any-hover: hover) { .trial__btn:hover { color: var(--cl-white); } } .tuition__wrapper { background-color: var(--cl-white); padding-top: 3.75rem; } @container (width >= 501px) and (width < 768px) { .tuition__wrapper { padding-top: 15.3846153846vw; } } @container (width < 500px) { .tuition__wrapper { padding-top: 15.3846153846vw; } } .tuition__body { width: 100%; max-width: 21.875rem; margin: 2.5rem auto 0; border-radius: 0.5rem; background: #f8f8ed; padding: 2.5rem 1.5rem 2rem; } @container (width >= 501px) and (width < 768px) { .tuition__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; border-radius: 2.0512820513vw; padding: 10.2564102564vw 6.1538461538vw 8.2051282051vw; } } @container (width < 500px) { .tuition__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; border-radius: 2.0512820513vw; padding: 10.2564102564vw 6.1538461538vw 8.2051282051vw; } } .tuition__text { font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 700; } @container (width >= 501px) and (width < 768px) { .tuition__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .tuition__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .tuition__text--result { color: var(--cl-main); padding-bottom: 0.5rem; border-bottom: var(--cl-main) 1px solid; margin-bottom: 1.25rem; } @container (width >= 501px) and (width < 768px) { .tuition__text--result { padding-bottom: 2.0512820513vw; margin-bottom: 5.1282051282vw; } } @container (width < 500px) { .tuition__text--result { padding-bottom: 2.0512820513vw; margin-bottom: 5.1282051282vw; } } .tuition__select { width: 100%; height: 2.5rem; border: var(--cl-border) 1px solid; border-radius: 0.375rem; display: flex; align-items: center; padding-inline: 1.25rem; font-size: 0.8125rem; margin-top: 0.5rem; } @container (width >= 501px) and (width < 768px) { .tuition__select { height: 10.2564102564vw; border-radius: 1.5384615385vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } @container (width < 500px) { .tuition__select { height: 10.2564102564vw; border-radius: 1.5384615385vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } .tuition__detail { margin-top: 1.5rem; } @container (width >= 501px) and (width < 768px) { .tuition__detail { margin-top: 6.1538461538vw; } } @container (width < 500px) { .tuition__detail { margin-top: 6.1538461538vw; } } .tuition__dl:not(:last-of-type) { margin-bottom: 1.25rem; } @container (width >= 501px) and (width < 768px) { .tuition__dl:not(:last-of-type) { margin-bottom: 5.1282051282vw; } } @container (width < 500px) { .tuition__dl:not(:last-of-type) { margin-bottom: 5.1282051282vw; } } .tuition__dl > dt { background: #6d9edb; border-radius: 0.25rem 0.25rem 0 0; height: 2rem; color: var(--cl-white); font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 400; display: grid; place-content: center; } @container (width >= 501px) and (width < 768px) { .tuition__dl > dt { height: 8.2051282051vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .tuition__dl > dt { height: 8.2051282051vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .tuition__dl > dd { background: var(--cl-white); border-radius: 0 0 0.25rem 0.25rem; padding: 0.75rem 1.5rem 0.75rem; } @container (width >= 501px) and (width < 768px) { .tuition__dl > dd { border-radius: 0 0 1.0256410256vw 1.0256410256vw; padding: 3.0769230769vw 6.1538461538vw 3.0769230769vw; } } @container (width < 500px) { .tuition__dl > dd { border-radius: 0 0 1.0256410256vw 1.0256410256vw; padding: 3.0769230769vw 6.1538461538vw 3.0769230769vw; } } .tuition__dl > dd > .-price { text-align: center; font-size: 1.125rem; letter-spacing: 0.05625rem; font-weight: 500; font-family: var(--font-poppins); } @container (width >= 501px) and (width < 768px) { .tuition__dl > dd > .-price { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } @container (width < 500px) { .tuition__dl > dd > .-price { font-size: 18px; font-size: 4.6153846154vw; letter-spacing: 0.2307692308vw; } } .tuition__dl > dd > .-price > .-sm { font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 700; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .tuition__dl > dd > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .tuition__dl > dd > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .tuition__list > li:not(:last-child) { margin-bottom: 1rem; } @container (width >= 501px) and (width < 768px) { .tuition__list > li:not(:last-child) { margin-bottom: 4.1025641026vw; } } @container (width < 500px) { .tuition__list > li:not(:last-child) { margin-bottom: 4.1025641026vw; } } .tuition__list > li > .-text { font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 400; font-feature-settings: "palt"; text-align: center; padding-bottom: 0.375rem; border-bottom: var(--cl-border) 1px dashed; margin-bottom: 0.25rem; } @container (width >= 501px) and (width < 768px) { .tuition__list > li > .-text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; padding-bottom: 1.5384615385vw; margin-bottom: 1.0256410256vw; } } @container (width < 500px) { .tuition__list > li > .-text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; padding-bottom: 1.5384615385vw; margin-bottom: 1.0256410256vw; } } .tuition__list > li > .-price { font-size: 1.3125rem; font-weight: 500; font-family: var(--font-poppins); text-align: center; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .tuition__list > li > .-price { font-size: 21px; font-size: 5.3846153846vw; } } @container (width < 500px) { .tuition__list > li > .-price { font-size: 21px; font-size: 5.3846153846vw; } } .tuition__list > li > .-price > .-sm { font-size: 0.8125rem; letter-spacing: 0.040625rem; font-weight: 700; font-feature-settings: "palt"; } @container (width >= 501px) and (width < 768px) { .tuition__list > li > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } @container (width < 500px) { .tuition__list > li > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; } } .tuition__link-wrapper { margin-top: 0.5rem; } @container (width >= 501px) and (width < 768px) { .tuition__link-wrapper { margin-top: 2.0512820513vw; } } @container (width < 500px) { .tuition__link-wrapper { margin-top: 2.0512820513vw; } } .tuition__link { display: flex; align-items: center; justify-content: flex-end; font-size: 0.75rem; letter-spacing: 0.0375rem; text-decoration: underline !important; } @container (width >= 501px) and (width < 768px) { .tuition__link { font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } @container (width < 500px) { .tuition__link { font-size: 12px; font-size: 3.0769230769vw; letter-spacing: 0.1538461538vw; } } .tuition__link::before { content: ""; background-image: url("../img/page/icon_arrow_btn_black.svg"); background-repeat: no-repeat; background-size: contain; display: inline-block; width: 0.9375rem; height: 0.9375rem; margin-right: 0.3125rem; } @container (width >= 501px) and (width < 768px) { .tuition__link::before { width: 3.8461538462vw; height: 3.8461538462vw; } } @container (width < 500px) { .tuition__link::before { width: 3.8461538462vw; height: 3.8461538462vw; } } .faq { padding-block: 4rem 3.125rem; } @container (width >= 501px) and (width < 768px) { .faq { padding-block: 16.4102564103vw 12.8205128205vw; } } @container (width < 500px) { .faq { padding-block: 16.4102564103vw 12.8205128205vw; } } .faq__body { width: 100%; max-width: 21.875rem; margin: 2.5rem auto 0; } @container (width >= 501px) and (width < 768px) { .faq__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; } } @container (width < 500px) { .faq__body { max-width: 89.7435897436vw; margin: 10.2564102564vw auto 0; } } .faq__dl:not(:last-of-type) { margin-bottom: 0.5rem; } @container (width >= 501px) and (width < 768px) { .faq__dl:not(:last-of-type) { margin-bottom: 2.0512820513vw; } } @container (width < 500px) { .faq__dl:not(:last-of-type) { margin-bottom: 2.0512820513vw; } } .faq__dl > dt { background-color: var(--cl-bg); border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.046875rem; padding: 0.75rem 3.75rem 0.75rem 3rem; position: relative; cursor: pointer; } @container (width >= 501px) and (width < 768px) { .faq__dl > dt { border-radius: 2.0512820513vw; font-size: 15px; font-size: 3.8461538462vw; padding: 3.0769230769vw 4.1025641026vw; } } @container (width < 500px) { .faq__dl > dt { border-radius: 2.0512820513vw; font-size: 15px; font-size: 3.8461538462vw; padding: 3.0769230769vw 12.8205128205vw 3.0769230769vw 12.3076923077vw; } } .faq__dl > dt::before { content: "Q"; position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); font-family: var(--font-poppins); display: inline-block; color: #cacaca; font-size: 1.125rem; margin-right: 1rem; } @container (width >= 501px) and (width < 768px) { .faq__dl > dt::before { font-size: 18px; font-size: 4.6153846154vw; margin-right: 4.1025641026vw; } } @container (width < 500px) { .faq__dl > dt::before { font-size: 18px; font-size: 4.6153846154vw; margin-right: 4.1025641026vw; } } .faq__dl > dt::after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; background-image: url("../img/page/icon_faq_plus.svg"); background-repeat: no-repeat; background-size: contain; } @container (width >= 501px) and (width < 768px) { .faq__dl > dt::after { right: 4.1025641026vw; width: 5.1282051282vw; height: 5.1282051282vw; } } @container (width < 500px) { .faq__dl > dt::after { right: 4.1025641026vw; width: 5.1282051282vw; height: 5.1282051282vw; } } .faq__dl > dd { display: none; line-height: 1.8; padding: 1rem 1rem 1.5rem 3rem; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.040625rem; position: relative; } @container (width >= 501px) and (width < 768px) { .faq__dl > dd { padding: 4.1025641026vw 4.1025641026vw 6.1538461538vw 12.3076923077vw; font-size: 13px; font-size: 3.3333333333vw; } } @container (width < 500px) { .faq__dl > dd { padding: 4.1025641026vw 4.1025641026vw 6.1538461538vw 12.3076923077vw; font-size: 13px; font-size: 3.3333333333vw; } } .faq__dl > dd::before { content: "A"; font-family: var(--font-poppins); font-weight: 500; display: inline-block; color: var(--cl-main); font-size: 1.125rem; margin-right: 1rem; position: absolute; top: 1rem; left: 1rem; } @container (width >= 501px) and (width < 768px) { .faq__dl > dd::before { font-size: 18px; font-size: 4.6153846154vw; margin-right: 4.1025641026vw; top: 4.1025641026vw; left: 4.1025641026vw; } } @container (width < 500px) { .faq__dl > dd::before { font-size: 18px; font-size: 4.6153846154vw; margin-right: 4.1025641026vw; top: 4.1025641026vw; left: 4.1025641026vw; } } .faq__dl.-active > dt { background-color: var(--cl-main); color: var(--cl-white); border-radius: 0.5rem 0.5rem 0 0; cursor: pointer; } @container (width >= 501px) and (width < 768px) { .faq__dl.-active > dt { border-radius: 2.0512820513vw 2.0512820513vw 0 0; } } @container (width < 500px) { .faq__dl.-active > dt { border-radius: 2.0512820513vw 2.0512820513vw 0 0; } } .faq__dl.-active > dt::before { color: var(--cl-white); } .faq__dl.-active > dt::after { background-image: url("../img/page/icon_faq_minus.svg"); } .faq__dl.-active > dd { display: block; background-color: var(--cl-white); border-left: var(--cl-main) 1px solid; border-right: var(--cl-main) 1px solid; border-bottom: var(--cl-main) 1px solid; border-radius: 0 0 0.5rem 0.5rem; } @container (width >= 501px) and (width < 768px) { .faq__dl.-active > dd { border-radius: 0 0 2.0512820513vw 2.0512820513vw; } } @container (width < 500px) { .faq__dl.-active > dd { border-radius: 0 0 2.0512820513vw 2.0512820513vw; } } .faq__link { display: flex; align-items: center; margin-top: 0.5rem; text-decoration: underline !important; } @container (width >= 501px) and (width < 768px) { .faq__link { margin-top: 2.0512820513vw; } } @container (width < 500px) { .faq__link { margin-top: 2.0512820513vw; } } .faq__link::before { content: ""; background-image: url("../img/page/icon_arrow_btn_black.svg"); background-repeat: no-repeat; background-size: contain; display: inline-block; width: 0.9375rem; height: 0.9375rem; margin-right: 0.3125rem; } @container (width >= 501px) and (width < 768px) { .faq__link::before { width: 3.8461538462vw; height: 3.8461538462vw; } } @container (width < 500px) { .faq__link::before { width: 3.8461538462vw; height: 3.8461538462vw; } } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } lite-youtube::before { content: attr(data-title); display: block; position: absolute; top: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0, rgba(0, 0, 0, 0.54) 14%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.05) 72%, rgba(0, 0, 0, 0) 94%); height: 99px; width: 100%; font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif; color: hsl(0, 0%, 93.33%); text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); font-size: 18px; padding: 25px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } lite-youtube:hover::before { color: #fff; } lite-youtube::after { content: ""; display: block; padding-bottom: 56.25%; } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } lite-youtube > .lty-playbtn { display: block; width: 100%; height: 100%; background: no-repeat center/49.5px 35.06px; background-image: url('data:image/svg+xml;utf8,'); position: absolute; cursor: pointer; z-index: 1; filter: grayscale(100%); transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1); border: 0; } lite-youtube .lty-playbtn:focus, lite-youtube:hover > .lty-playbtn { filter: none; } lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } lite-youtube > .lty-playbtn { filter: none; transition: filter 0.2s ease; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: grayscale(100%) !important; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .interview__slide-item lite-youtube { pointer-events: none; } .js-video-modal-open { cursor: pointer; } .js-video-modal-open:hover lite-youtube { opacity: 0.5; transition: opacity 0.3s ease; cursor: pointer; } .js-pageTop { position: fixed; bottom: 2rem; right: 20px; width: 70px; height: 70px; background-color: #eaf3ff; border: 2px solid #004294; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #004294; font-weight: bold; font-size: 14px; text-align: center; cursor: pointer; z-index: 8; transition: opacity 0.3s; text-decoration: none; } @container (width >= 501px) and (width < 768px) { .js-pageTop { width: 70px; height: 70px; } } @container (width < 500px) { .js-pageTop { bottom: 5.7rem; right: 10px; width: 50px; height: 50px; } } .js-pageTop:hover { opacity: 0.5; } .pageTop__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .pageTop__icon { font-size: 13px; margin-bottom: 4px; } @container (width >= 501px) and (width < 768px) { .pageTop__icon { font-size: 13px; } } @container (width < 500px) { .pageTop__icon { font-size: 9px; } } .pageTop__text { font-size: 13px; } @container (width >= 501px) and (width < 768px) { .pageTop__text { font-size: 13px; } } @container (width < 500px) { .pageTop__text { font-size: 9px; } } .modal-video { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 9999; } .modal-video.is_active { display: flex; } .modal-video__container { width: 90%; max-width: 960px; aspect-ratio: 16/9; background: #000; position: relative; } .modal-video__iframe-wrapper { width: 100%; height: 100%; } .modal-video__iframe-wrapper iframe { width: 100%; height: 100%; display: block; } .modal-video__close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 2rem; background: none; border: none; cursor: pointer; } .mv__no1.no-filter { filter: drop-shadow(0px 0px 1px #333); } #cta__fixed { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 10px 0.3rem 16px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); z-index: 8; display: flex; justify-content: space-between; } #cta__fixed .cta__btn { width: 48%; margin: 0 auto; height: 2.75rem; } #cta__fixed .cta__btn.-info { background: none; background-color: var(--cl-trial); color: var(--cl-main); box-shadow: #477aa6 0px 6px 0px; text-align: center; } #cta__fixed .cta__sp { border-radius: 5px; font-size: 0.75rem; padding-right: 0.8rem; } @media (min-width: 1024px) { #cta__fixed .cta__sp:hover { box-shadow: none; transform: translateY(5px); } } #cta__fixed .cta__sp:before { content: none; } #cta__fixed .cta__sp:after { width: 1.125rem; height: 1.125rem; right: 0.625rem; top: 51.3%; } #cta__fixed .cta__sp.-info:after { background-image: url(../img/page/icon_arrow_btn_blue.svg); right: 0.375rem; width: 1.1875rem; height: 1.1875rem; } @media (min-width: 1025px) { #cta__fixed { display: none !important; } } .js-mv-slider { opacity: 0; transition: opacity 0.5s ease; } .js-mv-slider.is-visible { opacity: 1; } .cta__btn__gnav { border-radius: 0.3rem; font-size: 0.875rem; } @media (max-width: 375px) { .cta__btn__gnav { height: 2.8125rem; } } @media (min-width: 1024px) { .cta__btn__gnav:hover { box-shadow: none; transform: translateY(5px); } } .cta__btn__gnav::after { background-image: url(../img/page/icon_arrow_btn.svg); right: 0.65625rem; width: 1.25rem; height: 1.25rem; } .cta__btn__gnav.-line { background: #00c300; box-shadow: 0 7px 0 #019f01; } .cta__btn__gnav.-line::before { background-image: url(../img/page/gnav_line.png); width: 2.125rem; height: 2.1rem; left: 0.625rem; } .cta__btn__gnav.-info { background: var(--cl-trial); color: var(--cl-main); box-shadow: 0 7px 0 #477aa6; padding-left: 0.5rem; font-size: 0.84375rem; } .cta__btn__gnav.-info::before { background-image: url(../img/page/icon_trial.svg); left: 1.03125rem; } .cta__btn__gnav.-info:after { background-image: url(../img/page/icon_arrow_btn_blue.svg); top: 53%; } .cta__btn__gnav.-document::before { left: 1.03125rem; } /* --------------------------------------- JS_fadeIn ----------------------------------------*/ .js-scroll-fade-bg { overflow: hidden; opacity: 0; } .js-scroll-fade-bg.is_animation { animation: imgScale 1s ease-out forwards; } @keyframes imgScale { 0% { transform: scale(1.1); opacity: 0; } 25% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* --------------------------------------- JS_tab ----------------------------------------*/ .js-tabContent { display: none; } .js-tabContent.show { display: block; } /* --------------------------------------- Margin -----------------------------------------*/ .mt00 { margin-top: 0px !important; } .mt01 { margin-top: 1px !important; } .mt02 { margin-top: 2px !important; } .mt03 { margin-top: 3px !important; } .mt04 { margin-top: 4px !important; } .mt05 { margin-top: 5px !important; } .mt06 { margin-top: 6px !important; } .mt07 { margin-top: 7px !important; } .mt08 { margin-top: 8px !important; } .mt09 { margin-top: 9px !important; } .mt10 { margin-top: 10px !important; } .mt11 { margin-top: 11px !important; } .mt12 { margin-top: 12px !important; } .mt13 { margin-top: 13px !important; } .mt14 { margin-top: 14px !important; } .mt15 { margin-top: 15px !important; } .mt16 { margin-top: 16px !important; } .mt17 { margin-top: 17px !important; } .mt18 { margin-top: 18px !important; } .mt19 { margin-top: 19px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt45 { margin-top: 45px !important; } .mt50 { margin-top: 50px !important; } .mt55 { margin-top: 55px !important; } .mt60 { margin-top: 60px !important; } .mt65 { margin-top: 65px !important; } .mt70 { margin-top: 70px !important; } .mt75 { margin-top: 75px !important; } .mt80 { margin-top: 80px !important; } .mt85 { margin-top: 85px !important; } .mt90 { margin-top: 90px !important; } .mt95 { margin-top: 95px !important; } .mt100 { margin-top: 100px !important; } .mr00 { margin-right: 0 !important; } .mr01 { margin-right: 1px !important; } .mr02 { margin-right: 2px !important; } .mr03 { margin-right: 3px !important; } .mr04 { margin-right: 4px !important; } .mr05 { margin-right: 5px !important; } .mr06 { margin-right: 6px !important; } .mr07 { margin-right: 7px !important; } .mr08 { margin-right: 8px !important; } .mr09 { margin-right: 9px !important; } .mr10 { margin-right: 10px !important; } .mr11 { margin-right: 11px !important; } .mr12 { margin-right: 12px !important; } .mr13 { margin-right: 13px !important; } .mr14 { margin-right: 14px !important; } .mr15 { margin-right: 15px !important; } .mr16 { margin-right: 16px !important; } .mr17 { margin-right: 17px !important; } .mr18 { margin-right: 18px !important; } .mr19 { margin-right: 19px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr45 { margin-right: 45px !important; } .mr50 { margin-right: 50px !important; } .mr55 { margin-right: 55px !important; } .mr60 { margin-right: 60px !important; } .mr65 { margin-right: 65px !important; } .mr70 { margin-right: 70px !important; } .mr75 { margin-right: 75px !important; } .mr80 { margin-right: 80px !important; } .mr85 { margin-right: 85px !important; } .mr90 { margin-right: 90px !important; } .mr95 { margin-right: 95px !important; } .mr100 { margin-right: 100px !important; } .mb00 { margin-bottom: 0px !important; } .mb01 { margin-bottom: 1px !important; } .mb02 { margin-bottom: 2px !important; } .mb03 { margin-bottom: 3px !important; } .mb04 { margin-bottom: 4px !important; } .mb05 { margin-bottom: 5px !important; } .mb06 { margin-bottom: 6px !important; } .mb07 { margin-bottom: 7px !important; } .mb08 { margin-bottom: 8px !important; } .mb09 { margin-bottom: 9px !important; } .mb10 { margin-bottom: 10px !important; } .mb11 { margin-bottom: 11px !important; } .mb12 { margin-bottom: 12px !important; } .mb13 { margin-bottom: 13px !important; } .mb14 { margin-bottom: 14px !important; } .mb15 { margin-bottom: 15px !important; } .mb16 { margin-bottom: 16px !important; } .mb17 { margin-bottom: 17px !important; } .mb18 { margin-bottom: 18px !important; } .mb19 { margin-bottom: 19px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb55 { margin-bottom: 55px !important; } .mb60 { margin-bottom: 60px !important; } .mb65 { margin-bottom: 65px !important; } .mb70 { margin-bottom: 70px !important; } .mb75 { margin-bottom: 75px !important; } .mb80 { margin-bottom: 80px !important; } .mb85 { margin-bottom: 85px !important; } .mb90 { margin-bottom: 90px !important; } .mb95 { margin-bottom: 95px !important; } .mb100 { margin-bottom: 100px !important; } .mb150 { margin-bottom: 150px !important; } .ml00 { margin-left: 0px !important; } .ml01 { margin-left: 1px !important; } .ml02 { margin-left: 2px !important; } .ml03 { margin-left: 3px !important; } .ml04 { margin-left: 4px !important; } .ml05 { margin-left: 5px !important; } .ml06 { margin-left: 6px !important; } .ml07 { margin-left: 7px !important; } .ml08 { margin-left: 8px !important; } .ml09 { margin-left: 9px !important; } .ml10 { margin-left: 10px !important; } .ml11 { margin-left: 11px !important; } .ml12 { margin-left: 12px !important; } .ml13 { margin-left: 13px !important; } .ml14 { margin-left: 14px !important; } .ml15 { margin-left: 15px !important; } .ml16 { margin-left: 16px !important; } .ml17 { margin-left: 17px !important; } .ml18 { margin-left: 18px !important; } .ml19 { margin-left: 19px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml45 { margin-left: 45px !important; } .ml50 { margin-left: 50px !important; } .ml55 { margin-left: 55px !important; } .ml60 { margin-left: 60px !important; } .ml65 { margin-left: 65px !important; } .ml70 { margin-left: 70px !important; } .ml75 { margin-left: 75px !important; } .ml80 { margin-left: 80px !important; } .ml85 { margin-left: 85px !important; } .ml90 { margin-left: 90px !important; } .ml95 { margin-left: 95px !important; } .ml100 { margin-left: 100px !important; } .ma00 { margin: 0px !important; } .ma01 { margin: 1px !important; } .ma02 { margin: 2px !important; } .ma03 { margin: 3px !important; } .ma04 { margin: 4px !important; } .ma05 { margin: 5px !important; } .ma06 { margin: 6px !important; } .ma07 { margin: 7px !important; } .ma08 { margin: 8px !important; } .ma09 { margin: 9px !important; } .ma10 { margin: 10px !important; } .ma11 { margin: 11px !important; } .ma12 { margin: 12px !important; } .ma13 { margin: 13px !important; } .ma14 { margin: 14px !important; } .ma15 { margin: 15px !important; } .ma16 { margin: 16px !important; } .ma17 { margin: 17px !important; } .ma18 { margin: 18px !important; } .ma19 { margin: 19px !important; } .ma20 { margin: 20px !important; } .ma25 { margin: 25px !important; } .ma30 { margin: 30px !important; } .ma35 { margin: 35px !important; } .ma40 { margin: 40px !important; } .ma45 { margin: 45px !important; } .ma50 { margin: 50px !important; } .ma55 { margin: 55px !important; } .ma60 { margin: 60px !important; } .ma65 { margin: 65px !important; } .ma70 { margin: 70px !important; } .ma75 { margin: 75px !important; } .ma80 { margin: 80px !important; } .ma85 { margin: 85px !important; } .ma90 { margin: 90px !important; } .ma95 { margin: 95px !important; } .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 */