@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: #00c056; --cl-online: #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-mplus: "M PLUS 1", sans-serif; --font-quicksand: "Quicksand", sans-serif; --font-poppins: "Poppins", sans-serif; --font-noto: "Noto Sans JP", sans-serif; --font-zenmaru: "Zen Maru Gothic", sans-serif; --scale: 1.1; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-in-out; --opacity: 0.8; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } @container (width < 390px) { html { scroll-padding-top: 18.4615384615vw; } } @container (width > 390px) and (width < 768px) { html { scroll-padding-top: 18.4615384615vw; } } html body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; font-family: var(--font-noto); font-size: 1rem; background-color: var(--cl-white); color: var(--cl-text); line-height: 1.5; min-height: 100dvh; } html body img { width: 100%; height: auto; vertical-align: bottom; font-size: 0; line-height: 0; } html body a { color: var(--cl-link); text-decoration: none; word-break: break-all; transition: var(--transition); } html body a:hover, html body a:link, html body a:visited, html body a:active { text-decoration: none; } @media (any-hover: hover) { html body a:hover { color: var(--cl-link-hover); opacity: var(--opacity); } } html body textarea, html body input, html body select { background-color: var(--cl-white); border: var(--cl-border) 1px solid; border-radius: 6px; padding: 8px 10px; box-sizing: border-box; } html body.is_hidden { overflow: hidden; } /* --------------------------------------- Header -----------------------------------------*/ @media screen and (width > 1024px) { .header { display: none; } } @media screen and (width <= 1024px) { .header { position: fixed; width: 100%; max-width: 24.375rem; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; transition: all 0.3s; } @container (width < 390px) { .header { max-width: 100vw; } } @container (width > 390px) and (width < 768px) { .header { max-width: 100vw; } } } .header__wrapper { width: 100%; max-width: 21.875rem; height: 3.5rem; background-color: var(--cl-white); border-radius: 9999px; box-shadow: 0 0 0.4375rem 0 rgba(0, 0, 0, 0.08); margin: 1rem auto 0; padding-inline: 1rem 1.5rem; display: flex; align-items: center; justify-content: center; justify-content: space-between; } @container (width < 390px) { .header__wrapper { max-width: 89.7435897436vw; height: 14.358974359vw; margin: 4.1025641026vw auto 0; padding-inline: 4.1025641026vw 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .header__wrapper { max-width: 89.7435897436vw; height: 14.358974359vw; margin: 4.1025641026vw auto 0; padding-inline: 4.1025641026vw 6.1538461538vw; } } .header__logo { width: 12.5625rem; height: 2.125rem; } @container (width < 390px) { .header__logo { width: 51.5384615385vw; height: 8.7179487179vw; } } @container (width > 390px) and (width < 768px) { .header__logo { width: 51.5384615385vw; height: 8.7179487179vw; } } .header__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .header__nav { background-color: var(--cl-white); position: fixed; top: 0; width: 100%; } /* --------------------------------------- Global Navigation -----------------------------------------*/ .gNavi { visibility: hidden; opacity: 0; transition: var(--transition); } .gNavi__nav { background: linear-gradient(126deg, rgba(75, 155, 234, 0.2) 13.56%, rgba(48, 96, 201, 0.2) 85.43%); width: 24.375rem; height: calc(100dvh - 3.75rem); padding-block: 1.5rem 2.5rem; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } @container (width < 390px) { .gNavi__nav { width: 100%; height: calc(100dvh - 15.3846153846vw); padding-block: 6.1538461538vw 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .gNavi__nav { width: 100%; height: calc(100dvh - 15.3846153846vw); padding-block: 6.1538461538vw 10.2564102564vw; } } .gNavi__nav::-webkit-scrollbar { display: none; } .gNavi__head { display: flex; align-items: center; justify-content: space-between; height: 3.75rem; margin-inline: 1.25rem; } @container (width < 390px) { .gNavi__head { height: 15.3846153846vw; margin-inline: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .gNavi__head { height: 15.3846153846vw; margin-inline: 5.1282051282vw; } } .gNavi__logo { width: 12.5rem; } @container (width < 390px) { .gNavi__logo { width: 51.2820512821vw; } } @container (width > 390px) and (width < 768px) { .gNavi__logo { width: 51.2820512821vw; } } .gNavi__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .gNavi__list { display: flex; flex-direction: column; gap: 0.5rem; margin-inline: 1.25rem; } @container (width < 390px) { .gNavi__list { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .gNavi__list { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } .gNavi__list li a { background-color: var(--cl-white); border: var(--cl-main) 1px solid; border-radius: 0.5rem; box-shadow: 0 0.125rem 0 0 var(--cl-main); display: flex; align-items: center; color: var(--cl-main); font-size: 0.9375rem; font-weight: 500; position: relative; height: 2.8125rem; padding-left: 1.5rem; } @container (width < 390px) { .gNavi__list li a { border-radius: 2.0512820513vw; box-shadow: 0 0.5128205128vw 0 0 var(--cl-main); font-size: 15px; font-size: 3.8461538462vw; height: 11.5384615385vw; padding-left: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .gNavi__list li a { border-radius: 2.0512820513vw; box-shadow: 0 0.5128205128vw 0 0 var(--cl-main); font-size: 15px; font-size: 3.8461538462vw; height: 11.5384615385vw; padding-left: 6.1538461538vw; } } .gNavi__list li a::after { content: ""; background-color: var(--cl-main); clip-path: polygon(0 0, 0% 100%, 100% 50%); width: 0.5rem; height: 0.6875rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } @container (width < 390px) { .gNavi__list li a::after { right: 4.1025641026vw; width: 2.0512820513vw; height: 2.8205128205vw; } } @container (width > 390px) and (width < 768px) { .gNavi__list li a::after { right: 4.1025641026vw; width: 2.0512820513vw; height: 2.8205128205vw; } } @media (any-hover: hover) { .gNavi__list li a:hover { color: var(--cl-main); } } .gNavi__cta-wrapper { display: flex; gap: 0.5rem; margin: 0.5rem 1.25rem 0; } @container (width < 390px) { .gNavi__cta-wrapper { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-wrapper { gap: 2.0512820513vw; margin-inline: 5.1282051282vw; } } .gNavi__cta-btn { flex: 1; border-radius: 0.25rem; display: flex; align-items: center; gap: 0.125rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.3; text-align: center; padding: 0.5rem 0.875rem 0.625rem 0.5rem; } @container (width < 390px) { .gNavi__cta-btn { font-size: 12px; font-size: 3.0769230769vw; padding: 2.0512820513vw 3.5897435897vw 2.5641025641vw 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn { font-size: 12px; font-size: 3.0769230769vw; padding: 2.0512820513vw 3.5897435897vw 2.5641025641vw 2.0512820513vw; } } @media (any-hover: hover) { .gNavi__cta-btn:hover { box-shadow: none; transform: translateY(0.25rem); } } .gNavi__cta-btn--line { background-color: #4cc764; color: var(--cl-white); box-shadow: 0 0.25rem 0 0 #2c794c; } @container (width < 390px) { .gNavi__cta-btn--line { box-shadow: 0 1.0256410256vw 0 0 #2c794c; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn--line { box-shadow: 0 1.0256410256vw 0 0 #2c794c; } } @media (any-hover: hover) { .gNavi__cta-btn--line:hover { color: var(--cl-white); } } .gNavi__cta-btn--online { background-color: #a9d7ff; color: var(--cl-main); box-shadow: 0 0.25rem 0 0 #176395; } @container (width < 390px) { .gNavi__cta-btn--online { box-shadow: 0 1.0256410256vw 0 0 #176395; } } @container (width > 390px) and (width < 768px) { .gNavi__cta-btn--online { box-shadow: 0 1.0256410256vw 0 0 #176395; } } @media (any-hover: hover) { .gNavi__cta-btn--online:hover { color: var(--cl-main); } } .gNavi__cta-btn .-icon { flex-shrink: 0; width: 2rem; } .gNavi.is_active { visibility: visible; opacity: 1; } /* --------------------------------------- Global Navigation for Smartphone -----------------------------------------*/ .navToggle__btn { cursor: pointer; display: flex; justify-content: center; flex-direction: column; gap: 0.375rem; } @container (width < 390px) { .navToggle__btn { gap: 1.5384615385vw; } } @container (width > 390px) and (width < 768px) { .navToggle__btn { gap: 1.5384615385vw; } } .navToggle__btn .-line { display: block; background-color: var(--cl-main); width: 2.0625rem; height: 0.0625rem; position: relative; } @container (width < 390px) { .navToggle__btn .-line { width: 8.4615384615vw; height: 0.2564102564vw; } } @container (width > 390px) and (width < 768px) { .navToggle__btn .-line { width: 8.4615384615vw; height: 0.2564102564vw; } } .navToggle__btn .-menu { display: block; color: var(--cl-main); text-transform: capitalize; font-family: var(--font-poppins); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.05em; margin-block: var(--trim-leading); } @container (width < 390px) { .navToggle__btn .-menu { font-size: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .navToggle__btn .-menu { font-size: 3.0769230769vw; } } .navToggle__btn--active { align-items: center; background-color: #bbd4f5; border-radius: 0.375rem; width: 3.75rem; height: 1.75rem; } @container (width < 390px) { .navToggle__btn--active { border-radius: 1.5384615385vw; width: 15.3846153846vw; height: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .navToggle__btn--active { border-radius: 1.5384615385vw; width: 15.3846153846vw; height: 7.1794871795vw; } } /* --------------------------------------- Container -----------------------------------------*/ .container { display: grid; align-items: start; grid-template-columns: 1fr 24.375rem 1fr; } @media screen and (width <= 767px) { .container { display: block; } } .container__left, .container__right { position: sticky; top: 0; height: 100dvh; overflow: hidden; background-color: #dfe7f7; display: grid; place-content: center; } @media screen and (width <= 767px) { .container__left, .container__right { display: none; } } .container__left { background-image: url("../img/container_left_bg_top.svg"), url("../img/container_left_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: top right, bottom left; } .container__right { background-image: url("../img/container_right_bg_top.svg"), url("../img/container_right_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: top right, bottom right; } .container__main { container-type: inline-size; position: relative; overflow: clip; } @media screen and (width <= 767px) { .container__main { width: 100%; } } @media screen and (width <= 1024px) { .container__inner { display: none; } } .container__nav { display: flex; flex-direction: column; } @media screen and (width > 1400px) { .container__nav { width: 18.5625rem; gap: 0.5rem; } } @media screen and (width <= 1400px) { .container__nav { width: 21.2142857143vw; gap: 0.5714285714vw; } } .container__nav > li a { display: flex; align-items: center; background-color: var(--cl-white); border: 1px solid var(--cl-main); color: var(--cl-main); position: relative; } @media screen and (width > 1400px) { .container__nav > li a { border-radius: 0.5rem; box-shadow: 0 0.125rem 0 var(--cl-main); font-size: 0.9375rem; height: 2.75rem; padding-top: 0.125rem; padding-left: 1.5rem; } } @media screen and (width <= 1400px) { .container__nav > li a { border-radius: 0.5714285714vw; box-shadow: 0 0.1428571429vw 0 var(--cl-main); font-size: 15px; font-size: 1.0714285714vw; height: 3.1428571429vw; padding-top: 0.1428571429vw; padding-left: 1.7142857143vw; } } .container__nav > li a::after { content: ""; display: block; background-color: var(--cl-main); clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1400px) { .container__nav > li a::after { width: 0.4375rem; height: 0.6875rem; right: 1rem; } } @media screen and (width <= 1400px) { .container__nav > li a::after { width: 0.5vw; height: 0.7857142857vw; right: 1.1428571429vw; } } @media (any-hover: hover) { .container__nav > li a:hover { color: var(--cl-main); box-shadow: none; } } @media screen and (any-hover: hover) and (width > 1400px) { .container__nav > li a:hover { transform: translateY(0.125rem); } } @media screen and (any-hover: hover) and (width <= 1400px) { .container__nav > li a:hover { transform: translateY(0.1428571429vw); } } .container__sns { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1400px) { .container__sns { gap: 1.75rem; margin-top: 4rem; } } @media screen and (width <= 1400px) { .container__sns { gap: 2vw; margin-top: 4.5714285714vw; } } @media screen and (width > 1400px) { .container__sns li { width: 1.875rem; } } @media screen and (width <= 1400px) { .container__sns li { width: 2.1428571429vw; } } .container__sns li img { width: 100%; height: auto; } .container__logo { margin-inline: auto; } @media screen and (width > 1400px) { .container__logo { width: 16.25rem; margin-bottom: 2.5rem; } } @media screen and (width <= 1400px) { .container__logo { width: 18.5714285714vw; margin-bottom: 2.8571428571vw; } } .container__heading { margin-inline: auto; } @media screen and (width > 1400px) { .container__heading { width: 25.6875rem; margin-bottom: 1.5rem; } } @media screen and (width <= 1400px) { .container__heading { width: 29.3571428571vw; margin-bottom: 1.7142857143vw; } } .container__heading img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .container__cta-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (width > 1400px) { .container__cta-wrapper { gap: 1.1875rem; padding-top: 1.1875rem; } } @media screen and (width <= 1400px) { .container__cta-wrapper { gap: 1.3571428571vw; padding-top: 1.3571428571vw; } } .container__cta-btn { border-radius: 9999px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; background: var(--cl-cta); color: var(--cl-white); font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 1400px) { .container__cta-btn { font-size: 1.125rem; width: 21.75rem; height: 4.5rem; box-shadow: 0 0.3125rem 0 0 #bc3823; } } @media screen and (width <= 1400px) { .container__cta-btn { font-size: 1.2857142857vw; width: 24.8571428571vw; height: 5.1428571429vw; box-shadow: 0 0.3571428571vw 0 0 #bc3823; } } .container__cta-btn::before { content: ""; display: block; position: absolute; background-image: -webkit-image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-image: image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-repeat: no-repeat; background-size: contain; } @media screen and (width > 1400px) { .container__cta-btn::before { bottom: 0.875rem; left: 0.875rem; width: 4.25rem; height: 4.8125rem; } } @media screen and (width <= 1400px) { .container__cta-btn::before { bottom: 1vw; left: 1vw; width: 4.8571428571vw; height: 5.5vw; } } .container__cta-btn::after { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); background-image: url("../img/btn_arrow_white.svg"); background-repeat: no-repeat; background-size: contain; } @media screen and (width > 1400px) { .container__cta-btn::after { right: 1.125rem; width: 1.625rem; height: 1.625rem; } } @media screen and (width <= 1400px) { .container__cta-btn::after { right: 1.2857142857vw; width: 1.8571428571vw; height: 1.8571428571vw; } } @media (any-hover: hover) { .container__cta-btn:hover { color: var(--cl-white); box-shadow: none; } } @media screen and (any-hover: hover) and (width > 1400px) { .container__cta-btn:hover { transform: translateY(0.3125rem); } } @media screen and (any-hover: hover) and (width <= 1400px) { .container__cta-btn:hover { transform: translateY(0.3571428571vw); } } .container__cta-btn-square-wrapper { background-color: var(--cl-white); display: grid; grid-template-columns: repeat(2, 1fr); } @media screen and (width > 1400px) { .container__cta-btn-square-wrapper { gap: 1.25rem; border-radius: 0.5rem; padding: 1.25rem; width: 21.75rem; } } @media screen and (width <= 1400px) { .container__cta-btn-square-wrapper { gap: 1.4285714286vw; border-radius: 0.5714285714vw; padding: 1.4285714286vw; width: 24.8571428571vw; } } .container__cta-btn-square { display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 700; letter-spacing: 0.05em; text-align: center; position: relative; } @media screen and (width > 1400px) { .container__cta-btn-square { gap: 0.4375rem; font-size: 0.875rem; border-radius: 0.5rem; padding: 0.875rem 0.8125rem 1.25rem; } } @media screen and (width <= 1400px) { .container__cta-btn-square { gap: 0.5vw; font-size: 14px; font-size: 1vw; border-radius: 0.5714285714vw; padding: 1vw 0.9285714286vw 1.4285714286vw; } } .container__cta-btn-square::after { content: ""; display: block; background-color: var(--cl-white); clip-path: polygon(100% 100%, 0% 100%, 100% 0%); position: absolute; } @media screen and (width > 1400px) { .container__cta-btn-square::after { width: 0.5rem; height: 0.5rem; bottom: 0.375rem; right: 0.375rem; } } @media screen and (width <= 1400px) { .container__cta-btn-square::after { width: 0.5714285714vw; height: 0.5714285714vw; bottom: 0.4285714286vw; right: 0.4285714286vw; } } .container__cta-btn-square .-icon { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1400px) { .container__cta-btn-square .-icon { width: 2.5rem; height: 2.5rem; } } @media screen and (width <= 1400px) { .container__cta-btn-square .-icon { width: 2.8571428571vw; height: 2.8571428571vw; } } .container__cta-btn-square .-icon img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } @media (any-hover: hover) { .container__cta-btn-square:hover { box-shadow: none; } } @media screen and (any-hover: hover) and (width > 1400px) { .container__cta-btn-square:hover { transform: translateY(0.3125rem); } } @media screen and (any-hover: hover) and (width <= 1400px) { .container__cta-btn-square:hover { transform: translateY(0.3571428571vw); } } .container__cta-btn-square--line { background-color: #4cc764; color: var(--cl-white); } @media screen and (width > 1400px) { .container__cta-btn-square--line { box-shadow: 0 0.3125rem 0 0 #2c794c; } } @media screen and (width <= 1400px) { .container__cta-btn-square--line { box-shadow: 0 0.3571428571vw 0 0 #2c794c; } } @media (any-hover: hover) { .container__cta-btn-square--line:hover { color: var(--cl-white); } } .container__cta-btn-square--online { background-color: #a9d7ff; color: var(--cl-main); } @media screen and (width > 1400px) { .container__cta-btn-square--online { box-shadow: 0 0.3125rem 0 0 #176395; } } @media screen and (width <= 1400px) { .container__cta-btn-square--online { box-shadow: 0 0.3571428571vw 0 0 #176395; } } @media (any-hover: hover) { .container__cta-btn-square--online:hover { color: var(--cl-main); } } @media screen and (width > 1400px) { .container__contact { margin-block: 1.75rem 0.625rem; } } @media screen and (width <= 1400px) { .container__contact { margin-block: 2vw 0.7142857143vw; } } .container__contact-heading { font-weight: 700; text-align: center; } @media screen and (width > 1400px) { .container__contact-heading { font-size: 1rem; } } @media screen and (width <= 1400px) { .container__contact-heading { font-size: 16px; font-size: 1.1428571429vw; } } .container__contact-btn-wrapper { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1400px) { .container__contact-btn-wrapper { margin-top: 0.625rem; } } @media screen and (width <= 1400px) { .container__contact-btn-wrapper { margin-top: 0.7142857143vw; } } .container__contact-btn { display: flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; background-color: var(--cl-white); border: var(--cl-main) 1px solid; line-height: 1.3; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 1400px) { .container__contact-btn { gap: 1rem; font-size: 0.9375rem; box-shadow: 0 0.25rem 0 0 var(--cl-main); width: 18rem; height: 3.875rem; } } @media screen and (width <= 1400px) { .container__contact-btn { gap: 1.1428571429vw; font-size: 15px; font-size: 1.0714285714vw; box-shadow: 0 0.2857142857vw 0 0 var(--cl-main); width: 20.5714285714vw; height: 4.4285714286vw; } } .container__contact-btn::after { content: ""; display: block; width: 0.875rem; height: 0.6875rem; background-image: url("../img/icon_external.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media (any-hover: hover) { .container__contact-btn:hover { box-shadow: none; } } @media screen and (any-hover: hover) and (width > 1400px) { .container__contact-btn:hover { transform: translateY(0.25rem); } } @media screen and (any-hover: hover) and (width <= 1400px) { .container__contact-btn:hover { transform: translateY(0.2857142857vw); } } /* --------------------------------------- Section -----------------------------------------*/ .section-icon__head { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } @container (width < 390px) { .section-icon__head { gap: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .section-icon__head { gap: 4.1025641026vw; } } .section-icon__icon { width: 3.0625rem; height: 3.0625rem; } @container (width < 390px) { .section-icon__icon { width: 12.5641025641vw; height: 12.5641025641vw; } } @container (width > 390px) and (width < 768px) { .section-icon__icon { width: 12.5641025641vw; height: 12.5641025641vw; } } .section-icon__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .section-icon__heading { color: var(--cl-main); font-family: var(--font-mplus); font-size: 1.3125rem; font-weight: 700; letter-spacing: 0.05em; display: flex; justify-content: center; align-items: flex-end; gap: 1.5rem; text-align: center; } @container (width < 390px) { .section-icon__heading { font-size: 5.3846153846vw; gap: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .section-icon__heading { font-size: 5.3846153846vw; gap: 6.1538461538vw; } } .section-icon__heading::before, .section-icon__heading::after { content: ""; display: block; width: 1px; height: 2.125rem; border-left: var(--cl-main) 1px dashed; } @container (width < 390px) { .section-icon__heading::before, .section-icon__heading::after { height: 8.7179487179vw; } } @container (width > 390px) and (width < 768px) { .section-icon__heading::before, .section-icon__heading::after { height: 8.7179487179vw; } } .section-icon__heading::before { transform: rotate(-45deg); } .section-icon__heading::after { transform: rotate(45deg); } .section-icon__heading--white { color: var(--cl-white); } .section-icon__heading--white::before, .section-icon__heading--white::after { border-left: var(--cl-white) 1px dashed; } .section-icon__body { width: 100%; max-width: 24.375rem; margin-inline: auto; } @container (width < 390px) { .section-icon__body { max-width: 100vw; } } @container (width > 390px) and (width < 768px) { .section-icon__body { max-width: 100vw; } } .section-icon__inner { padding-inline: 1.25rem; } .section__head { display: flex; align-items: center; justify-content: center; flex-direction: column; } /* --------------------------------------- Footer -----------------------------------------*/ .footer { background-color: #387ed0; position: relative; } .footer__wrapper { padding: 2.8125rem 1.25rem 3.75rem; } @container (width < 390px) { .footer__wrapper { padding: 11.5384615385vw 5.1282051282vw 15.3846153846vw; } } @container (width > 390px) and (width < 768px) { .footer__wrapper { padding: 11.5384615385vw 5.1282051282vw 15.3846153846vw; } } .footer__copyright { color: var(--cl-white); font-family: var(--font-poppins); font-size: 0.625rem; letter-spacing: 0.05em; } @container (width < 390px) { .footer__copyright { font-size: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .footer__copyright { font-size: 2.5641025641vw; } } .footer__tab { position: fixed; width: 100%; max-width: 23.375rem; margin-inline: auto; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; } @container (width < 390px) { .footer__tab { max-width: 95.8974358974vw; } } @container (width > 390px) and (width < 768px) { .footer__tab { max-width: 95.8974358974vw; } } .footer__tab-list { display: grid; grid-template-columns: 1fr 1fr 10.875rem; gap: 0.25rem; align-items: end; } @container (width < 390px) { .footer__tab-list { grid-template-columns: 1fr 1fr 44.6153846154vw; gap: 1.0256410256vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-list { grid-template-columns: 1fr 1fr 44.6153846154vw; gap: 1.0256410256vw; } } .footer__tab-item { border-radius: 0.5rem 0.5rem 0 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; } @container (width < 390px) { .footer__tab-item { font-size: 11px; font-size: 2.8205128205vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-item { font-size: 11px; font-size: 2.8205128205vw; } } .footer__tab-item a { display: flex; align-items: center; justify-content: center; text-align: center; height: 2.5rem; } @container (width < 390px) { .footer__tab-item a { height: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-item a { height: 10.2564102564vw; } } .footer__tab-item--line { background-color: var(--cl-line); } .footer__tab-item--line a { color: var(--cl-white); } @media (any-hover: hover) { .footer__tab-item--line a:hover { color: var(--cl-white); } } .footer__tab-item--online { background-color: var(--cl-online); } .footer__tab-item--online a { color: var(--cl-main); } @media (any-hover: hover) { .footer__tab-item--online a:hover { color: var(--cl-main); } } .footer__tab-item--cta { background: var(--cl-cta); font-size: 0.75rem; } @container (width < 390px) { .footer__tab-item--cta { font-size: 12px; font-size: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-item--cta { font-size: 12px; font-size: 3.0769230769vw; } } .footer__tab-item--cta a { color: var(--cl-white); height: 3.125rem; text-align: left; gap: 0.5rem; } @container (width < 390px) { .footer__tab-item--cta a { height: 12.8205128205vw; gap: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-item--cta a { height: 12.8205128205vw; gap: 2.0512820513vw; } } @media (any-hover: hover) { .footer__tab-item--cta a:hover { color: var(--cl-white); } } .footer__tab-item--cta a::before { content: ""; display: inline-block; width: 2.5625rem; height: 2.5rem; background-image: -webkit-image-set(url("../img/cta_tab_img.webp") type("image/webp"), url("../img/cta_tab_img.png") type("image/png")); background-image: image-set(url("../img/cta_tab_img.webp") type("image/webp"), url("../img/cta_tab_img.png") type("image/png")); background-repeat: no-repeat; background-size: contain; margin-top: auto; } @container (width < 390px) { .footer__tab-item--cta a::before { width: 10.5128205128vw; height: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .footer__tab-item--cta a::before { width: 10.5128205128vw; height: 10.2564102564vw; } } /* --------------------------------------- Button -----------------------------------------*/ .btn { display: block; border-radius: 9999px; cursor: pointer; position: relative; } .btn--cta { display: flex; align-items: center; justify-content: center; background: var(--cl-cta); color: var(--cl-white); font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; width: 21.875rem; height: 4.5rem; box-shadow: 0 0.5rem 0 0 #bc3823; } @container (width < 390px) { .btn--cta { font-size: 4.1025641026vw; width: 89.7435897436vw; height: 18.4615384615vw; } } @container (width > 390px) and (width < 768px) { .btn--cta { font-size: 4.1025641026vw; width: 89.7435897436vw; height: 18.4615384615vw; } } .btn--cta::before { content: ""; display: block; position: absolute; bottom: 0.5rem; left: 0.625rem; width: 4.5rem; height: 4.5rem; background-image: -webkit-image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-image: image-set(url("../img/btn_cta_img.webp") type("image/webp"), url("../img/btn_cta_img.png") type("image/png")); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .btn--cta::before { bottom: 2.0512820513vw; left: 2.5641025641vw; width: 18.4615384615vw; height: 18.4615384615vw; } } @container (width > 390px) and (width < 768px) { .btn--cta::before { bottom: 2.0512820513vw; left: 2.5641025641vw; width: 18.4615384615vw; height: 18.4615384615vw; } } .btn--cta::after { content: ""; display: block; position: absolute; top: 50%; right: 1.125rem; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; background-image: url("../img/btn_arrow_white.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .btn--cta::after { right: 4.6153846154vw; width: 7.1794871795vw; height: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .btn--cta::after { right: 4.6153846154vw; width: 7.1794871795vw; height: 7.1794871795vw; } } @media (any-hover: hover) { .btn--cta:hover { color: var(--cl-white); box-shadow: none; transform: translateY(0.5rem); } @container (width < 390px) { .btn--cta:hover { transform: translateY(2.0512820513vw); } } @container (width > 390px) and (width < 768px) { .btn--cta:hover { transform: translateY(2.0512820513vw); } } } .btn--open, .btn--close { display: block; font-size: 0.75rem; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; width: 100%; height: 2.25rem; position: relative; } @container (width < 390px) { .btn--open, .btn--close { font-size: 12px; font-size: 3.0769230769vw; height: 9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .btn--open, .btn--close { font-size: 12px; font-size: 3.0769230769vw; height: 9.2307692308vw; } } .btn--open::after, .btn--close::after { content: ""; background-repeat: no-repeat; background-size: contain; display: block; width: 1.25rem; height: 1.25rem; position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); } @container (width < 390px) { .btn--open::after, .btn--close::after { width: 5.1282051282vw; height: 5.1282051282vw; right: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .btn--open::after, .btn--close::after { width: 5.1282051282vw; height: 5.1282051282vw; right: 2.0512820513vw; } } .btn--open-white { background-color: var(--cl-white); } .btn--open-white::after { background-image: url("../img/btn_plus_gray.svg"); } .btn--close-white { background-color: var(--cl-white); } .btn--close-white::after { background-image: url("../img/btn_minus_gray.svg"); } .btn--open-gray { background-color: var(--cl-bg); } .btn--open-gray::after { background-image: url("../img/btn_plus_white.svg"); } .btn--close-gray { background-color: var(--cl-bg); } .btn--close-gray::after { background-image: url("../img/btn_minus_white.svg"); } .btn--white { background-color: var(--cl-white); } .btn--gray { background-color: var(--cl-bg); } .btn--border { border: 1px solid var(--cl-main); background-color: var(--cl-white); height: 3.5rem; font-size: 0.9375rem; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; } @container (width < 390px) { .btn--border { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .btn--border { height: 14.358974359vw; font-size: 15px; font-size: 3.8461538462vw; } } .btn--border:after { content: ""; background-image: url("../img/btn_arrow_main.svg"); background-repeat: no-repeat; background-size: contain; display: block; width: 1.375rem; height: 1.375rem; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); } @container (width < 390px) { .btn--border:after { width: 5.641025641vw; height: 5.641025641vw; right: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .btn--border:after { width: 5.641025641vw; height: 5.641025641vw; right: 6.1538461538vw; } } .btn--arrow-main::after { content: ""; background-image: url("../img/point_btn_arrow_main.svg"); background-repeat: no-repeat; background-size: contain; display: block; width: 1.375rem; height: 1.375rem; position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); } @container (width < 390px) { .btn--arrow-main::after { width: 5.641025641vw; height: 5.641025641vw; right: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .btn--arrow-main::after { width: 5.641025641vw; height: 5.641025641vw; right: 3.0769230769vw; } } .cta-btn-wrapper { display: flex; align-items: center; justify-content: center; padding-block: 1rem 0.5rem; } @container (width < 390px) { .cta-btn-wrapper { padding-block: 4.1025641026vw 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .cta-btn-wrapper { padding-block: 4.1025641026vw 2.0512820513vw; } } .btn-wrapper { display: flex; align-items: center; justify-content: center; margin-block: 1.1875rem 0; } @container (width < 390px) { .btn-wrapper { margin-block: 4.8717948718vw 0; } } @container (width > 390px) and (width < 768px) { .btn-wrapper { margin-block: 4.8717948718vw 0; } } /* --------------------------------------- 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 < 390px) { .course-card { border_radius: 4.1025641026vw; min-height: 41.0256410256vw; } } @container (width > 390px) and (width < 768px) { .course-card { border_radius: 4.1025641026vw; min-height: 41.0256410256vw; } } .course-card.-dept01 { background-image: url("../img/course_dept01_bg.png"); } .course-card.-dept01 .course-card__icon:after { background-image: url("../img/icon_dept01.svg"); } .course-card.-dept02 { background-size: 110% auto; background-image: url("../img/course_dept02_bg.png"); } .course-card.-dept02 .course-card__icon:after { background-image: url("../img/icon_dept02.svg"); } .course-card.-dept02 .course-card__icon.-active::after { background-image: url("../img/icon_dept02_active.svg"); } .course-card.-dept03 { background-image: url("../img/course_dept03_bg.png"); } .course-card.-dept03 .course-card__icon:after { background-image: url("../img/icon_dept03.svg"); } .course-card.-dept03 .course-card__icon.-active::after { background-image: url("../img/icon_dept03_active.svg"); } .course-card.-dept04 { background-image: url("../img/course_dept04_bg.png"); } .course-card.-dept04 .course-card__icon:after { background-image: url("../img/icon_dept04.svg"); } .course-card.-dept04 .course-card__icon.-active::after { background-image: url("../img/icon_dept04_active.svg"); } .course-card.-dept05 { background-size: 114% auto; background-image: url("../img/course_dept05_bg.png"); } .course-card.-dept05 .course-card__icon:after { background-image: url("../img/icon_dept05.svg"); } .course-card.-dept05 .course-card__icon.-active::after { background-image: url("../img/icon_dept05_active.svg"); } .course-card__head { cursor: pointer; padding: 2.25rem 2rem 0; } @container (width < 390px) { .course-card__head { padding: 9.2307692308vw 8.2051282051vw 0; } } @container (width > 390px) and (width < 768px) { .course-card__head { padding: 9.2307692308vw 8.2051282051vw 0; } } .course-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05em; color: var(--cl-white); } @container (width < 390px) { .course-card__title { font-size: 18px; font-size: 4.6153846154vw; } } @container (width > 390px) and (width < 768px) { .course-card__title { font-size: 18px; font-size: 4.6153846154vw; } } .course-card__text { font-size: 0.8125rem; font-feature-settings: "palt"; font-weight: 400; letter-spacing: 0.05em; color: var(--cl-white); margin-top: 0.75rem; } @container (width < 390px) { .course-card__text { font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1666666667vw; margin-top: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .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 < 390px) { .course-card__icon { top: 14.358974359vw; right: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .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 < 390px) { .course-card__icon::after { width: 10.7692307692vw; height: 10.7692307692vw; } } @container (width > 390px) and (width < 768px) { .course-card__icon::after { width: 10.7692307692vw; height: 10.7692307692vw; } } .course-card__body { padding: 1.5rem 2rem 2.25rem; display: none; } @container (width < 390px) { .course-card__body { padding: 6.1538461538vw 8.2051282051vw 9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .course-card__body { padding: 6.1538461538vw 8.2051282051vw 9.2307692308vw; } } .course-card__list { display: flex; flex-direction: column; gap: 0.5rem; } @container (width < 390px) { .course-card__list { gap: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .course-card__list { gap: 2.0512820513vw; } } .course-card__list:not(:last-of-type) { margin-bottom: 0.5rem; } @container (width < 390px) { .course-card__list:not(:last-of-type) { margin-bottom: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .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.05em; font-weight: 700; font-feature-settings: "palt"; color: var(--cl-white); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: relative; } @container (width < 390px) { .course-card__btn { height: 10.7692307692vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; letter-spacing: 0.1538461538vw; } } @container (width > 390px) and (width < 768px) { .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/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 < 390px) { .course-card__btn::after { width: 1.2820512821vw; height: 2.8205128205vw; right: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .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 < 390px) { .course-card__btn.-sm { width: 35.8974358974vw; } } @container (width > 390px) and (width < 768px) { .course-card__btn.-sm { width: 35.8974358974vw; } } .course-card__btn.-sm-l { width: 9.375rem; margin-left: auto; } @container (width < 390px) { .course-card__btn.-sm-l { width: 38.4615384615vw; } } @container (width > 390px) and (width < 768px) { .course-card__btn.-sm-l { width: 38.4615384615vw; } } .js-course-accordion { transition: all 0.3s; } .js-course-accordion:hover { opacity: var(--opacity); } /* --------------------------------------- Keyword Card -----------------------------------------*/ .keyword-card { width: 100%; max-width: 20.625rem; background-color: var(--cl-white); border-radius: 1rem; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.16); position: relative; overflow: hidden; } @container (width < 390px) { .keyword-card { max-width: 84.6153846154vw; } } @container (width > 390px) and (width < 768px) { .keyword-card { max-width: 84.6153846154vw; } } .keyword-card__num span { color: var(--cl-main); font-family: var(--font-quicksand); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; position: absolute; top: 0.5rem; left: 1rem; z-index: 1; } @container (width < 390px) { .keyword-card__num span { font-size: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__num span { font-size: 6.1538461538vw; } } .keyword-card__num::before { content: ""; width: 6.25rem; height: 6.25rem; background-color: var(--cl-online); border-radius: 50%; position: absolute; top: -2.5rem; left: -2.5rem; } @container (width < 390px) { .keyword-card__num::before { width: 25.641025641vw; height: 25.641025641vw; top: -10.2564102564vw; left: -10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__num::before { width: 25.641025641vw; height: 25.641025641vw; top: -10.2564102564vw; left: -10.2564102564vw; } } .keyword-card__inner { display: flex; justify-content: center; flex-direction: column; padding: 1rem 1.5rem; min-height: 20.875rem; } @container (width < 390px) { .keyword-card__inner { padding: 4.1025641026vw 6.1538461538vw; min-height: 85.641025641vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__inner { padding: 4.1025641026vw 6.1538461538vw; min-height: 85.641025641vw; } } .keyword-card__img { margin-inline: auto; } .keyword-card__img.-img01 { width: 6.9375rem; height: 8.5625rem; } @container (width < 390px) { .keyword-card__img.-img01 { width: 28.4615384615vw; height: 35.1282051282vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img01 { width: 28.4615384615vw; height: 35.1282051282vw; } } .keyword-card__img.-img02 { width: 7.25rem; height: 7.25rem; } @container (width < 390px) { .keyword-card__img.-img02 { width: 29.7435897436vw; height: 29.7435897436vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img02 { width: 29.7435897436vw; height: 29.7435897436vw; } } .keyword-card__img.-img03 { width: 13.625rem; height: 8.25rem; } @container (width < 390px) { .keyword-card__img.-img03 { width: 55.8974358974vw; height: 33.8461538462vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img03 { width: 55.8974358974vw; height: 33.8461538462vw; } } .keyword-card__img.-img04 { width: 15.75rem; height: 5.6875rem; } @container (width < 390px) { .keyword-card__img.-img04 { width: 64.6153846154vw; height: 23.3333333333vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img04 { width: 64.6153846154vw; height: 23.3333333333vw; } } .keyword-card__img.-img05 { width: 13.5625rem; height: 8.25rem; } @container (width < 390px) { .keyword-card__img.-img05 { width: 55.641025641vw; height: 33.8461538462vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img05 { width: 55.641025641vw; height: 33.8461538462vw; } } .keyword-card__img.-img06 { width: 13.625rem; height: 8.25rem; } @container (width < 390px) { .keyword-card__img.-img06 { width: 55.8974358974vw; height: 33.8461538462vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img06 { width: 55.8974358974vw; height: 33.8461538462vw; } } .keyword-card__img.-img07 { width: 13.625rem; height: 8.25rem; } @container (width < 390px) { .keyword-card__img.-img07 { width: 55.8974358974vw; height: 33.8461538462vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__img.-img07 { width: 55.8974358974vw; height: 33.8461538462vw; } } .keyword-card__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .keyword-card__title { color: var(--cl-main); font-family: var(--font-mplus); font-size: 1.5625rem; font-weight: 700; letter-spacing: 0.05em; margin-top: 0.5rem; text-align: center; } @container (width < 390px) { .keyword-card__title { font-size: 6.4102564103vw; margin-top: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__title { font-size: 6.4102564103vw; margin-top: 2.0512820513vw; } } .keyword-card__title .-marker { background: linear-gradient(transparent 70%, #fff363 30%); } .keyword-card__desc { font-size: 0.8125rem; letter-spacing: 0.05em; margin-top: 1rem; } @container (width < 390px) { .keyword-card__desc { font-size: 3.3333333333vw; margin-top: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__desc { font-size: 3.3333333333vw; margin-top: 4.1025641026vw; } } .keyword-card__note { cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; font-size: 0.75rem; letter-spacing: 0.05em; margin-top: 0.625rem; text-decoration: underline; } @container (width < 390px) { .keyword-card__note { gap: 1.0256410256vw; font-size: 12px; font-size: 3.0769230769vw; margin-top: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__note { gap: 1.0256410256vw; font-size: 12px; font-size: 3.0769230769vw; margin-top: 2.5641025641vw; } } .keyword-card__note::after { content: "+"; color: var(--cl-white); font-family: var(--font-awesome); font-weight: 900; display: grid; place-content: center; width: 0.9375rem; height: 0.9375rem; background-color: var(--cl-main); border-radius: 50%; } @container (width < 390px) { .keyword-card__note::after { width: 3.8461538462vw; height: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .keyword-card__note::after { width: 3.8461538462vw; height: 3.8461538462vw; } } /* --------------------------------------- Modal -----------------------------------------*/ .modal { visibility: hidden; opacity: 0; position: relative; z-index: -1; transition: var(--transition); } .modal__overlay { width: 24.375rem; height: 100dvh; position: fixed; top: 0; left: 50%; right: 0; bottom: 0; transform: translateX(-50%); background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 50; } @container (width < 390px) { .modal__overlay { width: 100%; } } @container (width > 390px) and (width < 768px) { .modal__overlay { width: 100%; } } .modal__close { cursor: pointer; color: var(--cl-white); font-size: 1rem; display: grid; place-content: center; position: absolute; top: -1.5rem; right: 0; } @container (width < 390px) { .modal__close { font-size: 4.1025641026vw; top: -6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .modal__close { font-size: 4.1025641026vw; top: -6.1538461538vw; } } .modal__content { width: 100%; max-width: 21.875rem; background-color: var(--cl-white); border-radius: 0.5rem; position: relative; padding: 2rem 1rem; } @container (width < 390px) { .modal__content { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 8.2051282051vw 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .modal__content { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 8.2051282051vw 4.1025641026vw; } } .modal__inner { width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; } .modal__inner::-webkit-scrollbar { display: none; } .modal--keyword .modal__title { color: var(--cl-main); font-size: 1.125rem; font-family: var(--font-mplus); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.625rem; } @container (width < 390px) { .modal--keyword .modal__title { font-size: 18px; font-size: 4.6153846154vw; margin-bottom: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .modal--keyword .modal__title { font-size: 18px; font-size: 4.6153846154vw; margin-bottom: 2.5641025641vw; } } .modal--keyword .modal__title .-marker { background: linear-gradient(transparent 70%, #fff363 30%); } .modal--keyword .modal__text { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05em; } @container (width < 390px) { .modal--keyword .modal__text { font-size: 18px; font-size: 4.6153846154vw; } } @container (width > 390px) and (width < 768px) { .modal--keyword .modal__text { font-size: 18px; font-size: 4.6153846154vw; } } .modal--keyword .modal__list { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.3125rem; } @container (width < 390px) { .modal--keyword .modal__list { gap: 3.5897435897vw; margin-top: 5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .modal--keyword .modal__list { gap: 3.5897435897vw; margin-top: 5.3846153846vw; } } .modal--keyword .modal__list li { font-size: 0.8125rem; letter-spacing: 0.05em; } @container (width < 390px) { .modal--keyword .modal__list li { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .modal--keyword .modal__list li { font-size: 13px; font-size: 3.3333333333vw; } } .modal--keyword .modal__list li::before { content: "・"; } .modal--keyword .modal__list li a { color: var(--cl-main); text-decoration: underline; } .modal--result .modal__close { cursor: pointer; width: 1.75rem; height: 1.75rem; background-color: #e6d348; border-radius: 50%; color: var(--cl-white); font-size: 0.8125rem; display: grid; place-content: center; position: absolute; top: -0.625rem; right: -0.625rem; } @container (width < 390px) { .modal--result .modal__close { width: 7.1794871795vw; height: 7.1794871795vw; font-size: 3.3333333333vw; top: -2.5641025641vw; right: -2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .modal--result .modal__close { width: 7.1794871795vw; height: 7.1794871795vw; font-size: 3.3333333333vw; top: -2.5641025641vw; right: -2.5641025641vw; } } .modal--result .modal__content { background-color: #fefbe6; height: calc(100dvh - 7.5rem); padding: 2.75rem 1rem; position: relative; } @container (width < 390px) { .modal--result .modal__content { height: calc(100vh - 30.7692307692vw); padding: 11.2820512821vw 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .modal--result .modal__content { height: calc(100vh - 30.7692307692vw); padding: 11.2820512821vw 4.1025641026vw; } } .modal.is-open { visibility: visible; opacity: 1; z-index: 100; } /* --------------------------------------- PageTop -----------------------------------------*/ .pageTop { position: fixed; width: 21.875rem; margin-inline: auto; bottom: 3.75rem; left: 50%; transform: translateX(-50%); z-index: 1; } @container (width < 390px) { .pageTop { width: 89.7435897436vw; bottom: 3.75rem; } } @container (width > 390px) and (width < 768px) { .pageTop { width: 89.7435897436vw; bottom: 3.75rem; } } .pageTop__link { background-color: rgba(25, 25, 25, 0.5); border-radius: 50%; color: var(--cl-white); font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 3.125rem; height: 3.125rem; margin-left: auto; } @container (width < 390px) { .pageTop__link { font-size: 2.8205128205vw; width: 12.8205128205vw; height: 12.8205128205vw; } } @container (width > 390px) and (width < 768px) { .pageTop__link { font-size: 2.8205128205vw; width: 12.8205128205vw; height: 12.8205128205vw; } } .pageTop__link::before { content: ""; display: block; background-color: var(--cl-white); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 0.5625rem; height: 0.375rem; } @container (width < 390px) { .pageTop__link::before { width: 2.3076923077vw; height: 1.5384615385vw; } } @container (width > 390px) and (width < 768px) { .pageTop__link::before { width: 2.3076923077vw; height: 1.5384615385vw; } } /* --------------------------------------- Pickup Card -----------------------------------------*/ .pickup-card { width: 100%; max-width: 20.625rem; margin: 0 auto; background-color: var(--cl-white); border-radius: 1rem; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.16); position: relative; overflow: hidden; } @container (width < 390px) { .pickup-card { max-width: 84.6153846154vw; } } @container (width > 390px) and (width < 768px) { .pickup-card { max-width: 84.6153846154vw; } } .pickup-card__inner { display: flex; align-items: center; flex-direction: column; padding: 1rem 0.5rem; min-height: 20.875rem; } @container (width < 390px) { .pickup-card__inner { padding: 4.1025641026vw 1.0256410256vw; min-height: 85.641025641vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__inner { padding: 4.1025641026vw 1.0256410256vw; min-height: 85.641025641vw; } } .pickup-card__head { color: var(--cl-main); font-family: var(--font-zenmaru); font-feature-settings: "palt"; letter-spacing: 0.05em; text-align: center; margin-bottom: 1rem; } @container (width < 390px) { .pickup-card__head { margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__head { margin-bottom: 4.1025641026vw; } } .pickup-card__type { font-size: 0.75rem; } @container (width < 390px) { .pickup-card__type { font-size: 12px; font-size: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__type { font-size: 12px; font-size: 3.0769230769vw; } } .pickup-card__title { font-size: 1.25rem; font-weight: 700; } @container (width < 390px) { .pickup-card__title { font-size: 20px; font-size: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__title { font-size: 20px; font-size: 5.1282051282vw; } } .pickup-card__heading { color: var(--cl-text); font-size: 0.625rem; } @container (width < 390px) { .pickup-card__heading { font-size: 10px; font-size: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__heading { font-size: 10px; font-size: 2.5641025641vw; } } .pickup-card__img { width: 17.625rem; height: 8.25rem; margin-bottom: 0.6875rem; } @container (width < 390px) { .pickup-card__img { width: 72.3076923077vw; height: 33.8461538462vw; margin-bottom: 2.8205128205vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__img { width: 72.3076923077vw; height: 33.8461538462vw; margin-bottom: 2.8205128205vw; } } .pickup-card__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .pickup-card__desc { font-size: 0.8125rem; letter-spacing: 0.05em; margin-inline: 1rem; } @container (width < 390px) { .pickup-card__desc { font-size: 13px; font-size: 3.3333333333vw; margin-inline: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .pickup-card__desc { font-size: 13px; font-size: 3.3333333333vw; margin-inline: 4.1025641026vw; } } .pickup__indicator { position: relative; width: 20.625rem; height: 2px; background: #dedede; margin-top: 1rem; overflow: visible; max-width: 21.625rem; } @container (width < 390px) { .pickup__indicator { width: 84.6153846154vw; margin-top: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .pickup__indicator { width: 84.6153846154vw; margin-top: 4.1025641026vw; } } .pickup__indicator-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0; border-radius: 9999px; background: var(--cl-text); transition: width 0.3s ease; } /* --------------------------------------- Point List Card -----------------------------------------*/ .point-card { padding-bottom: 2.5rem; } @container (width < 390px) { .point-card { padding-bottom: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .point-card { padding-bottom: 10.2564102564vw; } } .point-card__inner { width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width < 390px) { .point-card__inner { max-width: 89.7435897436vw; } } @container (width > 390px) and (width < 768px) { .point-card__inner { max-width: 89.7435897436vw; } } .point-card__img { width: 21.875rem; height: 12.0625rem; margin-bottom: 1rem; } @container (width < 390px) { .point-card__img { width: 89.7435897436vw; height: 49.4871794872vw; margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__img { width: 89.7435897436vw; height: 49.4871794872vw; margin-bottom: 4.1025641026vw; } } .point-card__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .point-card__head { margin-bottom: 1.25rem; } @container (width < 390px) { .point-card__head { margin-bottom: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .point-card__head { margin-bottom: 5.1282051282vw; } } .point-card__heading { color: var(--cl-main); font-size: 1.25rem; font-family: var(--font-zenmaru); font-feature-settings: "palt"; font-weight: 700; letter-spacing: 0.05em; text-align: center; margin-bottom: 0.5rem; } @container (width < 390px) { .point-card__heading { font-size: 20px; font-size: 5.1282051282vw; margin-bottom: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .point-card__heading { font-size: 20px; font-size: 5.1282051282vw; margin-bottom: 2.0512820513vw; } } .point-card__desc { font-size: 0.8125rem; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .point-card__desc { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .point-card__desc { font-size: 13px; font-size: 3.3333333333vw; } } .point-card__body { display: none; } .point-card__section:not(:last-of-type) { margin-bottom: 1.875rem; } @container (width < 390px) { .point-card__section:not(:last-of-type) { margin-bottom: 7.6923076923vw; } } @container (width > 390px) and (width < 768px) { .point-card__section:not(:last-of-type) { margin-bottom: 7.6923076923vw; } } .point-card__section-title { color: var(--cl-main); font-size: 1.25rem; font-family: var(--font-zenmaru); font-weight: 900; letter-spacing: 0.05em; margin-bottom: 0.75rem; } @container (width < 390px) { .point-card__section-title { font-size: 20px; font-size: 5.1282051282vw; margin-bottom: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-title { font-size: 20px; font-size: 5.1282051282vw; margin-bottom: 3.0769230769vw; } } .point-card__section-title--center { text-align: center; } .point-card__section-text { font-size: 0.8125rem; letter-spacing: 0.05em; } @container (width < 390px) { .point-card__section-text { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-text { font-size: 13px; font-size: 3.3333333333vw; } } .point-card__section-course-wrapper { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; } @container (width < 390px) { .point-card__section-course-wrapper { gap: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-wrapper { gap: 4.1025641026vw; } } .point-card__section-course { background-color: var(--cl-white); border: var(--cl-main) 1px solid; padding: 0.625rem 1.25rem; } @container (width < 390px) { .point-card__section-course { padding: 2.5641025641vw 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course { padding: 2.5641025641vw 5.1282051282vw; } } .point-card__section-course-plus { width: 0.875rem; height: 0.9375rem; margin-inline: auto; } @container (width < 390px) { .point-card__section-course-plus { width: 3.5897435897vw; height: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-plus { width: 3.5897435897vw; height: 3.8461538462vw; } } .point-card__section-course-plus img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; vertical-align: top; } .point-card__section-course-title { font-size: 0.9375rem; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .point-card__section-course-title { font-size: 15px; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-title { font-size: 15px; font-size: 3.8461538462vw; } } .point-card__section-course-title .-sm { font-size: 0.8125rem; } @container (width < 390px) { .point-card__section-course-title .-sm { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-title .-sm { font-size: 13px; font-size: 3.3333333333vw; } } .point-card__section-course-list { display: flex; flex-direction: column; gap: 0.5rem; margin-block: 0.625rem 0.375rem; } @container (width < 390px) { .point-card__section-course-list { gap: 2.0512820513vw; margin-block: 2.5641025641vw 1.5384615385vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-list { gap: 2.0512820513vw; margin-block: 2.5641025641vw 1.5384615385vw; } } .point-card__section-course-list > li { background-color: var(--cl-main); color: var(--cl-white); padding: 0.375rem 1rem; } @container (width < 390px) { .point-card__section-course-list > li { padding: 1.5384615385vw 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-list > li { padding: 1.5384615385vw 4.1025641026vw; } } .point-card__section-course-list > li dl { display: flex; align-items: center; flex-direction: column; } .point-card__section-course-list > li dl dt { font-size: 0.9375rem; letter-spacing: 0.05em; } @container (width < 390px) { .point-card__section-course-list > li dl dt { font-size: 15px; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-list > li dl dt { font-size: 15px; font-size: 3.8461538462vw; } } .point-card__section-course-list > li dl dd { font-size: 0.8125rem; letter-spacing: 0.05em; } @container (width < 390px) { .point-card__section-course-list > li dl dd { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-course-list > li dl dd { font-size: 13px; font-size: 3.3333333333vw; } } .point-card__section-imgs { display: flex; flex-direction: column; gap: 1rem; margin-block: 1.25rem 2.25rem; } @container (width < 390px) { .point-card__section-imgs { gap: 4.1025641026vw; margin-block: 5.1282051282vw 9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-imgs { gap: 4.1025641026vw; margin-block: 5.1282051282vw 9.2307692308vw; } } .point-card__section-movie { display: flex; flex-direction: column; gap: 1rem; } @container (width < 390px) { .point-card__section-movie { gap: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-movie { gap: 4.1025641026vw; } } .point-card__section-catch { display: flex; justify-content: center; align-items: baseline; gap: 0.75rem; font-size: 0.9375rem; font-family: var(--font-mplus); font-weight: 700; letter-spacing: 0.05em; color: var(--cl-main); } @container (width < 390px) { .point-card__section-catch { gap: 3.0769230769vw; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-catch { gap: 3.0769230769vw; font-size: 3.8461538462vw; } } .point-card__section-catch::before, .point-card__section-catch::after { content: ""; display: block; width: 1px; height: 1rem; border-left: var(--cl-main) 1px dashed; } @container (width < 390px) { .point-card__section-catch::before, .point-card__section-catch::after { height: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-catch::before, .point-card__section-catch::after { height: 4.1025641026vw; } } .point-card__section-catch::before { transform: rotate(-30deg); } .point-card__section-catch::after { transform: rotate(30deg); } .point-card__section-slider .slick-list { overflow: visible !important; } .point-card__section-btn-wrapper { margin-top: 1.875rem; } .point-card__section-btn-catch { color: var(--cl-main); display: flex; justify-content: center; align-items: flex-end; gap: 0.5rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.5rem; } @container (width < 390px) { .point-card__section-btn-catch { gap: 2.0512820513vw; font-size: 4.1025641026vw; margin-bottom: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-btn-catch { gap: 2.0512820513vw; font-size: 4.1025641026vw; margin-bottom: 2.0512820513vw; } } .point-card__section-btn-catch::before, .point-card__section-btn-catch::after { content: ""; display: block; width: 1px; height: 1rem; border-left: var(--cl-text) 1px dashed; } @container (width < 390px) { .point-card__section-btn-catch::before, .point-card__section-btn-catch::after { height: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-btn-catch::before, .point-card__section-btn-catch::after { height: 4.1025641026vw; } } .point-card__section-btn-catch::before { transform: rotate(-45deg); } .point-card__section-btn-catch::after { transform: rotate(45deg); } .point-card__section-btn { background-color: var(--cl-main); color: var(--cl-white); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em; width: 20rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; margin-inline: auto; } @container (width < 390px) { .point-card__section-btn { font-size: 15px; font-size: 3.8461538462vw; width: 82.0512820513vw; height: 14.358974359vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-btn { font-size: 15px; font-size: 3.8461538462vw; width: 82.0512820513vw; height: 14.358974359vw; } } .point-card__section-btn::after { content: ""; display: block; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 1.625rem; height: 1.625rem; background-image: url("../img/btn_arrow_white02.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .point-card__section-btn::after { right: 4.1025641026vw; width: 6.6666666667vw; height: 6.6666666667vw; } } @container (width > 390px) and (width < 768px) { .point-card__section-btn::after { right: 4.1025641026vw; width: 6.6666666667vw; height: 6.6666666667vw; } } @media (any-hover: hover) { .point-card__section-btn:hover { color: var(--cl-white); } } .point-card__btn-wrapper { display: flex; justify-content: center; margin-top: 1.5rem; } @container (width < 390px) { .point-card__btn-wrapper { margin-top: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .point-card__btn-wrapper { margin-top: 6.1538461538vw; } } .point-card__btn-wrapper .btn--open { width: 10.0625rem; } @container (width < 390px) { .point-card__btn-wrapper .btn--open { width: 41.2820512821vw; } } @container (width > 390px) and (width < 768px) { .point-card__btn-wrapper .btn--open { width: 41.2820512821vw; } } .point-card__btn-wrapper .btn--close { width: 7.125rem; } @container (width < 390px) { .point-card__btn-wrapper .btn--close { width: 29.2307692308vw; } } @container (width > 390px) and (width < 768px) { .point-card__btn-wrapper .btn--close { width: 29.2307692308vw; } } .point-card__correction-slider { position: relative; margin-block: 1.25rem 1.625rem; } @container (width < 390px) { .point-card__correction-slider { margin-block: 5.1282051282vw 6.6666666667vw; } } @container (width > 390px) and (width < 768px) { .point-card__correction-slider { margin-block: 5.1282051282vw 6.6666666667vw; } } .point-card__correction-slider .prev-arrow, .point-card__correction-slider .next-arrow { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .point-card__correction-slider .prev-arrow:before, .point-card__correction-slider .next-arrow:before { content: ""; display: block; border-radius: 50%; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16); width: 2.625rem; height: 2.625rem; background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .point-card__correction-slider .prev-arrow:before, .point-card__correction-slider .next-arrow:before { width: 10.7692307692vw; height: 10.7692307692vw; } } @container (width > 390px) and (width < 768px) { .point-card__correction-slider .prev-arrow:before, .point-card__correction-slider .next-arrow:before { width: 10.7692307692vw; height: 10.7692307692vw; } } .point-card__correction-slider .prev-arrow { left: -1.3125rem; } @container (width < 390px) { .point-card__correction-slider .prev-arrow { left: -5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .point-card__correction-slider .prev-arrow { left: -5.3846153846vw; } } .point-card__correction-slider .prev-arrow:before { background-image: url("../img/slide_arrow_prev.svg"); } .point-card__correction-slider .next-arrow { right: -1.3125rem; } @container (width < 390px) { .point-card__correction-slider .next-arrow { right: -5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .point-card__correction-slider .next-arrow { right: -5.3846153846vw; } } .point-card__correction-slider .next-arrow:before { background-image: url("../img/slide_arrow_next.svg"); } /* --------------------------------------- Result Card -----------------------------------------*/ .result-card { width: 100%; max-width: 21.875rem; margin-inline: auto; } @container (width < 390px) { .result-card { max-width: 89.7435897436vw; } } @container (width > 390px) and (width < 768px) { .result-card { max-width: 89.7435897436vw; } } .result-card:has(.btn) { padding-bottom: 2.5rem; } @container (width < 390px) { .result-card:has(.btn) { padding-bottom: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .result-card:has(.btn) { padding-bottom: 10.2564102564vw; } } .result-card:not(:last-of-type) { border-bottom: #000 1px dashed; margin-bottom: 2.5rem; } @container (width < 390px) { .result-card:not(:last-of-type) { margin-bottom: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .result-card:not(:last-of-type) { margin-bottom: 10.2564102564vw; } } .result-card__slider { width: 100%; max-width: 15rem; margin-inline: auto; margin-bottom: 0.5rem !important; } @container (width < 390px) { .result-card__slider { max-width: 61.5384615385vw; margin-bottom: 2.0512820513vw !important; } } @container (width > 390px) and (width < 768px) { .result-card__slider { max-width: 61.5384615385vw; margin-bottom: 2.0512820513vw !important; } } .result-card__slider .dots-wrap { display: flex; flex-direction: column; gap: 0.75rem; position: absolute; top: 50%; right: -2.25rem; transform: translateY(-50%); } @container (width < 390px) { .result-card__slider .dots-wrap { gap: 3.0769230769vw; right: -9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .result-card__slider .dots-wrap { gap: 3.0769230769vw; right: -9.2307692308vw; } } .result-card__slider .dots-wrap li { width: 0.5rem; height: 0.5rem; background: var(--cl-white); border: var(--cl-text) 1px solid; border-radius: 50%; cursor: pointer; } @container (width < 390px) { .result-card__slider .dots-wrap li { width: 2.0512820513vw; height: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .result-card__slider .dots-wrap li { width: 2.0512820513vw; height: 2.0512820513vw; } } .result-card__slider .dots-wrap li:hover, .result-card__slider .dots-wrap li.slick-active { background-color: var(--cl-text); } .result-card__slider .dots-wrap li button { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; padding: 0; border: none; background-color: transparent; } .result-card__title { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .result-card__title { font-size: 15px; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .result-card__title { font-size: 15px; font-size: 3.8461538462vw; } } .result-card__sub-title { font-size: 0.6875rem; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .result-card__sub-title { font-size: 11px; font-size: 2.8205128205vw; } } @container (width > 390px) and (width < 768px) { .result-card__sub-title { font-size: 11px; font-size: 2.8205128205vw; } } .result-card__creator { margin-top: 2rem; position: relative; } @container (width < 390px) { .result-card__creator { margin-top: 8.2051282051vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator { margin-top: 8.2051282051vw; } } .result-card__creator .-name { font-size: 0.8125rem; letter-spacing: 0.05em; padding-left: 7.375rem; } @container (width < 390px) { .result-card__creator .-name { font-size: 13px; font-size: 3.3333333333vw; padding-left: 30.2564102564vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator .-name { font-size: 13px; font-size: 3.3333333333vw; padding-left: 30.2564102564vw; } } .result-card__creator .-name span { font-size: 0.9375rem; } @container (width < 390px) { .result-card__creator .-name span { font-size: 15px; font-size: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator .-name span { font-size: 15px; font-size: 3.8461538462vw; } } .result-card__creator .-role { color: #888; font-size: 0.6875rem; letter-spacing: 0.05em; padding-left: 7.375rem; margin-bottom: 0.75rem; } @container (width < 390px) { .result-card__creator .-role { font-size: 11px; font-size: 2.8205128205vw; padding-left: 30.2564102564vw; margin-bottom: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator .-role { font-size: 11px; font-size: 2.8205128205vw; padding-left: 30.2564102564vw; margin-bottom: 3.0769230769vw; } } .result-card__creator-border { border: 2px solid #e6d348; border-radius: 0.5rem; background-color: var(--cl-white); padding: 1.25rem 1rem; } @container (width < 390px) { .result-card__creator-border { border-radius: 2.0512820513vw; padding: 5.1282051282vw 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border { border-radius: 2.0512820513vw; padding: 5.1282051282vw 4.1025641026vw; } } .result-card__creator-border .-desc01, .result-card__creator-border .-desc02 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; } @container (width < 390px) { .result-card__creator-border .-desc01, .result-card__creator-border .-desc02 { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-desc01, .result-card__creator-border .-desc02 { font-size: 13px; font-size: 3.3333333333vw; } } .result-card__creator-border .-desc01 { padding-left: 5.5rem; } @container (width < 390px) { .result-card__creator-border .-desc01 { padding-left: 22.5641025641vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-desc01 { padding-left: 22.5641025641vw; } } .result-card__creator-border .-desc02 { padding-left: 6.125rem; } @container (width < 390px) { .result-card__creator-border .-desc02 { padding-left: 25.1282051282vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-desc02 { padding-left: 25.1282051282vw; } } .result-card__creator-border .-img01 img, .result-card__creator-border .-img02 img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .result-card__creator-border .-img01 { width: 5.75rem; height: 8.375rem; position: absolute; top: 0; left: 0.5rem; } @container (width < 390px) { .result-card__creator-border .-img01 { width: 23.5897435897vw; height: 34.358974359vw; left: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-img01 { width: 23.5897435897vw; height: 34.358974359vw; left: 5.1282051282vw; } } .result-card__creator-border .-img02 { width: 6.5625rem; height: 8.375rem; position: absolute; top: 0; left: 0.625rem; } @container (width < 390px) { .result-card__creator-border .-img02 { width: 26.9230769231vw; height: 34.358974359vw; left: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-img02 { width: 26.9230769231vw; height: 34.358974359vw; left: 2.5641025641vw; } } .result-card__creator-border .-btn { background-color: #e6d348; display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.6875rem; letter-spacing: 0.05em; width: 6.6875rem; height: 1.875rem; position: absolute; bottom: -0.9375rem; right: 0.625rem; } @container (width < 390px) { .result-card__creator-border .-btn { font-size: 11px; font-size: 2.8205128205vw; width: 27.4358974359vw; height: 7.6923076923vw; bottom: -3.8461538462vw; right: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-btn { font-size: 11px; font-size: 2.8205128205vw; width: 27.4358974359vw; height: 7.6923076923vw; bottom: -3.8461538462vw; right: 2.5641025641vw; } } .result-card__creator-border .-btn::after { content: ""; display: block; width: 0.9375rem; height: 0.9375rem; background-image: url("../img/btn_plus_black.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .result-card__creator-border .-btn::after { width: 3.8461538462vw; height: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-btn::after { width: 3.8461538462vw; height: 3.8461538462vw; } } .result-card__creator-border .-text { font-size: 0.8125rem; line-height: 1.8; letter-spacing: 0.05em; margin-top: 1.875rem; } @container (width < 390px) { .result-card__creator-border .-text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 7.6923076923vw; } } @container (width > 390px) and (width < 768px) { .result-card__creator-border .-text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 7.6923076923vw; } } /* --------------------------------------- Top -----------------------------------------*/ .mv { background-color: var(--cl-white); background-image: url("../img/mv_bg.svg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom -0.7px; padding-top: 6.125rem; } @container (width < 390px) { .mv { padding-top: 25.1282051282vw; } } @container (width > 390px) and (width < 768px) { .mv { padding-top: 25.1282051282vw; } } .mv__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .keyword { background-color: #0d57ac; background-image: url("../img/keyword_bg_top.svg"), url("../img/keyword_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: left top, left bottom -0.7px; padding-block: 4rem 7rem; } @container (width < 390px) { .keyword { padding-block: 16.4102564103vw 28.7179487179vw; } } @container (width > 390px) and (width < 768px) { .keyword { padding-block: 16.4102564103vw 28.7179487179vw; } } .keyword__slider { width: 21.625rem; margin-left: 1.3125rem; } @container (width < 390px) { .keyword__slider { width: 88.7179487179vw; margin-left: 5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .keyword__slider { width: 88.7179487179vw; margin-left: 5.3846153846vw; } } .keyword__slider .slick-list { overflow: visible !important; } .keyword .prev-arrow, .keyword .next-arrow { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .keyword .prev-arrow:before, .keyword .next-arrow:before { content: ""; display: block; border-radius: 50%; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16); width: 2.625rem; height: 2.625rem; background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .keyword .prev-arrow:before, .keyword .next-arrow:before { width: 10.7692307692vw; height: 10.7692307692vw; } } @container (width > 390px) and (width < 768px) { .keyword .prev-arrow:before, .keyword .next-arrow:before { width: 10.7692307692vw; height: 10.7692307692vw; } } .keyword .prev-arrow { left: -1.3125rem; } @container (width < 390px) { .keyword .prev-arrow { left: -5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .keyword .prev-arrow { left: -5.3846153846vw; } } .keyword .prev-arrow:before { background-image: url("../img/slide_arrow_prev.svg"); } .keyword .next-arrow { right: 0; } .keyword .next-arrow:before { background-image: url("../img/slide_arrow_next.svg"); } .keyword__indicator { position: relative; width: 20.625rem; height: 2px; background: #0d57ac; margin-top: 1.5rem; margin-left: 1.3125rem; overflow: visible; max-width: 21.625rem; } @container (width < 390px) { .keyword__indicator { margin-top: 6.1538461538vw; margin-left: 5.3846153846vw; width: 84.6153846154vw; } } @container (width > 390px) and (width < 768px) { .keyword__indicator { margin-top: 6.1538461538vw; margin-left: 5.3846153846vw; width: 84.6153846154vw; } } .keyword__indicator-bar { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.5); transition: width 0.3s ease; } .course { background-image: url("../img/course_bg_bottom.svg"); background-repeat: no-repeat; background-size: contain; background-position: left bottom -0.7px; background-color: #66c2c3; padding-bottom: 4rem; } @container (width < 390px) { .course { padding-bottom: 16.4102564103vw; } } @container (width > 390px) and (width < 768px) { .course { padding-bottom: 16.4102564103vw; } } .course__head { width: 100%; max-width: 21.875rem; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; position: relative; margin-bottom: 1.5rem; } @container (width < 390px) { .course__head { max-width: 89.7435897436vw; gap: 2.0512820513vw; margin-bottom: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .course__head { max-width: 89.7435897436vw; gap: 2.0512820513vw; margin-bottom: 6.1538461538vw; } } .course__head::before { content: ""; display: block; width: 2.3125rem; height: 2.6875rem; background-image: url("../img/course_head_bg_left.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0.25rem; left: -0.5rem; } @container (width < 390px) { .course__head::before { width: 9.4871794872vw; height: 11.0256410256vw; top: 1.0256410256vw; left: -2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .course__head::before { width: 9.4871794872vw; height: 11.0256410256vw; top: 1.0256410256vw; left: -2.0512820513vw; } } .course__head::after { content: ""; display: block; width: 2.3125rem; height: 2.875rem; background-image: url("../img/course_head_bg_right.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0.25rem; right: -0.5rem; } @container (width < 390px) { .course__head::after { width: 9.4871794872vw; height: 11.7948717949vw; top: 1.0256410256vw; right: -2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .course__head::after { width: 9.4871794872vw; height: 11.7948717949vw; top: 1.0256410256vw; right: -2.0512820513vw; } } .course__catch { display: flex; align-items: center; justify-content: center; background-color: #279d9e; border-radius: 9999px; color: var(--cl-white); font-family: var(--font-mplus); font-size: 0.9375rem; letter-spacing: 0.05em; width: 13.3125rem; height: 1.8125rem; position: relative; } @container (width < 390px) { .course__catch { font-size: 3.8461538462vw; width: 54.6153846154vw; height: 7.4358974359vw; } } @container (width > 390px) and (width < 768px) { .course__catch { font-size: 3.8461538462vw; width: 54.6153846154vw; height: 7.4358974359vw; } } .course__catch::after { content: ""; display: block; background-color: #279d9e; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); width: 0.5rem; height: 0.25rem; position: absolute; bottom: -0.25rem; left: 50%; transform: translateX(-50%); } @container (width < 390px) { .course__catch::after { width: 2.0512820513vw; height: 1.0256410256vw; bottom: -1.0256410256vw; } } @container (width > 390px) and (width < 768px) { .course__catch::after { width: 2.0512820513vw; height: 1.0256410256vw; bottom: -1.0256410256vw; } } .course__heading { width: 16.375rem; } @container (width < 390px) { .course__heading { width: 67.1794871795vw; } } @container (width > 390px) and (width < 768px) { .course__heading { width: 67.1794871795vw; } } .course__heading img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .course__desc { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.8; margin-top: 1rem; } @container (width < 390px) { .course__desc { font-size: 13px; font-size: 3.3333333333vw; margin-top: 5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .course__desc { font-size: 13px; font-size: 3.3333333333vw; margin-top: 5.3846153846vw; } } .course__tab { display: grid; grid-template-columns: 1fr 1fr; } .course__tab-item { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.25rem; border-radius: 0.5rem 0.5rem 0 0; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; height: 4.5rem; } @container (width < 390px) { .course__tab-item { gap: 1.0256410256vw; border-radius: 2.0512820513vw 2.0512820513vw 0 0; font-size: 13px; font-size: 3.3333333333vw; height: 18.4615384615vw; } } @container (width > 390px) and (width < 768px) { .course__tab-item { gap: 1.0256410256vw; border-radius: 2.0512820513vw 2.0512820513vw 0 0; font-size: 13px; font-size: 3.3333333333vw; height: 18.4615384615vw; } } .course__tab-item--online { background-color: var(--cl-white); } .course__tab-item--online::before { content: ""; display: block; width: 3.125rem; height: 2.6875rem; background-image: url("../img/course_tab_icon_online.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .course__tab-item--online::before { width: 12.8205128205vw; height: 11.0256410256vw; } } @container (width > 390px) and (width < 768px) { .course__tab-item--online::before { width: 12.8205128205vw; height: 11.0256410256vw; } } .course__tab-item--offline { background-color: #dfe7f7; } .course__tab-item--offline::before { content: ""; display: block; width: 4.1875rem; height: 2.6875rem; background-image: url("../img/course_tab_icon_offline.svg"); background-repeat: no-repeat; background-size: contain; } @container (width < 390px) { .course__tab-item--offline::before { width: 17.1794871795vw; height: 11.0256410256vw; } } @container (width > 390px) and (width < 768px) { .course__tab-item--offline::before { width: 17.1794871795vw; height: 11.0256410256vw; } } .course .tab-content { visibility: hidden; opacity: 0; height: 0; transition: var(--transition); } .course .tab-content__inner { width: 100%; max-width: 21.875rem; margin-inline: auto; padding-block: 3rem 2rem; } @container (width < 390px) { .course .tab-content__inner { max-width: 89.7435897436vw; padding-block: 12.3076923077vw 8.2051282051vw; } } @container (width > 390px) and (width < 768px) { .course .tab-content__inner { max-width: 89.7435897436vw; padding-block: 12.3076923077vw 8.2051282051vw; } } .course .tab-content--online { background-color: var(--cl-white); } .course .tab-content--offline { background-color: #dfe7f7; } .course .tab-content.is_active { visibility: visible; opacity: 1; height: auto; } .course .dept__name { display: flex; align-items: center; justify-content: center; border-top: var(--cl-main) 1px solid; border-bottom: var(--cl-main) 1px solid; font-family: var(--font-mplus); font-size: 1.625rem; font-weight: 700; letter-spacing: 0.05em; color: var(--cl-main); text-align: center; height: 5.4375rem; margin-bottom: 1.25rem; } @container (width < 390px) { .course .dept__name { font-size: 26px; font-size: 6.6666666667vw; height: 22.3076923077vw; margin-bottom: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .course .dept__name { font-size: 26px; font-size: 6.6666666667vw; height: 22.3076923077vw; margin-bottom: 5.1282051282vw; } } .course .dept__features { display: flex; gap: 0.625rem; } @container (width < 390px) { .course .dept__features { gap: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .course .dept__features { gap: 2.5641025641vw; } } .course .dept__features--vertical { flex-direction: column; } .course .dept__feature { flex: 1; background-color: var(--cl-bg); padding: 0.625rem 1rem; font-size: 0.875rem; font-feature-settings: "palt"; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .course .dept__feature { font-size: 14px; font-size: 3.5897435897vw; } } @container (width > 390px) and (width < 768px) { .course .dept__feature { font-size: 14px; font-size: 3.5897435897vw; } } .course .dept__feature--lg { padding: 1.25rem 1rem; } .course .dept__title { margin: 3rem auto 1.5rem; } @container (width < 390px) { .course .dept__title { margin: 12.3076923077vw auto 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .course .dept__title { margin: 12.3076923077vw auto 6.1538461538vw; } } .course .dept__title img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .course .dept__title--completion { width: 16.3125rem; height: 2.8125rem; } @container (width < 390px) { .course .dept__title--completion { width: 66.9230769231vw; height: 11.5384615385vw; } } @container (width > 390px) and (width < 768px) { .course .dept__title--completion { width: 66.9230769231vw; height: 11.5384615385vw; } } .course .dept__title--course { width: 11.3125rem; height: 2.8125rem; } @container (width < 390px) { .course .dept__title--course { width: 46.4102564103vw; height: 11.5384615385vw; } } @container (width > 390px) and (width < 768px) { .course .dept__title--course { width: 46.4102564103vw; height: 11.5384615385vw; } } .course .dept__note { font-size: 0.625rem; font-feature-settings: "palt"; letter-spacing: 0.05em; margin-top: 1.25rem; } @container (width < 390px) { .course .dept__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .course .dept__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 5.1282051282vw; } } .course__list { display: flex; flex-direction: column; gap: 0.5rem; } @container (width < 390px) { .course__list { gap: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .course__list { gap: 2.0512820513vw; } } .result { background-image: url("../img/result_bg_top.svg"), url("../img/result_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain; background-position: left top, left bottom; padding-block: 4rem 1.875rem; background-color: #fefbe6; } @container (width < 390px) { .result { padding-block: 16.4102564103vw 7.6923076923vw; } } @container (width > 390px) and (width < 768px) { .result { padding-block: 16.4102564103vw 7.6923076923vw; } } .result__head { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; position: relative; margin-bottom: 2rem; } @container (width < 390px) { .result__head { gap: 4.1025641026vw; margin-bottom: 8.2051282051vw; } } @container (width > 390px) and (width < 768px) { .result__head { gap: 4.1025641026vw; margin-bottom: 8.2051282051vw; } } .result__head::before { content: ""; display: block; width: 2.75rem; height: 2.125rem; background-image: url("../img/result_head_bg_left.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 2.3125rem; } @container (width < 390px) { .result__head::before { width: 11.2820512821vw; height: 8.7179487179vw; left: 9.4871794872vw; } } @container (width > 390px) and (width < 768px) { .result__head::before { width: 11.2820512821vw; height: 8.7179487179vw; left: 9.4871794872vw; } } .result__head::after { content: ""; display: block; width: 2.5625rem; height: 2.75rem; background-image: url("../img/result_head_bg_right.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; right: 2.25rem; } @container (width < 390px) { .result__head::after { width: 10.5128205128vw; height: 11.2820512821vw; right: 9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .result__head::after { width: 10.5128205128vw; height: 11.2820512821vw; right: 9.2307692308vw; } } .result__heading { font-family: var(--font-mplus); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.05em; } @container (width < 390px) { .result__heading { font-size: 28px; font-size: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .result__heading { font-size: 28px; font-size: 7.1794871795vw; } } .result__desc { font-size: 1rem; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .result__desc { font-size: 16px; font-size: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .result__desc { font-size: 16px; font-size: 4.1025641026vw; } } .tuition { background-image: url("../img/tuition_bg_top.svg"), url("../img/tuition_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: left top, left bottom; background-color: var(--cl-white); padding-top: 4.75rem 0; } @container (width < 390px) { .tuition { padding-top: 19.4871794872vw; } } @container (width > 390px) and (width < 768px) { .tuition { padding-top: 19.4871794872vw; } } .tuition__head { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.375rem; position: relative; margin-bottom: 1.5rem; padding-top: 4.375rem; } @container (width < 390px) { .tuition__head { gap: 1.5384615385vw; margin-bottom: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .tuition__head { gap: 1.5384615385vw; margin-bottom: 6.1538461538vw; } } .tuition__head::before { content: ""; display: block; width: 4.25rem; height: 1.875rem; background-image: url("../img/tuition_head_bg_left.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 4.125rem; left: 1.8125rem; } @container (width < 390px) { .tuition__head::before { width: 17.4358974359vw; height: 7.6923076923vw; top: 16.9230769231vw; left: 7.4358974359vw; } } @container (width > 390px) and (width < 768px) { .tuition__head::before { width: 17.4358974359vw; height: 7.6923076923vw; top: 16.9230769231vw; left: 7.4358974359vw; } } .tuition__head::after { content: ""; display: block; width: 2.5625rem; height: 3rem; background-image: url("../img/tuition_head_bg_right.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 4.125rem; right: 3.5rem; } @container (width < 390px) { .tuition__head::after { width: 10.5128205128vw; height: 12.3076923077vw; top: 16.9230769231vw; right: 14.358974359vw; } } @container (width > 390px) and (width < 768px) { .tuition__head::after { width: 10.5128205128vw; height: 12.3076923077vw; top: 16.9230769231vw; right: 14.358974359vw; } } .tuition__heading { font-family: var(--font-mplus); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .tuition__heading { font-size: 28px; font-size: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .tuition__heading { font-size: 28px; font-size: 7.1794871795vw; } } .tuition__desc { font-size: 0.8125rem; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .tuition__desc { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__desc { font-size: 13px; font-size: 3.3333333333vw; } } .tuition__body { width: 100%; max-width: 21.875rem; margin-inline: auto; border-radius: 0.5rem; background-color: var(--cl-bg); padding: 1rem 1.5rem; margin-bottom: 2rem; } @container (width < 390px) { .tuition__body { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 4.1025641026vw 6.1538461538vw; margin-bottom: 8.2051282051vw; } } @container (width > 390px) and (width < 768px) { .tuition__body { max-width: 89.7435897436vw; border-radius: 2.0512820513vw; padding: 4.1025641026vw 6.1538461538vw; margin-bottom: 8.2051282051vw; } } .tuition__text { font-size: 0.8125rem; letter-spacing: 0.05em; font-weight: 700; } @container (width < 390px) { .tuition__text { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__text { font-size: 13px; font-size: 3.3333333333vw; } } .tuition__text--result { color: var(--cl-main); padding-bottom: 0.5rem; border-bottom: var(--cl-main) 1px solid; margin-bottom: 1.25rem; } @container (width < 390px) { .tuition__text--result { padding-bottom: 2.0512820513vw; margin-bottom: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .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 < 390px) { .tuition__select { height: 10.2564102564vw; border-radius: 1.5384615385vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__select { height: 10.2564102564vw; border-radius: 1.5384615385vw; padding-inline: 5.1282051282vw; font-size: 13px; font-size: 3.3333333333vw; } } .tuition__detail { margin-top: 1rem; } @container (width < 390px) { .tuition__detail { margin-top: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .tuition__detail { margin-top: 4.1025641026vw; } } .tuition__dl:not(:last-of-type) { margin-bottom: 1rem; } @container (width < 390px) { .tuition__dl:not(:last-of-type) { margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .tuition__dl:not(:last-of-type) { margin-bottom: 4.1025641026vw; } } .tuition__dl > dt { background: var(--cl-main); border-radius: 0.25rem 0.25rem 0 0; height: 2rem; color: var(--cl-white); font-size: 0.8125rem; letter-spacing: 0.05em; font-feature-settings: "palt"; font-weight: 400; display: grid; place-content: center; } @container (width < 390px) { .tuition__dl > dt { border-radius: 1.0256410256vw 1.0256410256vw 0 0; height: 8.2051282051vw; font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__dl > dt { border-radius: 1.0256410256vw 1.0256410256vw 0 0; height: 8.2051282051vw; font-size: 13px; font-size: 3.3333333333vw; } } .tuition__dl > dd { background: var(--cl-white); border-radius: 0 0 0.25rem 0.25rem; padding: 0.75rem 1.5rem 0.75rem; } @container (width < 390px) { .tuition__dl > dd { border-radius: 0 0 1.0256410256vw 1.0256410256vw; padding: 3.0769230769vw 6.1538461538vw 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .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.05em; font-weight: 500; font-family: var(--font-poppins); } @container (width < 390px) { .tuition__dl > dd > .-price { font-size: 18px; font-size: 4.6153846154vw; } } @container (width > 390px) and (width < 768px) { .tuition__dl > dd > .-price { font-size: 18px; font-size: 4.6153846154vw; } } .tuition__dl > dd > .-price > .-sm { font-size: 0.8125rem; letter-spacing: 0.05em; font-weight: 700; font-feature-settings: "palt"; } @container (width < 390px) { .tuition__dl > dd > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__dl > dd > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; } } .tuition__list > li:not(:last-child) { margin-bottom: 1rem; } @container (width < 390px) { .tuition__list > li:not(:last-child) { margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .tuition__list > li:not(:last-child) { margin-bottom: 4.1025641026vw; } } .tuition__list > li > .-text { font-size: 0.8125rem; letter-spacing: 0.05em; 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 < 390px) { .tuition__list > li > .-text { font-size: 13px; font-size: 3.3333333333vw; padding-bottom: 1.5384615385vw; margin-bottom: 1.0256410256vw; } } @container (width > 390px) and (width < 768px) { .tuition__list > li > .-text { font-size: 13px; font-size: 3.3333333333vw; 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 < 390px) { .tuition__list > li > .-price { font-size: 21px; font-size: 5.3846153846vw; } } @container (width > 390px) and (width < 768px) { .tuition__list > li > .-price { font-size: 21px; font-size: 5.3846153846vw; } } .tuition__list > li > .-price > .-sm { font-size: 0.8125rem; letter-spacing: 0.05em; font-weight: 700; font-feature-settings: "palt"; } @container (width < 390px) { .tuition__list > li > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .tuition__list > li > .-price > .-sm { font-size: 13px; font-size: 3.3333333333vw; } } .tuition__link-wrapper { margin-top: 0.5rem; } @container (width < 390px) { .tuition__link-wrapper { margin-top: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .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.05em; text-decoration: underline !important; } @container (width < 390px) { .tuition__link { font-size: 12px; font-size: 3.0769230769vw; } } @container (width > 390px) and (width < 768px) { .tuition__link { font-size: 12px; font-size: 3.0769230769vw; } } .tuition__link::before { content: ""; background-image: url("../img/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 < 390px) { .tuition__link::before { width: 3.8461538462vw; height: 3.8461538462vw; margin-right: 1.2820512821vw; } } @container (width > 390px) and (width < 768px) { .tuition__link::before { width: 3.8461538462vw; height: 3.8461538462vw; margin-right: 1.2820512821vw; } } .point { background-image: url("../img/point_bg_top.svg"); background-repeat: no-repeat; background-size: contain; background-position: left top; padding-top: 5.625rem; background-color: #dfe7f7; } @container (width < 390px) { .point { padding-top: 23.0769230769vw; } } @container (width > 390px) and (width < 768px) { .point { padding-top: 23.0769230769vw; } } .point__head { gap: 0.375rem; position: relative; margin-bottom: 2.5rem; } @container (width < 390px) { .point__head { gap: 1.5384615385vw; margin-bottom: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .point__head { gap: 1.5384615385vw; margin-bottom: 10.2564102564vw; } } .point__head::before { content: ""; display: block; width: 2.5625rem; height: 2.875rem; background-image: url("../img/point_head_bg_left.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: -1.25rem; left: 1.8125rem; } @container (width < 390px) { .point__head::before { width: 10.5128205128vw; height: 11.7948717949vw; top: -5.1282051282vw; left: 7.4358974359vw; } } @container (width > 390px) and (width < 768px) { .point__head::before { width: 10.5128205128vw; height: 11.7948717949vw; top: -5.1282051282vw; left: 7.4358974359vw; } } .point__head::after { content: ""; display: block; width: 3.5rem; height: 2.8125rem; background-image: url("../img/point_head_bg_right.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: -1.25rem; right: 1.25rem; } @container (width < 390px) { .point__head::after { width: 14.358974359vw; height: 11.5384615385vw; top: -5.1282051282vw; right: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .point__head::after { width: 14.358974359vw; height: 11.5384615385vw; top: -5.1282051282vw; right: 5.1282051282vw; } } .point__heading { width: 13.125rem; height: 2.3125rem; margin-inline: auto; margin-top: 1.25rem; } @container (width < 390px) { .point__heading { width: 53.8461538462vw; height: 9.4871794872vw; } } @container (width > 390px) and (width < 768px) { .point__heading { width: 53.8461538462vw; height: 9.4871794872vw; } } .point__heading img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .point__btn-wrapper { display: flex; align-items: center; justify-content: center; margin-block: 1.1875rem 0; } @container (width < 390px) { .point__btn-wrapper { margin-block: 4.8717948718vw 0; } } @container (width > 390px) and (width < 768px) { .point__btn-wrapper { margin-block: 4.8717948718vw 0; } } .job { background-image: url("../img/job_bg_top.svg"); background-repeat: no-repeat; background-size: contain; background-position: left top -0.7px; padding-top: 5.125rem; } @container (width < 390px) { .job { padding-top: 19.4871794872vw; } } @container (width > 390px) and (width < 768px) { .job { padding-top: 19.4871794872vw; } } .job__head { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.375rem; position: relative; margin-bottom: 1.5rem; } @container (width < 390px) { .job__head { gap: 1.5384615385vw; margin-bottom: 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .job__head { gap: 1.5384615385vw; margin-bottom: 6.1538461538vw; } } .job__head::before { content: ""; display: block; width: 3.4375rem; height: 1.9375rem; background-image: url("../img/job_head_bg_left.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: -1.25rem; left: 3.125rem; } @container (width < 390px) { .job__head::before { width: 14.1025641026vw; height: 7.9487179487vw; top: -5.1282051282vw; left: 12.8205128205vw; } } @container (width > 390px) and (width < 768px) { .job__head::before { width: 14.1025641026vw; height: 7.9487179487vw; top: -5.1282051282vw; left: 12.8205128205vw; } } .job__head::after { content: ""; display: block; width: 5.5625rem; height: 4.25rem; background-image: url("../img/job_head_bg_right.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: -2.5rem; right: 1.6875rem; } @container (width < 390px) { .job__head::after { width: 22.8205128205vw; height: 17.4358974359vw; top: -10.2564102564vw; right: 6.9230769231vw; } } @container (width > 390px) and (width < 768px) { .job__head::after { width: 22.8205128205vw; height: 17.4358974359vw; top: -10.2564102564vw; right: 6.9230769231vw; } } .job__heading { font-family: var(--font-mplus); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .job__heading { font-size: 28px; font-size: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .job__heading { font-size: 28px; font-size: 7.1794871795vw; } } .job__body { width: 100%; max-width: 21.875rem; margin: 0 auto 2.25rem; } @container (width < 390px) { .job__body { max-width: 89.7435897436vw; margin: 0 auto 9.2307692308vw; } } @container (width > 390px) and (width < 768px) { .job__body { max-width: 89.7435897436vw; margin: 0 auto 9.2307692308vw; } } .job__title { color: var(--cl-main); font-size: 1.25rem; font-feature-settings: "palt"; font-weight: 700; letter-spacing: 0.05em; text-align: center; margin-block: 1.25rem 1.125rem; } @container (width < 390px) { .job__title { font-size: 20px; font-size: 5.1282051282vw; margin-block: 5.1282051282vw 4.6153846154vw; } } @container (width > 390px) and (width < 768px) { .job__title { font-size: 20px; font-size: 5.1282051282vw; margin-block: 5.1282051282vw 4.6153846154vw; } } .job__text { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.8; } @container (width < 390px) { .job__text { font-size: 13px; font-size: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .job__text { font-size: 13px; font-size: 3.3333333333vw; } } .job__note { font-size: 0.625rem; font-feature-settings: "palt"; letter-spacing: 0.05em; margin-top: 0.8125rem; } @container (width < 390px) { .job__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 3.3333333333vw; } } @container (width > 390px) and (width < 768px) { .job__note { font-size: 10px; font-size: 2.5641025641vw; margin-top: 3.3333333333vw; } } .job__path { border: #d2ad19 2px solid; border-radius: 0.3125rem; margin-top: 1.75rem; padding-bottom: 1.5rem; } @container (width < 390px) { .job__path { border-radius: 1.2820512821vw; margin-top: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .job__path { border-radius: 1.2820512821vw; margin-top: 7.1794871795vw; } } .job__path-head { background-color: #d2ad19; color: var(--cl-white); font-size: 1rem; font-feature-settings: "palt"; font-weight: 700; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; height: 2.5rem; } @container (width < 390px) { .job__path-head { font-size: 16px; font-size: 4.1025641026vw; height: 10.2564102564vw; } } @container (width > 390px) and (width < 768px) { .job__path-head { font-size: 16px; font-size: 4.1025641026vw; height: 10.2564102564vw; } } .job__path-body { padding: 1rem 0.625rem; } @container (width < 390px) { .job__path-body { padding: 4.1025641026vw 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .job__path-body { padding: 4.1025641026vw 2.5641025641vw; } } .job__path-text { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.05em; } @container (width < 390px) { .job__path-text { font-size: 14px; font-size: 3.5897435897vw; } } @container (width > 390px) and (width < 768px) { .job__path-text { font-size: 14px; font-size: 3.5897435897vw; } } .job__path-graph-title { color: var(--cl-main); font-family: var(--font-mplus); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; margin-top: 0.625rem; } @container (width < 390px) { .job__path-graph-title { font-size: 18px; font-size: 4.6153846154vw; margin-top: 2.5641025641vw; } } @container (width > 390px) and (width < 768px) { .job__path-graph-title { font-size: 18px; font-size: 4.6153846154vw; margin-top: 2.5641025641vw; } } .job__path-graph-note { font-feature-settings: "palt"; font-size: 0.625rem; letter-spacing: 0.05em; padding-left: 0.75rem; margin-block: 0.625rem 1.5rem; position: relative; } @container (width < 390px) { .job__path-graph-note { font-size: 10px; font-size: 2.5641025641vw; padding-left: 3.0769230769vw; margin-block: 2.5641025641vw 6.1538461538vw; } } @container (width > 390px) and (width < 768px) { .job__path-graph-note { font-size: 10px; font-size: 2.5641025641vw; padding-left: 3.0769230769vw; margin-block: 2.5641025641vw 6.1538461538vw; } } .job__path-graph-note::before { content: "※"; position: absolute; top: 0; left: 0; } .job__path-accordion-body { display: none; } .job__path-accordion-body.is-active { display: block; } .job__path-btn-wrapper { display: flex; justify-content: center; } .job__path-btn-wrapper .btn--open { width: 10.0625rem; } @container (width < 390px) { .job__path-btn-wrapper .btn--open { width: 41.2820512821vw; } } @container (width > 390px) and (width < 768px) { .job__path-btn-wrapper .btn--open { width: 41.2820512821vw; } } .job__path-btn-wrapper .btn--close { width: 7.125rem; } @container (width < 390px) { .job__path-btn-wrapper .btn--close { width: 29.2307692308vw; } } @container (width > 390px) and (width < 768px) { .job__path-btn-wrapper .btn--close { width: 29.2307692308vw; } } .movie { background-color: #f9f1d9; background-image: url("../img/movie_bg_top.svg"), url("../img/movie_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: left top -0.7px, left bottom; padding-block: 5.6875rem 6.25rem; } @container (width < 390px) { .movie { padding-block: 23.3333333333vw 25.641025641vw; } } @container (width > 390px) and (width < 768px) { .movie { padding-block: 23.3333333333vw 25.641025641vw; } } .movie__head { margin-bottom: 1rem; } @container (width < 390px) { .movie__head { margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .movie__head { margin-bottom: 4.1025641026vw; } } .movie__text { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.8; margin-top: 0.5rem; } @container (width < 390px) { .movie__text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .movie__text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } .session { background-color: var(--cl-white); background-image: url("../img/session_bg_bottom.svg"); background-repeat: no-repeat; background-size: contain; background-position: left bottom -0.8px; padding-bottom: 8.375rem; } @container (width < 390px) { .session { padding-bottom: 34.358974359vw; } } @container (width > 390px) and (width < 768px) { .session { padding-bottom: 34.358974359vw; } } .session__head { margin-bottom: 1rem; } @container (width < 390px) { .session__head { margin-bottom: 4.1025641026vw; } } @container (width > 390px) and (width < 768px) { .session__head { margin-bottom: 4.1025641026vw; } } .session__heading { font-family: var(--font-mplus); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; } @container (width < 390px) { .session__heading { font-size: 28px; font-size: 7.1794871795vw; } } @container (width > 390px) and (width < 768px) { .session__heading { font-size: 28px; font-size: 7.1794871795vw; } } .session__body { padding-inline: 1.25rem; } .session__text { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.8; margin-top: 0.5rem; } @container (width < 390px) { .session__text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } @container (width > 390px) and (width < 768px) { .session__text { font-size: 13px; font-size: 3.3333333333vw; margin-top: 2.0512820513vw; } } .session__btn-wrapper { margin-top: 1.625rem; } @container (width < 390px) { .session__btn-wrapper { margin-top: 6.6666666667vw; } } @container (width > 390px) and (width < 768px) { .session__btn-wrapper { margin-top: 6.6666666667vw; } } .pamphlet { background-image: url("../img/pamphlet_bg_top.svg"), url("../img/pamphlet_bg_bottom.svg"); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: left top -0.7px, left bottom -0.9px; background-color: #dfe7f7; padding-top: 4rem; } @container (width < 390px) { .pamphlet { padding-top: 16.4102564103vw; } } @container (width > 390px) and (width < 768px) { .pamphlet { padding-top: 16.4102564103vw; } } .pamphlet__heading { width: 18.375rem; margin-inline: auto; } @container (width < 390px) { .pamphlet__heading { width: 75.3846153846vw; } } @container (width > 390px) and (width < 768px) { .pamphlet__heading { width: 75.3846153846vw; } } .pamphlet__heading img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .pamphlet__body { padding-inline: 1.25rem; background-image: -webkit-image-set(url("../img/pamphlet_bg_body.webp") type("image/webp"), url("../img/pamphlet_bg_body.png") type("image/png")); background-image: image-set(url("../img/pamphlet_bg_body.webp") type("image/webp"), url("../img/pamphlet_bg_body.png") type("image/png")); background-repeat: no-repeat; background-size: contain; background-position: left top; } @container (width < 390px) { .pamphlet__body { padding-inline: 5.1282051282vw; } } @container (width > 390px) and (width < 768px) { .pamphlet__body { padding-inline: 5.1282051282vw; } } .pamphlet__img { width: 10.625rem; margin-inline: auto; padding-top: 2.8125rem; } @container (width < 390px) { .pamphlet__img { width: 43.5897435897vw; padding-top: 11.5384615385vw; } } @container (width > 390px) and (width < 768px) { .pamphlet__img { width: 43.5897435897vw; padding-top: 11.5384615385vw; } } .pamphlet__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .pamphlet__text { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.8; margin-block: 0.9375rem; text-align: center; } @container (width < 390px) { .pamphlet__text { font-size: 13px; font-size: 3.3333333333vw; margin-block: 3.8461538462vw; } } @container (width > 390px) and (width < 768px) { .pamphlet__text { font-size: 13px; font-size: 3.3333333333vw; margin-block: 3.8461538462vw; } } .pamphlet__btn-wrapper { margin-top: 1.625rem; } /* --------------------------------------- Margin -----------------------------------------*/ .u-mt00 { margin-top: 0px !important; } .u-mt01 { margin-top: 1px !important; } .u-mt02 { margin-top: 2px !important; } .u-mt03 { margin-top: 3px !important; } .u-mt04 { margin-top: 4px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt06 { margin-top: 6px !important; } .u-mt07 { margin-top: 7px !important; } .u-mt08 { margin-top: 8px !important; } .u-mt09 { margin-top: 9px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt11 { margin-top: 11px !important; } .u-mt12 { margin-top: 12px !important; } .u-mt13 { margin-top: 13px !important; } .u-mt14 { margin-top: 14px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt16 { margin-top: 16px !important; } .u-mt17 { margin-top: 17px !important; } .u-mt18 { margin-top: 18px !important; } .u-mt19 { margin-top: 19px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mr00 { margin-right: 0 !important; } .u-mr01 { margin-right: 1px !important; } .u-mr02 { margin-right: 2px !important; } .u-mr03 { margin-right: 3px !important; } .u-mr04 { margin-right: 4px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr06 { margin-right: 6px !important; } .u-mr07 { margin-right: 7px !important; } .u-mr08 { margin-right: 8px !important; } .u-mr09 { margin-right: 9px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr11 { margin-right: 11px !important; } .u-mr12 { margin-right: 12px !important; } .u-mr13 { margin-right: 13px !important; } .u-mr14 { margin-right: 14px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr16 { margin-right: 16px !important; } .u-mr17 { margin-right: 17px !important; } .u-mr18 { margin-right: 18px !important; } .u-mr19 { margin-right: 19px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb01 { margin-bottom: 1px !important; } .u-mb02 { margin-bottom: 2px !important; } .u-mb03 { margin-bottom: 3px !important; } .u-mb04 { margin-bottom: 4px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb06 { margin-bottom: 6px !important; } .u-mb07 { margin-bottom: 7px !important; } .u-mb08 { margin-bottom: 8px !important; } .u-mb09 { margin-bottom: 9px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb11 { margin-bottom: 11px !important; } .u-mb12 { margin-bottom: 12px !important; } .u-mb13 { margin-bottom: 13px !important; } .u-mb14 { margin-bottom: 14px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb16 { margin-bottom: 16px !important; } .u-mb17 { margin-bottom: 17px !important; } .u-mb18 { margin-bottom: 18px !important; } .u-mb19 { margin-bottom: 19px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml01 { margin-left: 1px !important; } .u-ml02 { margin-left: 2px !important; } .u-ml03 { margin-left: 3px !important; } .u-ml04 { margin-left: 4px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml06 { margin-left: 6px !important; } .u-ml07 { margin-left: 7px !important; } .u-ml08 { margin-left: 8px !important; } .u-ml09 { margin-left: 9px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml11 { margin-left: 11px !important; } .u-ml12 { margin-left: 12px !important; } .u-ml13 { margin-left: 13px !important; } .u-ml14 { margin-left: 14px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml16 { margin-left: 16px !important; } .u-ml17 { margin-left: 17px !important; } .u-ml18 { margin-left: 18px !important; } .u-ml19 { margin-left: 19px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ma00 { margin: 0px !important; } .u-ma01 { margin: 1px !important; } .u-ma02 { margin: 2px !important; } .u-ma03 { margin: 3px !important; } .u-ma04 { margin: 4px !important; } .u-ma05 { margin: 5px !important; } .u-ma06 { margin: 6px !important; } .u-ma07 { margin: 7px !important; } .u-ma08 { margin: 8px !important; } .u-ma09 { margin: 9px !important; } .u-ma10 { margin: 10px !important; } .u-ma11 { margin: 11px !important; } .u-ma12 { margin: 12px !important; } .u-ma13 { margin: 13px !important; } .u-ma14 { margin: 14px !important; } .u-ma15 { margin: 15px !important; } .u-ma16 { margin: 16px !important; } .u-ma17 { margin: 17px !important; } .u-ma18 { margin: 18px !important; } .u-ma19 { margin: 19px !important; } .u-ma20 { margin: 20px !important; } .u-ma25 { margin: 25px !important; } .u-ma30 { margin: 30px !important; } .u-ma35 { margin: 35px !important; } .u-ma40 { margin: 40px !important; } .u-ma45 { margin: 45px !important; } .u-ma50 { margin: 50px !important; } .u-ma55 { margin: 55px !important; } .u-ma60 { margin: 60px !important; } .u-ma65 { margin: 65px !important; } .u-ma70 { margin: 70px !important; } .u-ma75 { margin: 75px !important; } .u-ma80 { margin: 80px !important; } .u-ma85 { margin: 85px !important; } .u-ma90 { margin: 90px !important; } .u-ma95 { margin: 95px !important; } .u-ma100 { margin: 100px !important; } /* --------------------------------------- Padding -----------------------------------------*/ .u-pt00 { padding-top: 0px !important; } .u-pt01 { padding-top: 1px !important; } .u-pt02 { padding-top: 2px !important; } .u-pt03 { padding-top: 3px !important; } .u-pt04 { padding-top: 4px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt06 { padding-top: 6px !important; } .u-pt07 { padding-top: 7px !important; } .u-pt08 { padding-top: 8px !important; } .u-pt09 { padding-top: 9px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt11 { padding-top: 11px !important; } .u-pt12 { padding-top: 12px !important; } .u-pt13 { padding-top: 13px !important; } .u-pt14 { padding-top: 14px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt16 { padding-top: 16px !important; } .u-pt17 { padding-top: 17px !important; } .u-pt18 { padding-top: 18px !important; } .u-pt19 { padding-top: 19px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr01 { padding-right: 1px !important; } .u-pr02 { padding-right: 2px !important; } .u-pr03 { padding-right: 3px !important; } .u-pr04 { padding-right: 4px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr06 { padding-right: 6px !important; } .u-pr07 { padding-right: 7px !important; } .u-pr08 { padding-right: 8px !important; } .u-pr09 { padding-right: 9px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr11 { padding-right: 11px !important; } .u-pr12 { padding-right: 12px !important; } .u-pr13 { padding-right: 13px !important; } .u-pr14 { padding-right: 14px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr16 { padding-right: 16px !important; } .u-pr17 { padding-right: 17px !important; } .u-pr18 { padding-right: 18px !important; } .u-pr19 { padding-right: 19px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb01 { padding-bottom: 1px !important; } .u-pb02 { padding-bottom: 2px !important; } .u-pb03 { padding-bottom: 3px !important; } .u-pb04 { padding-bottom: 4px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb06 { padding-bottom: 6px !important; } .u-pb07 { padding-bottom: 7px !important; } .u-pb08 { padding-bottom: 8px !important; } .u-pb09 { padding-bottom: 9px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb11 { padding-bottom: 11px !important; } .u-pb12 { padding-bottom: 12px !important; } .u-pb13 { padding-bottom: 13px !important; } .u-pb14 { padding-bottom: 14px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb16 { padding-bottom: 16px !important; } .u-pb17 { padding-bottom: 17px !important; } .u-pb18 { padding-bottom: 18px !important; } .u-pb19 { padding-bottom: 19px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl01 { padding-left: 1px !important; } .u-pl02 { padding-left: 2px !important; } .u-pl03 { padding-left: 3px !important; } .u-pl04 { padding-left: 4px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl06 { padding-left: 6px !important; } .u-pl07 { padding-left: 7px !important; } .u-pl08 { padding-left: 8px !important; } .u-pl09 { padding-left: 9px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl11 { padding-left: 11px !important; } .u-pl12 { padding-left: 12px !important; } .u-pl13 { padding-left: 13px !important; } .u-pl14 { padding-left: 14px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl16 { padding-left: 16px !important; } .u-pl17 { padding-left: 17px !important; } .u-pl18 { padding-left: 18px !important; } .u-pl19 { padding-left: 19px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pa00 { padding: 0px !important; } .u-pa01 { padding: 1px !important; } .u-pa02 { padding: 2px !important; } .u-pa03 { padding: 3px !important; } .u-pa04 { padding: 4px !important; } .u-pa05 { padding: 5px !important; } .u-pa06 { padding: 6px !important; } .u-pa07 { padding: 7px !important; } .u-pa08 { padding: 8px !important; } .u-pa09 { padding: 9px !important; } .u-pa10 { padding: 10px !important; } .u-pa11 { padding: 11px !important; } .u-pa12 { padding: 12px !important; } .u-pa13 { padding: 13px !important; } .u-pa14 { padding: 14px !important; } .u-pa15 { padding: 15px !important; } .u-pa16 { padding: 16px !important; } .u-pa17 { padding: 17px !important; } .u-pa18 { padding: 18px !important; } .u-pa19 { padding: 19px !important; } .u-pa20 { padding: 20px !important; } .u-pa25 { padding: 25px !important; } .u-pa30 { padding: 30px !important; } .u-pa35 { padding: 35px !important; } .u-pa40 { padding: 40px !important; } .u-pa45 { padding: 45px !important; } .u-pa50 { padding: 50px !important; } .u-pa55 { padding: 55px !important; } .u-pa60 { padding: 60px !important; } .u-pa65 { padding: 65px !important; } .u-pa70 { padding: 70px !important; } .u-pa75 { padding: 75px !important; } .u-pa80 { padding: 80px !important; } .u-pa85 { padding: 85px !important; } .u-pa90 { padding: 90px !important; } .u-pa95 { padding: 95px !important; } .u-pa100 { padding: 100px !important; } /*# sourceMappingURL=maps/style.css.map */