@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; } /* --------------------------------------- Basic Settings -----------------------------------------*/ :root { --cl-accent: #fa4d4d; --cl-border: #ccc; --cl-bg: #f5f5f5; --cl-text: #121212; --cl-link: #121212; --cl-link-hover: #121212; --cl-white: #fff; --font-noto: "Noto Sans JP", sans-serif; --root-font-size: 16; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-out; --opacity: 0.75; } html { scroll-behavior: smooth; } html body { position: relative; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; font-family: var(--font-noto); background-color: var(--cl-white); color: var(--cl-text); height: 100dvh; display: grid; grid-template: "header" auto "main" 1fr "footer" auto/1fr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html body.modal-open, html body.menu-open { width: 100%; height: 100%; overflow: hidden; } html img { font-size: 0; line-height: 0; } html a { color: var(--cl-text); text-decoration: none; word-break: break-all; transition: var(--transition); } @media (any-hover: hover) { html a:hover { color: var(--cl-link-hover); opacity: var(--opacity); text-decoration: none; } } html a:link, html a:visited, html a:active { text-decoration: none; } html h1, html h2, html h3, html h4, html h5, html h6 { line-height: 1.5; } html p { line-height: 2.5; } /* --------------------------------------- Header -----------------------------------------*/ .header { grid-area: header; position: fixed; top: 0; left: 0; right: 0; z-index: 5000; background-color: transparent; transition: var(--transition); } @media screen and (width <= 991px) { .header { position: relative; } } .header__wrapper { margin-inline: auto; display: flex; align-items: center; justify-content: space-between; } @media screen and (width > 1280px) { .header__wrapper { width: calc(100% - 10rem); height: 3.75rem; } } @media screen and (width <= 1280px) { .header__wrapper { width: 100%; height: 4.6875vw; padding: 0 1.875vw 0 3.125vw; } } @media screen and (width <= 991px) { .header__wrapper { width: 100%; height: 11.5885416667vw; padding: 0 4.1666666667vw 0 5.2083333333vw; } } @media screen and (width <= 767px) { .header__wrapper { width: 100%; height: 15.8974358974vw; padding: 0 6.1538461538vw; } } @media screen and (width > 1280px) { .header__logo { width: 4.6875rem; } } @media screen and (width <= 1280px) { .header__logo { width: 5.859375vw; } } @media screen and (width <= 991px) { .header__logo { width: 9.6354166667vw; } } @media screen and (width <= 767px) { .header__logo { width: 11.5384615385vw; } } .header__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header__nav { display: flex; align-items: center; } @media screen and (width > 1280px) { .header__nav { gap: 1.5rem; } } @media screen and (width <= 1280px) { .header__nav { gap: 1.875vw; } } @media screen and (width <= 991px) { .header__nav { display: none; } } .header__navList { display: flex; align-items: center; } @media screen and (width > 1280px) { .header__navList { gap: 1.5rem; } } @media screen and (width <= 1280px) { .header__navList { gap: 1.875vw; } } @media screen and (width <= 991px) { .header__navList { display: none; } } .header__navList > li { font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .header__navList > li { font-size: 0.75rem; } } @media screen and (width <= 1280px) { .header__navList > li { font-size: 0.9375vw; } } .header__contact { display: flex; align-items: center; } @media screen and (width > 1280px) { .header__contact { gap: 0.75rem; } } @media screen and (width <= 1280px) { .header__contact { gap: 0.9375vw; } } @media screen and (width <= 991px) { .header__contact { display: none; } } .header__btn { background-color: var(--cl-white); color: var(--cl-text); font-weight: bold; box-sizing: border-box; display: grid; place-content: center; border-radius: 9999px; } @media screen and (width > 1280px) { .header__btn { border: var(--cl-text) 0.125rem solid; font-size: 0.75rem; min-width: 6.25rem; padding: 0.1875rem 1.5rem 0.25rem 1.5rem; box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16); } } @media screen and (width <= 1280px) { .header__btn { border: var(--cl-text) 0.15625vw solid; font-size: 12px; font-size: 0.9375vw; min-width: 7.8125vw; padding: 0.234375vw 1.875vw 0.3125vw 1.875vw; box-shadow: 0 0.234375vw 0.46875vw rgba(0, 0, 0, 0.16); } } .header__btn--black { background-color: var(--cl-text); color: var(--cl-white); } @media (any-hover: hover) { .header__btn--black:hover { color: var(--cl-white); } } .header.is_fixed { background-color: var(--cl-white); } .header .gnavi-sp { display: none; } @media screen and (width <= 991px) { .header .gnavi-sp { transition: var(--transition); opacity: 0; visibility: hidden; display: block; width: 100vw; height: 100dvh; overflow-y: auto; position: fixed; top: 0; left: 0; z-index: 5001; background-color: rgb(255, 255, 255); box-sizing: border-box; padding: 10.4166666667vw; } } .header .gnavi-sp__logo { width: 13.0208333333vw; height: 4.6875vw; } @media screen and (width <= 767px) { .header .gnavi-sp__logo { width: 25.641025641vw; height: 9.2307692308vw; } } .header .gnavi-sp__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header .gnavi-sp__navi { margin-top: 20.3125vw; } @media screen and (width <= 767px) { .header .gnavi-sp__navi { margin-top: 28.2051282051vw; } } .header .gnavi-sp__navi-list { display: flex; flex-direction: column; row-gap: 5.2083333333vw; } @media screen and (width <= 767px) { .header .gnavi-sp__navi-list { row-gap: 10.2564102564vw; } } .header .gnavi-sp__navi-list > li { font-weight: bold; letter-spacing: 0.04em; } @media screen and (width <= 991px) { .header .gnavi-sp__navi-list > li { font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .header .gnavi-sp__navi-list > li { font-size: 3.0769230769vw; } } .header .gnavi-sp__footer { border-top: #c3c3c3 1px solid; margin-top: 26.0416666667vw; padding-top: 5.2083333333vw; } @media screen and (width <= 767px) { .header .gnavi-sp__footer { margin-top: 34.6153846154vw; padding-top: 10.2564102564vw; } } .header .gnavi-sp__info-nav { display: grid; grid-template-columns: repeat(2, auto); -moz-column-gap: 13.8020833333vw; column-gap: 13.8020833333vw; row-gap: 1.8229166667vw; } @media screen and (width <= 767px) { .header .gnavi-sp__info-nav { -moz-column-gap: 27.1794871795vw; column-gap: 27.1794871795vw; row-gap: 3.5897435897vw; } } .header .gnavi-sp__info-nav > li { letter-spacing: 0.04em; } @media screen and (width <= 991px) { .header .gnavi-sp__info-nav > li { font-size: 1.5625vw; } } @media screen and (width <= 767px) { .header .gnavi-sp__info-nav > li { font-size: 3.0769230769vw; } } .header .gnavi-sp__sns { display: flex; align-items: center; -moz-column-gap: 2.0833333333vw; column-gap: 2.0833333333vw; margin-top: 5.46875vw; } @media screen and (width <= 767px) { .header .gnavi-sp__sns { -moz-column-gap: 4.1025641026vw; column-gap: 4.1025641026vw; margin-top: 10.7692307692vw; } } .header .gnavi-sp__sns > li .-x, .header .gnavi-sp__sns > li .-note, .header .gnavi-sp__sns > li -instagram { width: 2.34375vw; height: 2.34375vw; } @media screen and (width <= 767px) { .header .gnavi-sp__sns > li .-x, .header .gnavi-sp__sns > li .-note, .header .gnavi-sp__sns > li -instagram { width: 4.6153846154vw; height: 4.6153846154vw; } } .header .gnavi-sp__sns > li.-youtube { width: 3.3854166667vw; height: 2.34375vw; transform: translateY(-0.1302083333vw); } @media screen and (width <= 767px) { .header .gnavi-sp__sns > li.-youtube { width: 6.6666666667vw; height: 4.6153846154vw; transform: translateY(-0.2564102564vw); } } .header .gnavi-sp__sns > li img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header .gnavi-sp.is_active { opacity: 1; visibility: visible; } /* --------------------------------------- ハンバーガーナビ -----------------------------------------*/ .navi-toggle-sp { display: none; } @media screen and (width <= 991px) { .navi-toggle-sp { z-index: 9999; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 2.2135416667vw; position: fixed; top: 5.2083333333vw; right: 4.1666666667vw; width: 7.8125vw; } } @media screen and (width <= 991px) and (width <= 767px) { .navi-toggle-sp { row-gap: 2.8205128205vw; top: 6.1538461538vw; right: 6.1538461538vw; width: 10.2564102564vw; } } .navi-toggle-sp span { display: block; width: 100%; border-bottom: #707070 1px solid; transition: var(--transition); } .navi-toggle-sp.is_active span:nth-child(1) { transform: translateY(1.0416666667vw) rotate(15deg); } @media screen and (width <= 767px) { .navi-toggle-sp.is_active span:nth-child(1) { transform: translateY(1.2820512821vw) rotate(15deg); } } .navi-toggle-sp.is_active span:nth-child(2) { transform: translateY(-1.3020833333vw) rotate(-15deg); } @media screen and (width <= 767px) { .navi-toggle-sp.is_active span:nth-child(2) { transform: translateY(-1.7948717949vw) rotate(-15deg); } } /* --------------------------------------- Wrapper -----------------------------------------*/ .main { grid-area: main; } @media screen and (width <= 991px) { .main { margin-top: -11.5885416667vw; } } @media screen and (width <= 767px) { .main { margin-top: -15.8974358974vw; } } /* --------------------------------------- Footer -----------------------------------------*/ .footer-contact__wrapper { display: grid; } @media screen and (width > 767px) { .footer-contact__wrapper { grid-template-columns: 1fr 1fr; } } @media screen and (width <= 767px) { .footer-contact__wrapper { grid-template-columns: 1fr; } } .footer-contact-area { background-color: #4b4b4b; display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (width > 1280px) { .footer-contact-area { padding-block: 3.5rem 4rem; } } @media screen and (width <= 1280px) { .footer-contact-area { padding-block: 4.375vw 5vw; } } @media screen and (width <= 991px) { .footer-contact-area { padding-block: 8.3333333333vw 7.2916666667vw; } } @media screen and (width <= 767px) { .footer-contact-area { padding-block: 10.2564102564vw; } } @media screen and (width > 1280px) { .footer-contact-area__icon--document { width: 4rem; height: 4rem; } } @media screen and (width <= 1280px) { .footer-contact-area__icon--document { width: 5vw; height: 5vw; } } @media screen and (width <= 991px) { .footer-contact-area__icon--document { width: 8.3333333333vw; height: 8.3333333333vw; } } @media screen and (width <= 767px) { .footer-contact-area__icon--document { width: 16.4102564103vw; height: 16.4102564103vw; } } @media screen and (width > 1280px) { .footer-contact-area__icon--contact { width: 3.625rem; height: 4rem; } } @media screen and (width <= 1280px) { .footer-contact-area__icon--contact { width: 4.53125vw; height: 5vw; } } @media screen and (width <= 991px) { .footer-contact-area__icon--contact { width: 7.5520833333vw; height: 8.3333333333vw; } } @media screen and (width <= 767px) { .footer-contact-area__icon--contact { width: 14.8717948718vw; height: 16.4102564103vw; } } .footer-contact-area__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .footer-contact-area__title { color: var(--cl-white); font-weight: bold; letter-spacing: 0.1em; line-height: 1.8; } @media screen and (width > 1280px) { .footer-contact-area__title { font-size: 1.25rem; margin-top: 1.25rem; } } @media screen and (width <= 1280px) { .footer-contact-area__title { font-size: 20px; font-size: 1.5625vw; margin-top: 1.5625vw; } } @media screen and (width <= 991px) { .footer-contact-area__title { font-size: 20px; font-size: 2.6041666667vw; margin-top: 2.6041666667vw; } } @media screen and (width <= 767px) { .footer-contact-area__title { font-size: 20px; font-size: 5.1282051282vw; margin-top: 5.1282051282vw; } } .footer-contact-area__text { color: var(--cl-white); letter-spacing: 0.04em; line-height: 2; } @media screen and (width > 1280px) { .footer-contact-area__text { width: 23.75rem; font-size: 0.875rem; margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .footer-contact-area__text { width: 29.6875vw; font-size: 14px; font-size: 1.09375vw; margin-top: 1.875vw; } } @media screen and (width <= 991px) { .footer-contact-area__text { width: 39.5833333333vw; font-size: 13px; font-size: 1.6927083333vw; margin-top: 3.125vw; } } @media screen and (width <= 767px) { .footer-contact-area__text { width: 79.4871794872vw; font-size: 12px; font-size: 3.0769230769vw; margin-top: 6.1538461538vw; } } .footer-contact-area__btn-wrapper { display: flex; justify-content: center; } @media screen and (width > 1280px) { .footer-contact-area__btn-wrapper { margin-top: 2.625rem; } } @media screen and (width <= 1280px) { .footer-contact-area__btn-wrapper { margin-top: 3.28125vw; } } @media screen and (width <= 991px) { .footer-contact-area__btn-wrapper { margin-top: 4.1666666667vw; } } @media screen and (width <= 767px) { .footer-contact-area__btn-wrapper { margin-top: 6.1538461538vw; } } .footer-contact-area__btn { display: inline-block; width: 100%; background-color: var(--cl-white); border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: bold; } @media screen and (width > 1280px) { .footer-contact-area__btn { -moz-column-gap: 1rem; column-gap: 1rem; min-width: 21.0625rem; height: 3.875rem; } } @media screen and (width <= 1280px) { .footer-contact-area__btn { -moz-column-gap: 1.25vw; column-gap: 1.25vw; min-width: 26.328125vw; height: 4.84375vw; } } @media screen and (width <= 991px) { .footer-contact-area__btn { -moz-column-gap: 2.0833333333vw; column-gap: 2.0833333333vw; min-width: 39.5833333333vw; height: 8.0729166667vw; } } @media screen and (width <= 767px) { .footer-contact-area__btn { -moz-column-gap: 4.1025641026vw; column-gap: 4.1025641026vw; min-width: 79.4871794872vw; height: 15.3846153846vw; font-size: 16px; font-size: 4.1025641026vw; } } .footer-contact-area__btn::after { content: ""; background-image: url("../images/parts/arrow-right.svg"); background-repeat: no-repeat; background-size: contain; } @media screen and (width > 1280px) { .footer-contact-area__btn::after { width: 1.125rem; height: 0.8125rem; transform: translateY(0.0625rem); } } @media screen and (width <= 1280px) { .footer-contact-area__btn::after { width: 1.40625vw; height: 1.015625vw; transform: translateY(0.078125vw); } } @media screen and (width <= 991px) { .footer-contact-area__btn::after { width: 2.34375vw; height: 1.6927083333vw; transform: translateY(0.1302083333vw); } } @media screen and (width <= 767px) { .footer-contact-area__btn::after { width: 4.6153846154vw; height: 3.3333333333vw; transform: translateY(0.2564102564vw); } } .footer-contact-area--contact { background-color: #2b2b2b; } .footer { grid-area: footer; background-color: var(--cl-white); } .footer__wrapper { max-width: 70rem; margin-inline: auto; display: grid; } @media screen and (width > 1280px) { .footer__wrapper { width: calc(100% - 10rem); padding-block: 3rem 2.5rem; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "logo address global-nav" "logo address info-nav" "copyright sns sns"; } } @media screen and (width <= 1280px) { .footer__wrapper { width: calc(100% - 12.5vw); padding-block: 3.75vw 3.125vw; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "logo address global-nav" "logo address info-nav" "copyright sns sns"; } } @media screen and (width <= 991px) { .footer__wrapper { width: calc(100% - 5rem); padding-block: 6.25vw 5.2083333333vw; grid-template-columns: 1fr auto; grid-template-areas: "logo sns" "address address" "global-nav global-nav" "info-nav info-nav" "copyright copyright"; align-items: start; } } @media screen and (width <= 767px) { .footer__wrapper { padding-block: 12.3076923077vw 20.5128205128vw; grid-template-columns: 1fr; grid-template-areas: "logo" "address" "global-nav" "info-nav" "sns" "copyright"; } } @media screen and (width <= 374px) { .footer__wrapper { width: calc(100% - 3rem); } } .footer__logo { grid-area: logo; } @media screen and (width > 1280px) { .footer__logo { width: 8.75rem; height: 3.125rem; } } @media screen and (width <= 1280px) { .footer__logo { width: 10.9375vw; height: 3.90625vw; } } @media screen and (width <= 991px) { .footer__logo { width: 18.2291666667vw; height: 6.5104166667vw; } } @media screen and (width <= 767px) { .footer__logo { width: 35.8974358974vw; height: 12.8205128205vw; } } .footer__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .footer__address { grid-area: address; letter-spacing: 0.1em; } @media screen and (width > 1280px) { .footer__address { font-size: 0.875rem; margin-left: 2.25rem; } } @media screen and (width <= 1280px) { .footer__address { font-size: 14px; font-size: 1.09375vw; margin-left: 2.8125vw; } } @media screen and (width <= 991px) { .footer__address { font-size: 14px; font-size: 1.8229166667vw; margin-left: 0; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .footer__address { font-size: 12px; font-size: 3.0769230769vw; margin-top: 4.1025641026vw; } } .footer__address span { font-weight: bold; } @media screen and (width <= 767px) { .footer__address span { font-size: 14px; font-size: 3.5897435897vw; } } .footer__global-nav { grid-area: global-nav; display: flex; } @media screen and (width > 1280px) { .footer__global-nav { justify-content: flex-end; -moz-column-gap: 1.75rem; column-gap: 1.75rem; } } @media screen and (width <= 1280px) { .footer__global-nav { justify-content: flex-end; -moz-column-gap: 2.1875vw; column-gap: 2.1875vw; } } @media screen and (width <= 991px) { .footer__global-nav { justify-content: flex-start; -moz-column-gap: 3.6458333333vw; column-gap: 3.6458333333vw; margin-top: 8.3333333333vw; } } @media screen and (width <= 767px) { .footer__global-nav { flex-direction: column; align-items: flex-start; row-gap: 4.1025641026vw; margin-top: 9.2307692308vw; } } .footer__global-nav > li { font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .footer__global-nav > li { font-size: 0.875rem; } } @media screen and (width <= 1280px) { .footer__global-nav > li { font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .footer__global-nav > li { font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .footer__global-nav > li { font-size: 12px; font-size: 3.0769230769vw; } } .footer__info-nav { grid-area: info-nav; display: flex; align-items: center; } @media screen and (width > 1280px) { .footer__info-nav { justify-content: flex-end; -moz-column-gap: 1.5rem; column-gap: 1.5rem; margin-top: 1.25rem; } } @media screen and (width <= 1280px) { .footer__info-nav { justify-content: flex-end; -moz-column-gap: 1.875vw; column-gap: 1.875vw; margin-top: 1.5625vw; } } @media screen and (width <= 991px) { .footer__info-nav { justify-content: flex-start; -moz-column-gap: 3.125vw; column-gap: 3.125vw; margin-top: 3.125vw; } } @media screen and (width <= 767px) { .footer__info-nav { -moz-column-gap: 0; column-gap: 0; row-gap: 4.1025641026vw; margin-top: 12.3076923077vw; flex-wrap: wrap; } } .footer__info-nav > li { letter-spacing: 0.04em; } @media screen and (width > 1280px) { .footer__info-nav > li { font-size: 0.75rem; } } @media screen and (width <= 1280px) { .footer__info-nav > li { font-size: 12px; font-size: 0.9375vw; } } @media screen and (width <= 991px) { .footer__info-nav > li { font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .footer__info-nav > li { font-size: 10px; font-size: 2.5641025641vw; width: 50%; } } .footer__sns { grid-area: sns; display: flex; align-items: center; } @media screen and (width > 1280px) { .footer__sns { justify-content: flex-end; -moz-column-gap: 1.5rem; column-gap: 1.5rem; margin-top: 2.125rem; } } @media screen and (width <= 1280px) { .footer__sns { justify-content: flex-end; -moz-column-gap: 1.875vw; column-gap: 1.875vw; margin-top: 2.65625vw; } } @media screen and (width <= 991px) { .footer__sns { -moz-column-gap: 3.125vw; column-gap: 3.125vw; margin-top: 0; } } @media screen and (width <= 767px) { .footer__sns { -moz-column-gap: 6.1538461538vw; column-gap: 6.1538461538vw; margin-top: 10.2564102564vw; } } .footer__copyright { grid-area: copyright; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .footer__copyright { font-size: 0.75rem; margin-top: auto; } } @media screen and (width <= 1280px) { .footer__copyright { font-size: 12px; font-size: 0.9375vw; margin-top: 1.875vw; } } @media screen and (width <= 991px) { .footer__copyright { font-size: 10px; font-size: 1.3020833333vw; margin-top: 7.8125vw; } } @media screen and (width <= 767px) { .footer__copyright { font-size: 10px; font-size: 2.5641025641vw; margin-top: 10.2564102564vw; } } /* --------------------------------------- Section -----------------------------------------*/ .section__wrapper { margin-inline: auto; width: 100%; } @media screen and (width > 1280px) { .section__wrapper { max-width: 70rem; } } @media screen and (width <= 1280px) { .section__wrapper { max-width: 87.5vw; } } @media screen and (width <= 991px) { .section__wrapper { max-width: 79.1666666667vw; } } @media screen and (width <= 767px) { .section__wrapper { max-width: 79.4871794872vw; } } @media screen and (width > 1280px) { .section__head { margin-bottom: 3.75rem; } } @media screen and (width <= 1280px) { .section__head { margin-bottom: 4.6875vw; } } @media screen and (width <= 991px) { .section__head { margin-bottom: 7.8125vw; } } @media screen and (width <= 767px) { .section__head { margin-bottom: 10.7692307692vw; } } .section__title { text-align: center; font-weight: bold; letter-spacing: 0.1em; line-height: 1.5; } @media screen and (width > 1280px) { .section__title { font-size: 1.875rem; } } @media screen and (width <= 1280px) { .section__title { font-size: 30px; font-size: 2.34375vw; } } @media screen and (width <= 991px) { .section__title { font-size: 30px; font-size: 3.90625vw; } } @media screen and (width <= 767px) { .section__title { font-size: 20px; font-size: 5.1282051282vw; } } .section__title .-sm { font-weight: normal; display: block; letter-spacing: 0.1em; } @media screen and (width > 1280px) { .section__title .-sm { font-size: 1.125rem; } } @media screen and (width <= 1280px) { .section__title .-sm { font-size: 18px; font-size: 1.40625vw; } } @media screen and (width <= 991px) { .section__title .-sm { font-size: 18px; font-size: 2.34375vw; } } @media screen and (width <= 767px) { .section__title .-sm { font-size: 12px; font-size: 3.0769230769vw; } } /* --------------------------------------- Breadcrumb -----------------------------------------*/ @media screen and (width > 1280px) { .breadcrumb { padding-top: 5.75rem; } } @media screen and (width <= 1280px) { .breadcrumb { padding-top: 7.1875vw; } } @media screen and (width <= 991px) { .breadcrumb { padding-top: 10.4166666667vw; } } @media screen and (width <= 767px) { .breadcrumb { padding-top: 15.8974358974vw; } } .breadcrumb__wrapper { margin-inline: auto; } @media screen and (width > 1280px) { .breadcrumb__wrapper { width: calc(100% - 10rem); } } @media screen and (width <= 1280px) { .breadcrumb__wrapper { width: 100%; padding: 0 1.875vw 0 3.125vw; } } @media screen and (width <= 991px) { .breadcrumb__wrapper { padding: 0 4.1666666667vw 0 5.2083333333vw; } } @media screen and (width <= 767px) { .breadcrumb__wrapper { padding: 0 6.1538461538vw; } } .breadcrumb__list { display: flex; align-items: center; } @media screen and (width > 1280px) { .breadcrumb__list { -moz-column-gap: 0.5rem; column-gap: 0.5rem; } } @media screen and (width <= 1280px) { .breadcrumb__list { -moz-column-gap: 0.625vw; column-gap: 0.625vw; } } @media screen and (width <= 991px) { .breadcrumb__list { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; } } @media screen and (width <= 767px) { .breadcrumb__list { -moz-column-gap: 1.0256410256vw; column-gap: 1.0256410256vw; } } .breadcrumb__item { letter-spacing: 0.1em; } @media screen and (width > 1280px) { .breadcrumb__item { font-size: 0.75rem; } } @media screen and (width <= 1280px) { .breadcrumb__item { font-size: 0.9375vw; } } @media screen and (width <= 991px) { .breadcrumb__item { font-size: 1.4322916667vw; } } @media screen and (width <= 767px) { .breadcrumb__item { font-size: 2.5641025641vw; } } .breadcrumb__item:not(:last-child) { flex-shrink: 0; } .breadcrumb__item:not(:last-child)::after { content: ">"; color: #646464; } .breadcrumb__item.is-active { color: #909090; } /* --------------------------------------- Blog Card -----------------------------------------*/ @media screen and (width > 1280px) { .blog-card { padding-right: 2rem; } } @media screen and (width <= 1280px) { .blog-card { padding-right: 2.5vw; } } @media screen and (width <= 991px) { .blog-card { padding-right: 2.0833333333vw; } } @media screen and (width <= 767px) { .blog-card { padding-right: 4.1025641026vw; } } .blog-card__link { display: block; } .blog-card__img { width: 100%; aspect-ratio: 16/9; } .blog-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-card__info { display: flex; align-items: center; } @media screen and (width > 1280px) { .blog-card__info { -moz-column-gap: 1rem; column-gap: 1rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .blog-card__info { -moz-column-gap: 1.25vw; column-gap: 1.25vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .blog-card__info { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; margin-top: 1.0416666667vw; } } @media screen and (width <= 767px) { .blog-card__info { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; margin-top: 2.0512820513vw; } } .blog-card__date { letter-spacing: 0.04em; } @media screen and (width > 1280px) { .blog-card__date { font-size: 0.8125rem; } } @media screen and (width <= 1280px) { .blog-card__date { font-size: 13px; font-size: 1.015625vw; } } @media screen and (width <= 991px) { .blog-card__date { font-size: 13px; font-size: 1.6927083333vw; } } @media screen and (width <= 767px) { .blog-card__date { font-size: 8px; font-size: 2.0512820513vw; } } .blog-card__category { letter-spacing: 0.04em; font-weight: bold; } @media screen and (width > 1280px) { .blog-card__category { font-size: 0.875rem; } } @media screen and (width <= 1280px) { .blog-card__category { font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .blog-card__category { font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .blog-card__category { font-size: 10px; font-size: 2.5641025641vw; } } .blog-card__title { letter-spacing: 0.04em; font-weight: bold; } @media screen and (width > 1280px) { .blog-card__title { font-size: 1rem; } } @media screen and (width <= 1280px) { .blog-card__title { font-size: 16px; font-size: 1.25vw; } } @media screen and (width <= 991px) { .blog-card__title { font-size: 16px; font-size: 2.0833333333vw; } } @media screen and (width <= 767px) { .blog-card__title { font-size: 14px; font-size: 3.5897435897vw; } } /* --------------------------------------- Case Card -----------------------------------------*/ .case-card { position: relative; } .case-card__head { display: flex; justify-content: space-between; } @media screen and (width <= 991px) { .case-card__head { flex-direction: column-reverse; } } @media screen and (width > 1280px) { .case-card__heading { padding-left: 7.5rem; } } @media screen and (width <= 1280px) { .case-card__heading { padding-left: 9.375vw; } } @media screen and (width <= 991px) { .case-card__heading { padding-left: 5.2083333333vw; margin-top: 4.1666666667vw; } } @media screen and (width <= 767px) { .case-card__heading { padding-inline: 10.2564102564vw; margin-top: 6.1538461538vw; } } .case-card__num { display: inline-block; background-color: var(--cl-text); color: var(--cl-white); text-transform: uppercase; font-weight: bold; letter-spacing: 0.15em; position: relative; } @media screen and (width > 1280px) { .case-card__num { height: 1.5rem; font-size: 0.875rem; padding: 0 0.75rem; } } @media screen and (width <= 1280px) { .case-card__num { height: 1.875vw; font-size: 14px; font-size: 1.09375vw; padding: 0 0.9375vw; } } @media screen and (width <= 991px) { .case-card__num { height: 3.125vw; font-size: 14px; font-size: 1.8229166667vw; padding: 0 1.5625vw; } } @media screen and (width <= 767px) { .case-card__num { height: 6.1538461538vw; font-size: 14px; font-size: 3.5897435897vw; padding: 0 3.0769230769vw; } } .case-card__num::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent var(--cl-text); position: absolute; top: 0; transform: translateX(-0.0625rem); } @media screen and (width > 1280px) { .case-card__num::after { right: -0.75rem; border-width: 0.75rem 0 0.75rem 0.75rem; } } @media screen and (width <= 1280px) { .case-card__num::after { right: -0.9375vw; border-width: 0.9375vw 0 0.9375vw 0.9375vw; } } @media screen and (width <= 991px) { .case-card__num::after { right: -1.5625vw; border-width: 1.5625vw 0 1.5625vw 1.5625vw; } } @media screen and (width <= 767px) { .case-card__num::after { right: -3.0769230769vw; border-width: 3.0769230769vw 0 3.0769230769vw 3.0769230769vw; } } .case-card__user { font-weight: bold; letter-spacing: 0.1em; } @media screen and (width > 1280px) { .case-card__user { font-size: 1rem; margin-top: 0.5rem; } } @media screen and (width <= 1280px) { .case-card__user { font-size: 16px; font-size: 1.25vw; margin-top: 0.625vw; } } @media screen and (width <= 991px) { .case-card__user { font-size: 14px; font-size: 1.8229166667vw; margin-top: 1.0416666667vw; } } @media screen and (width <= 767px) { .case-card__user { font-size: 12px; font-size: 3.0769230769vw; margin-top: 2.0512820513vw; } } .case-card__title { font-weight: bold; letter-spacing: 0.04em; line-height: 1.6; } @media screen and (width > 1280px) { .case-card__title { font-size: 1.875rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .case-card__title { font-size: 30px; font-size: 2.34375vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .case-card__title { font-size: 26px; font-size: 3.3854166667vw; margin-top: 1.0416666667vw; } } @media screen and (width <= 767px) { .case-card__title { font-size: 18px; font-size: 4.6153846154vw; margin-top: 4.1025641026vw; } } .case-card__data { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; } @media screen and (width > 1280px) { .case-card__data { -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.75rem; margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .case-card__data { -moz-column-gap: 0.9375vw; column-gap: 0.9375vw; row-gap: 0.9375vw; margin-top: 2.5vw; } } @media screen and (width <= 991px) { .case-card__data { -moz-column-gap: 1.5625vw; column-gap: 1.5625vw; row-gap: 1.5625vw; margin-top: 2.6041666667vw; } } @media screen and (width <= 767px) { .case-card__data { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; row-gap: 2.0512820513vw; margin-top: 6.1538461538vw; } } .case-card__data dt { text-align: center; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .case-card__data dt { border: #c3c3c3 0.0625rem solid; width: 5.5rem; height: 1.5rem; font-size: 0.875rem; } } @media screen and (width <= 1280px) { .case-card__data dt { border: #c3c3c3 0.078125vw solid; width: 6.875vw; height: 1.875vw; font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .case-card__data dt { border: #c3c3c3 0.1302083333vw solid; width: 10.15625vw; height: 2.6041666667vw; font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .case-card__data dt { border: #c3c3c3 0.2564102564vw solid; width: 18.4615384615vw; height: 5.1282051282vw; font-size: 11px; font-size: 2.8205128205vw; } } .case-card__data dd { letter-spacing: 0.04em; } @media screen and (width > 1280px) { .case-card__data dd { font-size: 0.875rem; } } @media screen and (width <= 1280px) { .case-card__data dd { font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .case-card__data dd { font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .case-card__data dd { font-size: 11px; font-size: 2.8205128205vw; } } .case-card__img { grid-area: img; overflow: hidden; flex-shrink: 0; } @media screen and (width > 1280px) { .case-card__img { width: 37.5rem; height: 21.6875rem; border-radius: 0.5rem 0 0 0.5rem; } } @media screen and (width <= 1280px) { .case-card__img { width: 46.875vw; height: 27.109375vw; border-radius: 0.625vw 0 0 0.625vw; } } @media screen and (width <= 991px) { .case-card__img { width: 94.7916666667vw; height: 41.6666666667vw; border-radius: 1.0416666667vw 0 0 1.0416666667vw; margin-left: auto; } } @media screen and (width <= 767px) { .case-card__img { width: 100%; height: 57.6923076923vw; border-radius: 3.0769230769vw 3.0769230769vw 0 0; } } .case-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .case-card__body { width: 100%; margin-inline: auto; box-sizing: border-box; display: grid; justify-content: space-between; background-color: #f6f6f6; } @media screen and (width > 1280px) { .case-card__body { grid-template-columns: repeat(2, 25rem); max-width: 55.625rem; margin-top: 4rem; border: #c3c3c3 0.0625rem solid; border-radius: 0.25rem; } } @media screen and (width <= 1280px) { .case-card__body { grid-template-columns: repeat(2, 31.25vw); max-width: 69.53125vw; margin-top: 5vw; border: #c3c3c3 0.078125vw solid; border-radius: 0.3125vw; } } @media screen and (width <= 991px) { .case-card__body { grid-template-columns: repeat(2, 41.015625vw); max-width: 89.5833333333vw; margin-top: 4.1666666667vw; border: #c3c3c3 0.1302083333vw solid; border-radius: 0.5208333333vw; } } @media screen and (width <= 767px) { .case-card__body { grid-template-columns: 1fr; max-width: 79.4871794872vw; margin-top: 8.2051282051vw; border: #c3c3c3 0.2564102564vw solid; border-radius: 1.0256410256vw; } } .case-card__item--before { position: relative; background-color: var(--cl-white); border-radius: 0.25rem 0 0 0.25rem; } @media screen and (width > 1280px) { .case-card__item--before { padding: 2rem 0 2rem 1.5rem; } } @media screen and (width <= 1280px) { .case-card__item--before { padding: 2.5vw 0 2.5vw 1.875vw; } } @media screen and (width <= 991px) { .case-card__item--before { padding: 3.125vw 0 3.125vw 3.125vw; } } @media screen and (width <= 767px) { .case-card__item--before { padding: 6.1538461538vw; border-radius: 1.0256410256vw 1.0256410256vw 0 0; } } .case-card__item--before::before { content: ""; display: block; clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: var(--cl-white); height: 100%; position: absolute; top: 0; z-index: 2; } @media screen and (width > 1280px) { .case-card__item--before::before { width: 5.625rem; right: -5.625rem; } } @media screen and (width <= 1280px) { .case-card__item--before::before { width: 7.03125vw; right: -7.03125vw; } } @media screen and (width <= 991px) { .case-card__item--before::before { width: 7.5520833333vw; right: -7.5520833333vw; } } @media screen and (width <= 767px) { .case-card__item--before::before { clip-path: polygon(0 0, 50% 100%, 100% 0); width: 100%; height: 10.2564102564vw; top: auto; bottom: -10.2564102564vw; right: auto; left: 0; } } .case-card__item--before::after { content: ""; display: block; clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: #c3c3c3; height: 100%; position: absolute; top: 0; z-index: 1; } @media screen and (width > 1280px) { .case-card__item--before::after { width: 5.625rem; right: -5.6875rem; } } @media screen and (width <= 1280px) { .case-card__item--before::after { width: 7.03125vw; right: -7.109375vw; } } @media screen and (width <= 991px) { .case-card__item--before::after { width: 7.5520833333vw; right: -7.6822916667vw; } } @media screen and (width <= 767px) { .case-card__item--before::after { clip-path: polygon(0 0, 50% 100%, 100% 0); width: 100%; height: 10.2564102564vw; top: auto; bottom: -10.3846153846vw; right: auto; left: 0; } } .case-card__item--after { background-color: #f6f6f6; border-radius: 0 0.25rem 0.25rem 0; } @media screen and (width > 1280px) { .case-card__item--after { padding: 2rem 1.5rem; } } @media screen and (width <= 1280px) { .case-card__item--after { padding: 2.5vw 1.875vw; } } @media screen and (width <= 991px) { .case-card__item--after { padding: 3.125vw; } } @media screen and (width <= 767px) { .case-card__item--after { padding: 16.4102564103vw 1.5rem 6.1538461538vw; border-radius: 0 1.0256410256vw 1.0256410256vw 0; } } .case-card__item-wrapper { position: relative; } .case-card__item-subject { text-align: center; letter-spacing: 0.04em; line-height: 1; } @media screen and (width > 1280px) { .case-card__item-subject { font-size: 1.4375rem; } } @media screen and (width <= 1280px) { .case-card__item-subject { font-size: 23px; font-size: 1.796875vw; } } @media screen and (width <= 991px) { .case-card__item-subject { font-size: 18px; font-size: 2.34375vw; } } @media screen and (width <= 767px) { .case-card__item-subject { font-size: 18px; font-size: 4.6153846154vw; } } .case-card__item-list { display: flex; flex-direction: column; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .case-card__item-list { row-gap: 0.75rem; font-size: 1rem; margin-top: 2rem; } } @media screen and (width <= 1280px) { .case-card__item-list { row-gap: 0.9375vw; font-size: 16px; font-size: 1.25vw; margin-top: 2.5vw; } } @media screen and (width <= 991px) { .case-card__item-list { row-gap: 1.0416666667vw; font-size: 13px; font-size: 1.6927083333vw; margin-top: 2.6041666667vw; } } @media screen and (width <= 767px) { .case-card__item-list { row-gap: 2.0512820513vw; font-size: 14px; font-size: 3.5897435897vw; margin-top: 4.1025641026vw; } } .case-card__item-list > li { letter-spacing: 0.04em; position: relative; } @media screen and (width > 1280px) { .case-card__item-list > li { font-size: 1rem; padding-left: 1.5rem; } } @media screen and (width <= 1280px) { .case-card__item-list > li { font-size: 16px; font-size: 1.25vw; padding-left: 1.875vw; } } @media screen and (width <= 991px) { .case-card__item-list > li { font-size: 13px; font-size: 1.6927083333vw; padding-left: 2.34375vw; } } @media screen and (width <= 767px) { .case-card__item-list > li { font-size: 14px; font-size: 3.5897435897vw; padding-left: 4.6153846154vw; } } .case-card__item-list > li::before { content: "●"; display: block; position: absolute; top: 0; left: 0; } .case-card .case-card__item--before .case-card__item-list > li::before { content: "○"; } .case-card .case-card__item--after .case-card__item-list > li::before { content: "●"; } .case-card__btn-wrapper { position: absolute; } @media screen and (width > 1280px) { .case-card__btn-wrapper { bottom: -1.5625rem; right: 6.375rem; } } @media screen and (width <= 1280px) { .case-card__btn-wrapper { bottom: -1.953125vw; right: 7.96875vw; } } @media screen and (width <= 991px) { .case-card__btn-wrapper { bottom: -5.2083333333vw; right: 3.125vw; } } @media screen and (width <= 767px) { .case-card__btn-wrapper { bottom: -14.358974359vw; right: 6.1538461538vw; } } /* --------------------------------------- CTA Card -----------------------------------------*/ .cta-card { background-color: var(--cl-white); border-color: var(--cl-text); border-style: solid; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; margin-inline: auto; cursor: pointer; } @media screen and (width > 1280px) { .cta-card { max-width: 60.8125rem; border-width: 0.375rem; border-radius: 0.5rem; align-items: center; box-shadow: 0.1875rem 0.375rem 1rem rgba(0, 0, 0, 0.16); } } @media screen and (width <= 1280px) { .cta-card { max-width: 76.015625vw; border-width: 0.46875vw; border-radius: 0.625vw; align-items: center; box-shadow: 0.234375vw 0.46875vw 1.25vw rgba(0, 0, 0, 0.16); } } @media screen and (width <= 991px) { .cta-card { max-width: 89.5833333333vw; border-width: 0.78125vw; border-radius: 1.0416666667vw; box-shadow: 0.390625vw 0.78125vw 2.0833333333vw rgba(0, 0, 0, 0.16); } } @media screen and (width <= 767px) { .cta-card { max-width: 79.4871794872vw; border-width: 1.5384615385vw; border-radius: 2.0512820513vw; flex-direction: column-reverse; box-shadow: 0.7692307692vw 1.5384615385vw 4.1025641026vw rgba(0, 0, 0, 0.16); } } @media screen and (width > 1280px) { .cta-card__inner { padding-left: 3.375rem; } } @media screen and (width <= 1280px) { .cta-card__inner { padding-left: 4.21875vw; } } @media screen and (width <= 991px) { .cta-card__inner { padding-left: 4.4270833333vw; } } @media screen and (width <= 767px) { .cta-card__inner { padding: 4.1025641026vw 4.6153846154vw 8.2051282051vw; } } .cta-card__text { grid-area: text; letter-spacing: 0.04em; line-height: 1.5; } @media screen and (width > 1280px) { .cta-card__text--sm { font-size: 1.125rem; } } @media screen and (width <= 1280px) { .cta-card__text--sm { font-size: 18px; font-size: 1.40625vw; } } @media screen and (width <= 991px) { .cta-card__text--sm { font-size: 16px; font-size: 2.0833333333vw; } } @media screen and (width <= 767px) { .cta-card__text--sm { font-size: 12px; font-size: 3.0769230769vw; } } @media screen and (width > 1280px) { .cta-card__text--md { font-size: 1.25rem; } } @media screen and (width <= 1280px) { .cta-card__text--md { font-size: 20px; font-size: 1.5625vw; } } @media screen and (width <= 991px) { .cta-card__text--md { font-size: 17px; font-size: 2.2135416667vw; } } @media screen and (width <= 767px) { .cta-card__text--md { font-size: 15px; font-size: 3.8461538462vw; } } @media screen and (width > 1280px) { .cta-card__text--lg { font-size: 1.375rem; } } @media screen and (width <= 1280px) { .cta-card__text--lg { font-size: 22px; font-size: 1.71875vw; } } @media screen and (width <= 991px) { .cta-card__text--lg { font-size: 19px; font-size: 2.4739583333vw; } } @media screen and (width <= 767px) { .cta-card__text--lg { font-size: 14px; font-size: 3.5897435897vw; } } @media screen and (width > 1280px) { .cta-card__text--xl { font-size: 1.75rem; } } @media screen and (width <= 1280px) { .cta-card__text--xl { font-size: 28px; font-size: 2.1875vw; } } @media screen and (width <= 991px) { .cta-card__text--xl { font-size: 26px; font-size: 3.3854166667vw; } } @media screen and (width <= 767px) { .cta-card__text--xl { font-size: 17px; font-size: 4.358974359vw; } } @media screen and (width > 1280px) { .cta-card__text--under { margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .cta-card__text--under { margin-top: 1.875vw; } } @media screen and (width <= 991px) { .cta-card__text--under { margin-top: 2.6041666667vw; } } @media screen and (width <= 767px) { .cta-card__text--under { margin-top: 5.1282051282vw; } } .cta-card__text .-spacer { display: block; } @media screen and (width > 1280px) { .cta-card__text .-spacer { margin-bottom: 0.5rem; } } @media screen and (width <= 1280px) { .cta-card__text .-spacer { margin-bottom: 0.625vw; } } @media screen and (width <= 991px) { .cta-card__text .-spacer { margin-bottom: 0.78125vw; } } @media screen and (width <= 767px) { .cta-card__text .-spacer { margin-bottom: 2.0512820513vw; } } .cta-card__text-sub { line-height: 1.5; } @media screen and (width > 1280px) { .cta-card__text-sub { font-size: 1rem; } } @media screen and (width <= 1280px) { .cta-card__text-sub { font-size: 16px; font-size: 1.25vw; } } @media screen and (width <= 991px) { .cta-card__text-sub { font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .cta-card__text-sub { font-size: 13px; font-size: 3.3333333333vw; } } @media screen and (width > 1280px) { .cta-card__btn { -moz-column-gap: 1rem; column-gap: 1rem; margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .cta-card__btn { -moz-column-gap: 1.25vw; column-gap: 1.25vw; margin-top: 1.875vw; } } @media screen and (width <= 991px) { .cta-card__btn { -moz-column-gap: 1.5625vw; column-gap: 1.5625vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .cta-card__btn { -moz-column-gap: 3.0769230769vw; column-gap: 3.0769230769vw; margin-top: 4.1025641026vw; } } @media (any-hover: hover) { .cta-card__btn:hover { opacity: 1 !important; } } .cta-card__btn::after { content: ""; background-image: url("../images/parts/arrow-right-w.svg"); background-repeat: no-repeat; background-size: contain; transform: translateY(0.0625rem); } @media screen and (width > 1280px) { .cta-card__btn::after { width: 1.1875rem; height: 0.75rem; } } @media screen and (width <= 1280px) { .cta-card__btn::after { width: 1.484375vw; height: 0.9375vw; } } @media screen and (width <= 991px) { .cta-card__btn::after { width: 2.4739583333vw; height: 1.5625vw; } } @media screen and (width <= 767px) { .cta-card__btn::after { width: 4.8717948718vw; height: 3.0769230769vw; } } .cta-card__btn--chat::after { background-image: url("../images/parts/icon-chat.svg"); } @media screen and (width > 1280px) { .cta-card__btn--chat::after { width: 1.875rem; height: 1.5625rem; } } @media screen and (width <= 1280px) { .cta-card__btn--chat::after { width: 2.34375vw; height: 1.953125vw; } } @media screen and (width <= 991px) { .cta-card__btn--chat::after { width: 3.90625vw; height: 3.2552083333vw; } } @media screen and (width <= 767px) { .cta-card__btn--chat::after { width: 6.4102564103vw; height: 5.1282051282vw; } } .cta-card__img { grid-area: img; } @media screen and (width > 1280px) { .cta-card__img { width: 27.75rem; height: 18rem; } } @media screen and (width <= 1280px) { .cta-card__img { width: 34.6875vw; height: 22.5vw; } } @media screen and (width <= 991px) { .cta-card__img { width: 30.5989583333vw; height: 32.6822916667vw; } } @media screen and (width <= 767px) { .cta-card__img { width: 76.4102564103vw; height: 39.4871794872vw; } } .cta-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* --------------------------------------- 選ばれる理由 Card -----------------------------------------*/ .reason-card { border: 0.0625rem solid #c3c3c3; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "icon title" "icon btn"; box-sizing: border-box; margin-inline: auto; position: relative; cursor: pointer; transition: var(--transition); } @media screen and (width > 1280px) { .reason-card { -moz-column-gap: 2.5rem; column-gap: 2.5rem; width: 39.375rem; border-radius: 0.5rem; padding: 2rem 4rem; } } @media screen and (width <= 1280px) { .reason-card { -moz-column-gap: 3.125vw; column-gap: 3.125vw; width: 49.21875vw; border-radius: 0.625vw; padding: 2.5vw 5vw; } } @media screen and (width <= 991px) { .reason-card { -moz-column-gap: 5.2083333333vw; column-gap: 5.2083333333vw; width: 79.1666666667vw; border-radius: 1.0416666667vw; padding: 4.1666666667vw 5.7291666667vw 4.1666666667vw 9.1145833333vw; } } @media screen and (width <= 767px) { .reason-card { -moz-column-gap: 4.6153846154vw; column-gap: 4.6153846154vw; width: 79.4871794872vw; border-radius: 2.0512820513vw; padding: 6.1538461538vw; } } .reason-card__num { display: block; position: absolute; } @media screen and (width > 1280px) { .reason-card__num { width: 50; height: 50; top: -1.5625rem; left: -1.5625rem; } } @media screen and (width <= 1280px) { .reason-card__num { width: 3.90625vw; height: 3.90625vw; top: -1.953125vw; left: -1.953125vw; } } @media screen and (width <= 991px) { .reason-card__num { width: 6.5104166667vw; height: 6.5104166667vw; top: -3.2552083333vw; left: -3.2552083333vw; } } @media screen and (width <= 767px) { .reason-card__num { width: 7.6923076923vw; height: 7.6923076923vw; top: -3.8461538462vw; left: -3.8461538462vw; } } .reason-card__num img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .reason-card__icon { grid-area: icon; margin-block: auto; } @media screen and (width > 1280px) { .reason-card__icon { width: 6.25rem; height: 6.25rem; } } @media screen and (width <= 1280px) { .reason-card__icon { width: 7.8125vw; height: 7.8125vw; } } @media screen and (width <= 991px) { .reason-card__icon { width: 13.0208333333vw; height: 13.0208333333vw; } } @media screen and (width <= 767px) { .reason-card__icon { width: 15.3846153846vw; height: 15.3846153846vw; margin: 0; } } .reason-card__title { grid-area: title; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .reason-card__title { font-size: 1.25rem; } } @media screen and (width <= 1280px) { .reason-card__title { font-size: 20px; font-size: 1.5625vw; } } @media screen and (width <= 991px) { .reason-card__title { font-size: 20px; font-size: 2.6041666667vw; } } @media screen and (width <= 767px) { .reason-card__title { font-size: 16px; font-size: 4.1025641026vw; } } .reason-card__btn { grid-area: btn; margin-left: auto; cursor: pointer; } @media screen and (width > 1280px) { .reason-card__btn { border: var(--cl-text) 0.125rem solid; width: 6.25rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .reason-card__btn { border: var(--cl-text) 0.15625vw solid; width: 7.8125vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .reason-card__btn { border: var(--cl-text) 0.2604166667vw solid; width: 13.0208333333vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .reason-card__btn { border: var(--cl-text) 0.5128205128vw solid; width: 25.641025641vw; margin-top: 4.1025641026vw; } } @media (any-hover: hover) { .reason-card:hover { opacity: var(--opacity); } .reason-card:hover .reason-card__btn { background-color: var(--cl-text); color: var(--cl-white); } } /* --------------------------------------- サービスの特徴 Card -----------------------------------------*/ .feature-card { border: 0.0625rem solid #c3c3c3; display: grid; position: relative; box-sizing: border-box; } @media screen and (width > 1280px) { .feature-card { grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; grid-template-areas: "icon" "title" "text"; padding: 3.25rem 1.875rem 2rem; min-height: 30.625rem; } } @media screen and (width <= 1280px) { .feature-card { grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; grid-template-areas: "icon" "title" "text"; padding: 4.0625vw 2.34375vw 2.5vw; min-height: 38.28125vw; } } @media screen and (width <= 991px) { .feature-card { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "icon title" "icon text"; justify-content: center; align-items: baseline; -moz-column-gap: 5.9895833333vw; column-gap: 5.9895833333vw; padding: 5.2083333333vw 5.2083333333vw 5.2083333333vw; width: 79.1666666667vw; margin-inline: auto; min-height: 33.8541666667vw; } } @media screen and (width <= 767px) { .feature-card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "icon" "title" "text"; padding: 8.2051282051vw 5.1282051282vw 10.2564102564vw; width: 79.4871794872vw; height: 87.1794871795vw; } } .feature-card::before { content: ""; display: block; position: absolute; top: -0.0625rem; left: -0.0625rem; } @media screen and (width > 1280px) { .feature-card::before { width: 1.125rem; height: 1.125rem; background-image: linear-gradient(135deg, var(--cl-text) 0.8125rem, transparent 0); } } @media screen and (width <= 1280px) { .feature-card::before { width: 1.40625vw; height: 1.40625vw; background-image: linear-gradient(135deg, var(--cl-text) 1.015625vw, transparent 0); } } @media screen and (width <= 991px) { .feature-card::before { width: 2.34375vw; height: 2.34375vw; background-image: linear-gradient(135deg, var(--cl-text) 1.6927083333vw, transparent 0); } } @media screen and (width <= 767px) { .feature-card::before { width: 4.6153846154vw; height: 4.6153846154vw; background-image: linear-gradient(135deg, var(--cl-text) 3.3333333333vw, transparent 0); } } .feature-card__icon { grid-area: icon; margin-inline: auto; } @media screen and (width > 1280px) { .feature-card__icon { width: 6.25rem; height: 6.25rem; } } @media screen and (width <= 1280px) { .feature-card__icon { width: 7.8125vw; height: 7.8125vw; } } @media screen and (width <= 991px) { .feature-card__icon { width: 13.0208333333vw; height: 13.0208333333vw; margin-block: auto; } } @media screen and (width <= 767px) { .feature-card__icon { width: 15.3846153846vw; height: 15.3846153846vw; } } .feature-card__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .feature-card__title { grid-area: title; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .feature-card__title { font-size: 1.125rem; text-align: center; margin-block: 2.25rem 1.3125rem; } } @media screen and (width <= 1280px) { .feature-card__title { font-size: 18px; font-size: 1.40625vw; text-align: center; margin-block: 2.8125vw 1.640625vw; } } @media screen and (width <= 991px) { .feature-card__title { font-size: 18px; font-size: 2.34375vw; text-align: left; margin-block: 0 2.0833333333vw; } } @media screen and (width <= 767px) { .feature-card__title { font-size: 16px; font-size: 4.1025641026vw; text-align: center; margin-block: 4.1025641026vw; margin-left: 0; } } .feature-card__title .-highlight { background: linear-gradient(transparent 70%, #f0f0f0 30%); } @media screen and (width > 1280px) { .feature-card__title .-highlight { font-size: 1.4375rem; } } @media screen and (width <= 1280px) { .feature-card__title .-highlight { font-size: 23px; font-size: 1.796875vw; } } @media screen and (width <= 991px) { .feature-card__title .-highlight { font-size: 22px; font-size: 2.8645833333vw; } } @media screen and (width <= 767px) { .feature-card__title .-highlight { font-size: 18px; font-size: 4.6153846154vw; } } @media screen and (width > 1280px) { .feature-card__title .-sm { font-size: 1.125rem; } } @media screen and (width <= 1280px) { .feature-card__title .-sm { font-size: 18px; font-size: 1.40625vw; } } @media screen and (width <= 991px) { .feature-card__title .-sm { font-size: 18px; font-size: 2.34375vw; } } @media screen and (width <= 767px) { .feature-card__title .-sm { font-size: 16px; font-size: 4.1025641026vw; } } .feature-card__text { grid-area: text; letter-spacing: 0.04em; line-height: 2; } @media screen and (width > 1280px) { .feature-card__text { font-size: 1rem; } } @media screen and (width <= 1280px) { .feature-card__text { font-size: 16px; font-size: 1.25vw; } } @media screen and (width <= 991px) { .feature-card__text { font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .feature-card__text { font-size: 13px; font-size: 3.3333333333vw; } } /* --------------------------------------- お客様の声 Card -----------------------------------------*/ .voice-card { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--cl-white); box-sizing: border-box; } @media screen and (width > 1280px) { .voice-card { width: 23.75rem; min-height: 9.375rem; padding: 1rem 1.5rem; } } @media screen and (width <= 1280px) { .voice-card { width: 29.6875vw; min-height: 11.71875vw; padding: 1.25vw 1.875vw; } } @media screen and (width <= 991px) { .voice-card { width: 49.4791666667vw; min-height: 19.53125vw; padding: 2.0833333333vw 3.125vw; } } @media screen and (width <= 767px) { .voice-card { width: 67.9487179487vw; min-height: 28.9743589744vw; padding: 4.1025641026vw; } } .voice-card__title { font-weight: bold; line-height: 1.5; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .voice-card__title { font-size: 0.875rem; } } @media screen and (width <= 1280px) { .voice-card__title { font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .voice-card__title { font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .voice-card__title { font-size: 10px; font-size: 2.5641025641vw; } } .voice-card__title strong { font-weight: 900; } @media screen and (width > 1280px) { .voice-card__title strong { font-size: 0.9375rem; } } @media screen and (width <= 1280px) { .voice-card__title strong { font-size: 15px; font-size: 1.171875vw; } } @media screen and (width <= 991px) { .voice-card__title strong { font-size: 15px; font-size: 1.953125vw; } } @media screen and (width <= 767px) { .voice-card__title strong { font-size: 12px; font-size: 3.0769230769vw; } } .voice-card__user { display: flex; align-items: center; margin-left: auto; } @media screen and (width > 1280px) { .voice-card__user { -moz-column-gap: 0.25rem; column-gap: 0.25rem; } } @media screen and (width <= 1280px) { .voice-card__user { -moz-column-gap: 0.3125vw; column-gap: 0.3125vw; } } @media screen and (width <= 991px) { .voice-card__user { -moz-column-gap: 1.5625vw; column-gap: 1.5625vw; } } @media screen and (width <= 767px) { .voice-card__user { -moz-column-gap: 4.1025641026vw; column-gap: 4.1025641026vw; } } @media screen and (width > 1280px) { .voice-card__user-img { width: 2.875rem; height: 2.875rem; } } @media screen and (width <= 1280px) { .voice-card__user-img { width: 3.59375vw; height: 3.59375vw; } } @media screen and (width <= 991px) { .voice-card__user-img { width: 5.9895833333vw; height: 5.9895833333vw; } } @media screen and (width <= 767px) { .voice-card__user-img { width: 9.2307692308vw; height: 9.2307692308vw; } } .voice-card__user-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .voice-card__user-name { letter-spacing: 0.1em; } @media screen and (width > 1280px) { .voice-card__user-name { font-size: 0.75rem; } } @media screen and (width <= 1280px) { .voice-card__user-name { font-size: 12px; font-size: 0.9375vw; } } @media screen and (width <= 991px) { .voice-card__user-name { font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .voice-card__user-name { font-size: 8px; font-size: 2.0512820513vw; } } /* --------------------------------------- 選ばれる理由モーダル -----------------------------------------*/ .modal-reason { position: fixed; z-index: 5000; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(255, 255, 255, 0.8); overflow-y: auto; opacity: 0; visibility: hidden; transition: 0.3s; display: grid; place-content: center; } .modal-reason__container { background-color: var(--cl-white); box-sizing: border-box; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; } @media screen and (width > 1280px) { .modal-reason__container { border: #c3c3c3 0.0625rem solid; max-width: 53.75rem; max-height: calc(100dvh - 5rem); padding: 3.75rem 4rem 5rem; } } @media screen and (width <= 1280px) { .modal-reason__container { border: #c3c3c3 0.078125vw solid; max-width: 67.1875vw; max-height: calc(100dvh - 6.25vw); padding: 4.6875vw 5vw 6.25vw; } } @media screen and (width <= 991px) { .modal-reason__container { border: #c3c3c3 0.1302083333vw solid; max-width: 79.1666666667vw; max-height: calc(100dvh - 10.4166666667vw); padding: 5.2083333333vw 5.2083333333vw 8.3333333333vw; } } @media screen and (width <= 767px) { .modal-reason__container { border: #c3c3c3 0.2564102564vw solid; max-width: 87.6923076923vw; max-height: calc(100dvh - 16.4102564103vw); padding: 10.2564102564vw 6.1538461538vw; } } .modal-reason__heading { display: flex; align-items: center; letter-spacing: 0.1em; font-weight: bold; } @media screen and (width > 1280px) { .modal-reason__heading { -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-size: 0.875rem; } } @media screen and (width <= 1280px) { .modal-reason__heading { -moz-column-gap: 0.625vw; column-gap: 0.625vw; font-size: 14px; font-size: 1.09375vw; } } @media screen and (width <= 991px) { .modal-reason__heading { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .modal-reason__heading { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 14px; font-size: 3.5897435897vw; } } .modal-reason__num { display: inline-block; } @media screen and (width > 1280px) { .modal-reason__num { width: 1.875rem; height: 1.875rem; } } @media screen and (width <= 1280px) { .modal-reason__num { width: 2.34375vw; height: 2.34375vw; } } @media screen and (width <= 991px) { .modal-reason__num { width: 3.90625vw; height: 3.90625vw; } } @media screen and (width <= 767px) { .modal-reason__num { width: 7.6923076923vw; height: 7.6923076923vw; } } .modal-reason__num img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .modal-reason__title { font-weight: bold; line-height: 1.5; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .modal-reason__title { font-size: 1.625rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .modal-reason__title { font-size: 26px; font-size: 2.03125vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .modal-reason__title { font-size: 26px; font-size: 3.3854166667vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .modal-reason__title { font-size: 16px; font-size: 4.1025641026vw; margin-top: 6.1538461538vw; } } @media screen and (width > 1280px) { .modal-reason__body { margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .modal-reason__body { margin-top: 1.875vw; } } @media screen and (width <= 991px) { .modal-reason__body { margin-top: 3.125vw; } } @media screen and (width <= 767px) { .modal-reason__body { margin-top: 6.1538461538vw; } } .modal-reason__images { display: flex; justify-content: space-between; } @media screen and (width > 1280px) { .modal-reason__images { -moz-column-gap: 2rem; column-gap: 2rem; } } @media screen and (width <= 1280px) { .modal-reason__images { -moz-column-gap: 2.5vw; column-gap: 2.5vw; } } @media screen and (width <= 991px) { .modal-reason__images { -moz-column-gap: 3.125vw; column-gap: 3.125vw; } } @media screen and (width <= 767px) { .modal-reason__images { flex-direction: column; -moz-column-gap: 0; column-gap: 0; row-gap: 2.0512820513vw; } } .modal-reason__image { overflow: hidden; } @media screen and (width > 1280px) { .modal-reason__image { width: 21.875rem; height: 14.6875rem; border-radius: 0.5rem; } } @media screen and (width <= 1280px) { .modal-reason__image { width: 27.34375vw; height: 18.359375vw; border-radius: 0.625vw; } } @media screen and (width <= 991px) { .modal-reason__image { width: 32.6822916667vw; height: 21.875vw; border-radius: 1.0416666667vw; } } @media screen and (width <= 767px) { .modal-reason__image { width: 75.3846153846vw; height: 50.5128205128vw; border-radius: 2.0512820513vw; } } .modal-reason__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .modal-reason__text { letter-spacing: 0.04em; line-height: 1.5; } @media screen and (width > 1280px) { .modal-reason__text { font-size: 1rem; margin-top: 1.5rem; } } @media screen and (width <= 1280px) { .modal-reason__text { margin-top: 1.875vw; font-size: 16px; font-size: 1.25vw; } } @media screen and (width <= 991px) { .modal-reason__text { margin-top: 3.125vw; font-size: 14px; font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .modal-reason__text { margin-top: 4.1025641026vw; font-size: 13px; font-size: 3.3333333333vw; } } @media screen and (width > 1280px) { .modal-reason__footer { margin-top: 4.5rem; padding-inline: 1.5rem; } } @media screen and (width <= 1280px) { .modal-reason__footer { margin-top: 5.625vw; padding-inline: 1.875vw; } } @media screen and (width <= 991px) { .modal-reason__footer { margin-top: 8.3333333333vw; padding-inline: 2.0833333333vw; } } @media screen and (width <= 767px) { .modal-reason__footer { margin-top: 10.2564102564vw; padding-inline: 0; } } .modal-reason__navi { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } @media screen and (width <= 767px) { .modal-reason__navi { display: grid; grid-template-areas: "prev next" "close close"; } } .modal-reason__navi-prev { grid-area: prev; } .modal-reason__navi-next { grid-area: next; } .modal-reason__navi-close { grid-area: close; } .modal-reason__navi-link { display: flex; align-items: center; font-weight: bold; } @media screen and (width > 1280px) { .modal-reason__navi-link { -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-size: 0.75rem; } } @media screen and (width <= 1280px) { .modal-reason__navi-link { -moz-column-gap: 0.625vw; column-gap: 0.625vw; font-size: 12px; font-size: 0.9375vw; } } @media screen and (width <= 991px) { .modal-reason__navi-link { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .modal-reason__navi-link { -moz-column-gap: 2.3076923077vw; column-gap: 2.3076923077vw; font-size: 12px; font-size: 3.0769230769vw; } } .modal-reason__navi-link--prev::before { content: ""; background-image: url("../../images/parts/chevron-left.svg"); display: block; background-repeat: no-repeat; background-size: contain; } @media screen and (width > 1280px) { .modal-reason__navi-link--prev::before { width: 0.625rem; height: 1.25rem; } } @media screen and (width <= 1280px) { .modal-reason__navi-link--prev::before { width: 0.78125vw; height: 1.5625vw; } } @media screen and (width <= 991px) { .modal-reason__navi-link--prev::before { width: 1.3020833333vw; height: 2.6041666667vw; } } @media screen and (width <= 767px) { .modal-reason__navi-link--prev::before { width: 2.5641025641vw; height: 5.1282051282vw; } } .modal-reason__navi-link--next::after { content: ""; background-image: url("../../images/parts/chevron-right.svg"); display: block; background-repeat: no-repeat; background-size: contain; } @media screen and (width > 1280px) { .modal-reason__navi-link--next::after { width: 0.625rem; height: 1.25rem; } } @media screen and (width <= 1280px) { .modal-reason__navi-link--next::after { width: 0.78125vw; height: 1.5625vw; } } @media screen and (width <= 991px) { .modal-reason__navi-link--next::after { width: 1.3020833333vw; height: 2.6041666667vw; } } @media screen and (width <= 767px) { .modal-reason__navi-link--next::after { width: 2.5641025641vw; height: 5.1282051282vw; } } .modal-reason__close { display: inline-block; font-weight: bold; letter-spacing: 0.2em; } @media screen and (width > 1280px) { .modal-reason__close { width: 9.375rem; height: 2.625rem; font-size: 1rem; border: var(--cl-text) 0.125rem solid; } } @media screen and (width <= 1280px) { .modal-reason__close { width: 11.71875vw; height: 3.28125vw; font-size: 16px; font-size: 1.25vw; border: var(--cl-text) 0.15625vw solid; } } @media screen and (width <= 991px) { .modal-reason__close { width: 19.53125vw; height: 5.46875vw; font-size: 16px; font-size: 2.0833333333vw; border: var(--cl-text) 0.2604166667vw solid; } } @media screen and (width <= 767px) { .modal-reason__close { width: 38.4615384615vw; height: 10.7692307692vw; font-size: 16px; font-size: 4.1025641026vw; border: var(--cl-text) 0.5128205128vw solid; margin: 10.2564102564vw auto 0; } } @media (any-hover: hover) { .modal-reason__close:hover { cursor: pointer; background-color: var(--cl-text); color: var(--cl-white); } } .modal-reason.is_active { opacity: 1; visibility: visible; } /* --------------------------------------- Button -----------------------------------------*/ .btn { display: flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: var(--cl-white); color: var(--cl-text); font-weight: bold; letter-spacing: 0.04em; box-sizing: border-box; transition: var(--transition); } @media (any-hover: hover) { .btn:hover { opacity: var(--opacity); } } .btn--black { background-color: var(--cl-text); color: var(--cl-white); } @media (any-hover: hover) { .btn--black:hover { color: var(--cl-white); } } .btn--lg { width: 100%; } @media screen and (width > 1280px) { .btn--lg { max-width: 26.875rem; height: 4.5rem; font-size: 1.375rem; } } @media screen and (width <= 1280px) { .btn--lg { max-width: 33.59375vw; height: 5.625vw; font-size: 22px; font-size: 1.71875vw; } } @media screen and (width <= 991px) { .btn--lg { max-width: 40.3645833333vw; height: 7.8125vw; font-size: 16px; font-size: 2.0833333333vw; } } @media screen and (width <= 767px) { .btn--lg { max-width: 79.4871794872vw; height: 15.3846153846vw; font-size: 16px; font-size: 4.1025641026vw; } } @media screen and (width > 1280px) { .btn--md { font-size: 1rem; max-width: 22.9375rem; height: 3.875rem; padding: 1rem 2rem; } } @media screen and (width <= 1280px) { .btn--md { font-size: 16px; font-size: 1.25vw; max-width: 28.671875vw; height: 4.84375vw; padding: 1.25vw 2.5vw; } } @media screen and (width <= 991px) { .btn--md { font-size: 14px; font-size: 1.8229166667vw; max-width: 42.8385416667vw; height: 6.7708333333vw; padding: 2.0833333333vw 4.1666666667vw; } } @media screen and (width <= 767px) { .btn--md { font-size: 12px; font-size: 3.0769230769vw; max-width: 100%; height: 12.8205128205vw; padding: 4.1025641026vw 4.1025641026vw; } } @media screen and (width > 1280px) { .btn--sm { -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-size: 0.75rem; min-width: 6.25rem; padding: 0.25rem 1rem 0.3125rem 1rem; } .btn--sm i { transform: translateY(0.125rem); } } @media screen and (width <= 1280px) { .btn--sm { -moz-column-gap: 0.625vw; column-gap: 0.625vw; font-size: 12px; font-size: 0.9375vw; min-width: 7.8125vw; padding: 0.3125vw 1.25vw 0.390625vw 1.25vw; } .btn--sm i { transform: translateY(0.15625vw); } } @media screen and (width <= 991px) { .btn--sm { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; font-size: 12px; font-size: 1.5625vw; min-width: 13.0208333333vw; padding: 0.5208333333vw 2.0833333333vw 0.6510416667vw 2.0833333333vw; } .btn--sm i { transform: translateY(0.2604166667vw); } } @media screen and (width <= 767px) { .btn--sm { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; min-width: 25.641025641vw; padding: 1.0256410256vw 4.1025641026vw 1.2820512821vw 4.1025641026vw; } .btn--sm i { transform: translateY(0.5128205128vw); } } .btn--shadow { box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16); } .btn-more { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; border-radius: 50%; background-color: var(--cl-text); color: var(--cl-white); font-weight: bold; box-sizing: border-box; } @media screen and (width > 1280px) { .btn-more { row-gap: 0.75rem; width: 7.5rem; height: 7.5rem; font-size: 0.9375rem; } } @media screen and (width <= 1280px) { .btn-more { row-gap: 0.9375vw; width: 9.375vw; height: 9.375vw; font-size: 15px; font-size: 1.171875vw; } } @media screen and (width <= 991px) { .btn-more { row-gap: 1.0416666667vw; width: 10.4166666667vw; height: 10.4166666667vw; font-size: 12px; font-size: 1.5625vw; } } @media screen and (width <= 767px) { .btn-more { row-gap: 2.0512820513vw; width: 20.5128205128vw; height: 20.5128205128vw; font-size: 12px; font-size: 3.0769230769vw; } } @media (any-hover: hover) { .btn-more:hover { color: var(--cl-white); } } .btn-more::after { content: ""; background-image: url("../images/parts/arrow-right-w.svg"); background-repeat: no-repeat; background-size: contain; margin-inline: auto; } @media screen and (width > 1280px) { .btn-more::after { width: 1.125rem; height: 0.8125rem; } } @media screen and (width <= 1280px) { .btn-more::after { width: 1.40625vw; height: 1.015625vw; } } @media screen and (width <= 991px) { .btn-more::after { width: 2.34375vw; height: 1.6927083333vw; } } @media screen and (width <= 767px) { .btn-more::after { width: 4.6153846154vw; height: 3.3333333333vw; } } /* --------------------------------------- Form -----------------------------------------*/ label { letter-spacing: 0.04em; } @media screen and (width > 1280px) { label { font-size: 1rem; } } @media screen and (width <= 1280px) { label { font-size: 16px; font-size: 1.25vw; } } @media screen and (width <= 991px) { label { font-size: 16px; font-size: 2.0833333333vw; } } @media screen and (width <= 767px) { label { font-size: 16px; font-size: 4.1025641026vw; } } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } input[type=text], input[type=tel], input[type=email] { border: #f5f5f5 solid 0.125rem; background-color: var(--cl-white); } @media screen and (width > 1280px) { input[type=text], input[type=tel], input[type=email] { height: 4.5rem; padding-inline: 1.5rem; border-radius: 0.25rem; font-size: 1.125rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { input[type=text], input[type=tel], input[type=email] { height: 5.625vw; padding-inline: 1.875vw; border-radius: 0.3125vw; font-size: 18px; font-size: 1.40625vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { input[type=text], input[type=tel], input[type=email] { height: 9.375vw; padding-inline: 3.125vw; border-radius: 0.5208333333vw; font-size: 18px; font-size: 2.34375vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { input[type=text], input[type=tel], input[type=email] { height: 18.4615384615vw; padding-inline: 6.1538461538vw; border-radius: 1.0256410256vw; font-size: 18px; font-size: 4.6153846154vw; margin-top: 4.1025641026vw; } } input[type=text]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=email]::-moz-placeholder { letter-spacing: 0.04em; color: #ccd2d9; } input[type=text]::placeholder, input[type=tel]::placeholder, input[type=email]::placeholder { letter-spacing: 0.04em; color: #ccd2d9; } input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus { outline: none; border: #c9e0ff solid 0.125rem; } input[type=checkbox] { background-color: var(--cl-white); border: var(--cl-text) solid 0.125rem; position: relative; } @media screen and (width > 1280px) { input[type=checkbox] { border-radius: 0.25rem; width: 1.75rem; height: 1.75rem; } } @media screen and (width <= 1280px) { input[type=checkbox] { border-radius: 0.3125vw; width: 2.1875vw; height: 2.1875vw; } } @media screen and (width <= 991px) { input[type=checkbox] { border-radius: 0.5208333333vw; width: 3.6458333333vw; height: 3.6458333333vw; } } @media screen and (width <= 767px) { input[type=checkbox] { border-radius: 1.0256410256vw; width: 7.1794871795vw; height: 7.1794871795vw; } } input[type=checkbox]:checked { background-color: var(--cl-text); } input[type=checkbox]:checked::before { content: ""; position: absolute; top: 0.375rem; left: 0.25rem; width: 1rem; height: 0.5rem; border-bottom: 0.125rem solid var(--cl-white); border-left: 0.125rem solid var(--cl-white); transform: rotate(-45deg); } input[type=radio] { background-color: var(--cl-white); border: var(--cl-text) solid 0.125rem; border-radius: 50%; position: relative; } @media screen and (width > 1280px) { input[type=radio] { width: 1.75rem; height: 1.75rem; } } @media screen and (width <= 1280px) { input[type=radio] { width: 2.1875vw; height: 2.1875vw; } } @media screen and (width <= 991px) { input[type=radio] { width: 3.6458333333vw; height: 3.6458333333vw; } } @media screen and (width <= 767px) { input[type=radio] { width: 7.1794871795vw; height: 7.1794871795vw; } } input[type=radio]:checked { background-color: var(--cl-white); } input[type=radio]:checked::before { content: ""; position: absolute; border-radius: 50%; background-color: var(--cl-text); } @media screen and (width > 1280px) { input[type=radio]:checked::before { width: 1rem; height: 1rem; top: 0.25rem; left: 0.25rem; } } @media screen and (width <= 1280px) { input[type=radio]:checked::before { width: 1.25vw; height: 1.25vw; top: 0.3125vw; left: 0.3125vw; } } @media screen and (width <= 991px) { input[type=radio]:checked::before { width: 2.0833333333vw; height: 2.0833333333vw; top: 0.5208333333vw; left: 0.5208333333vw; } } @media screen and (width <= 767px) { input[type=radio]:checked::before { width: 4.1025641026vw; height: 4.1025641026vw; top: 1.0256410256vw; left: 1.0256410256vw; } } input[type=submit] { cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: var(--cl-text); border-radius: 9999px; color: var(--cl-white); font-weight: bold; text-align: center; letter-spacing: 0.04em; width: 100%; box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16); } @media screen and (width > 1280px) { input[type=submit] { max-width: 14.375rem; height: 3.3125rem; } } @media screen and (width <= 1280px) { input[type=submit] { max-width: 17.96875vw; height: 4.140625vw; } } @media screen and (width <= 991px) { input[type=submit] { max-width: 29.9479166667vw; height: 6.9010416667vw; } } @media screen and (width <= 767px) { input[type=submit] { max-width: 58.9743589744vw; height: 13.5897435897vw; } } select { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--cl-white); line-height: 1.5; background-image: url("../images/parts/icon-arrow-select.svg"); background-repeat: no-repeat; } @media screen and (width > 1280px) { select { background-size: 0.875rem 0.75rem; background-position: right 1.5rem center; padding: 1.5rem 3rem 1.5rem 1.5rem; border-radius: 0.25rem; font-size: 1rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { select { background-size: 1.09375vw 0.9375vw; background-position: right 1.875vw center; padding: 1.875vw 3.75vw 1.875vw 1.875vw; border-radius: 0.3125vw; font-size: 16px; font-size: 1.25vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { select { background-size: 1.8229166667vw 1.5625vw; background-position: right 3.125vw center; padding: 3.125vw 6.25vw 3.125vw 3.125vw; border-radius: 0.5208333333vw; font-size: 16px; font-size: 2.0833333333vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { select { background-size: 3.5897435897vw 3.0769230769vw; background-position: right 6.1538461538vw center; padding: 6.1538461538vw 12.3076923077vw 6.1538461538vw 6.1538461538vw; border-radius: 1.0256410256vw; font-size: 16px; font-size: 4.1025641026vw; margin-top: 4.1025641026vw; } } select:focus { outline: none; border: #c9e0ff solid 0.125rem; } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background-color: var(--cl-white); resize: vertical; line-height: 1.5; } @media screen and (width > 1280px) { textarea { height: 11.25rem; padding: 1.5rem; border-radius: 0.25rem; font-size: 1.125rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { textarea { height: 14.0625vw; padding: 1.875vw; border-radius: 0.3125vw; font-size: 18px; font-size: 1.40625vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { textarea { height: 23.4375vw; padding: 3.125vw; border-radius: 0.5208333333vw; font-size: 18px; font-size: 2.34375vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { textarea { height: 46.1538461538vw; padding: 6.1538461538vw; border-radius: 1.0256410256vw; font-size: 18px; font-size: 4.6153846154vw; margin-top: 4.1025641026vw; } } textarea::-moz-placeholder { letter-spacing: 0.04em; color: #ccd2d9; } textarea::placeholder { letter-spacing: 0.04em; color: #ccd2d9; } textarea:focus { outline: none; border: #c9e0ff solid 0.125rem; } input[type=text]:disabled { background-color: #e2e2e2; } .search-form { border: #c3c3c3 solid 1px; border-radius: 9999px; display: grid; place-content: center; grid-template-columns: 1fr auto; } @media screen and (width > 1280px) { .search-form { width: 16.25rem; height: 2.25rem; padding: 0.5rem 1rem; } } @media screen and (width <= 1280px) { .search-form { width: 20.3125vw; height: 2.8125vw; padding: 0.625vw 1.25vw; } } @media screen and (width <= 991px) { .search-form { width: 33.8541666667vw; height: 4.6875vw; padding: 1.0416666667vw 2.0833333333vw; } } @media screen and (width <= 767px) { .search-form { width: 100%; height: 9.2307692308vw; padding: 2.0512820513vw 4.1025641026vw; } } @media screen and (width > 1280px) { .search-form input { font-size: 0.875rem; } } @media screen and (width <= 1280px) { .search-form input { font-size: 1.09375vw; } } @media screen and (width <= 991px) { .search-form input { font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .search-form input { font-size: 1rem; } } .search-form input::-moz-placeholder { color: #909090; } .search-form input::placeholder { color: #909090; } .search-form button { cursor: pointer; } @media screen and (width > 1280px) { .search-form button { width: 1.25rem; height: 1.25rem; } } @media screen and (width <= 1280px) { .search-form button { width: 1.5625vw; height: 1.5625vw; } } @media screen and (width <= 991px) { .search-form button { width: 2.6041666667vw; height: 2.6041666667vw; } } @media screen and (width <= 767px) { .search-form button { width: 5.1282051282vw; height: 5.1282051282vw; } } .search-form button img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform: translateY(2px); } /* --------------------------------------- Company Member's Card -----------------------------------------*/ .company-member-card { background-color: var(--cl-white); } .company-member-card__img { width: 100%; aspect-ratio: 16/9; } .company-member-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .company-member-card__info { display: flex; align-items: center; } @media screen and (width > 1280px) { .company-member-card__info { -moz-column-gap: 1rem; column-gap: 1rem; } } @media screen and (width <= 1280px) { .company-member-card__info { -moz-column-gap: 1.25vw; column-gap: 1.25vw; } } @media screen and (width <= 991px) { .company-member-card__info { -moz-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw; } } @media screen and (width <= 767px) { .company-member-card__info { -moz-column-gap: 2.0512820513vw; column-gap: 2.0512820513vw; } } .company-member-card__role { letter-spacing: 0.04em; } @media screen and (width > 1280px) { .company-member-card__role { font-size: 0.8125rem; } } @media screen and (width <= 1280px) { .company-member-card__role { font-size: 1.015625vw; } } @media screen and (width <= 991px) { .company-member-card__role { font-size: 1.5625vw; } } @media screen and (width <= 767px) { .company-member-card__role { font-size: 3.0769230769vw; } } .company-member-card__name { font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .company-member-card__name { font-size: 0.9375rem; } } @media screen and (width <= 1280px) { .company-member-card__name { font-size: 1.171875vw; } } @media screen and (width <= 991px) { .company-member-card__name { font-size: 1.8229166667vw; } } @media screen and (width <= 767px) { .company-member-card__name { font-size: 3.5897435897vw; } } .company-member-card__description { letter-spacing: 0.04em; line-height: 1.8; } @media screen and (width > 1280px) { .company-member-card__description { font-size: 0.875rem; margin-top: 0.25rem; } } @media screen and (width <= 1280px) { .company-member-card__description { font-size: 1.09375vw; margin-top: 0.3125vw; } } @media screen and (width <= 991px) { .company-member-card__description { font-size: 1.6927083333vw; margin-top: 0.78125vw; } } @media screen and (width <= 767px) { .company-member-card__description { font-size: 3.0769230769vw; margin-top: 1.5384615385vw; } } .company-member-card__sns { display: flex; align-items: center; justify-content: flex-end; } @media screen and (width > 1280px) { .company-member-card__sns { -moz-column-gap: 1.5rem; column-gap: 1.5rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .company-member-card__sns { -moz-column-gap: 1.875vw; column-gap: 1.875vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .company-member-card__sns { -moz-column-gap: 3.125vw; column-gap: 3.125vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .company-member-card__sns { -moz-column-gap: 6.1538461538vw; column-gap: 6.1538461538vw; margin-top: 2.0512820513vw; } } /* --------------------------------------- Case Achivement Card -----------------------------------------*/ .case-achivement-card__link { display: block; } .case-achivement-card__thumbnail { width: 100%; aspect-ratio: 16/9; } .case-achivement-card__thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .case-achivement-card__company { line-height: 1.5; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .case-achivement-card__company { font-size: 0.8125rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .case-achivement-card__company { font-size: 1.015625vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .case-achivement-card__company { font-size: 1.4322916667vw; margin-top: 1.5625vw; } } @media screen and (width <= 767px) { .case-achivement-card__company { font-size: 2.8205128205vw; margin-top: 3.0769230769vw; } } .case-achivement-card__title { font-weight: bold; letter-spacing: 0.04em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: unset; height: 3em; } @media screen and (width > 1280px) { .case-achivement-card__title { font-size: 1rem; margin-block: 0.5rem 0.75rem; } } @media screen and (width <= 1280px) { .case-achivement-card__title { font-size: 1.25vw; margin-block: 0.625vw 0.9375vw; } } @media screen and (width <= 991px) { .case-achivement-card__title { font-size: 1.8229166667vw; margin-block: 1.0416666667vw 1.5625vw; } } @media screen and (width <= 767px) { .case-achivement-card__title { font-size: 3.5897435897vw; margin-block: 2.0512820513vw; } } .case-achivement-card__category { display: flex; flex-wrap: wrap; margin-top: auto; } @media screen and (width > 1280px) { .case-achivement-card__category { gap: 0.25rem 0.5rem; } } @media screen and (width <= 1280px) { .case-achivement-card__category { gap: 0.3125vw 0.625vw; } } @media screen and (width <= 991px) { .case-achivement-card__category { gap: 0.5208333333vw 1.0416666667vw; } } @media screen and (width <= 767px) { .case-achivement-card__category { gap: 1.0256410256vw; } } .case-achivement-card__category > li { background-color: var(--cl-white); display: inline-block; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .case-achivement-card__category > li { font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 0.0625rem solid #c3c3c3; } } @media screen and (width <= 1280px) { .case-achivement-card__category > li { font-size: 0.9375vw; padding: 0.3125vw 0.625vw; border: 0.078125vw solid #c3c3c3; } } @media screen and (width <= 991px) { .case-achivement-card__category > li { font-size: 1.5625vw; padding: 0.5208333333vw 1.0416666667vw; border: 0.1302083333vw solid #c3c3c3; } } @media screen and (width <= 767px) { .case-achivement-card__category > li { font-size: 2.5641025641vw; } } /* --------------------------------------- Blog Achivement Card -----------------------------------------*/ .blog-achivement-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; align-items: center; row-gap: 0; } .blog-achivement-card__thumbnail { width: 100%; aspect-ratio: 16/9; } .blog-achivement-card__thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-achivement-card__date { display: block; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .blog-achivement-card__date { font-size: 0.8125rem; margin-top: 1rem; } } @media screen and (width <= 1280px) { .blog-achivement-card__date { font-size: 1.015625vw; margin-top: 1.25vw; } } @media screen and (width <= 991px) { .blog-achivement-card__date { font-size: 1.4322916667vw; margin-top: 2.0833333333vw; } } @media screen and (width <= 767px) { .blog-achivement-card__date { font-size: 2.8205128205vw; margin-top: 2.0512820513vw; } } .blog-achivement-card__title { font-weight: bold; letter-spacing: 0.04em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: unset; height: 3em; } @media screen and (width > 1280px) { .blog-achivement-card__title { font-size: 1rem; margin-block: 0.5rem 0.75rem; } } @media screen and (width <= 1280px) { .blog-achivement-card__title { font-size: 1.25vw; margin-block: 0.625vw 0.9375vw; } } @media screen and (width <= 991px) { .blog-achivement-card__title { font-size: 1.8229166667vw; margin-block: 1.0416666667vw 1.5625vw; } } @media screen and (width <= 767px) { .blog-achivement-card__title { font-size: 3.5897435897vw; margin-block: 2.0512820513vw; } } .blog-achivement-card__category { display: flex; flex-wrap: wrap; margin-top: auto; } @media screen and (width > 1280px) { .blog-achivement-card__category { gap: 0.25rem; } } @media screen and (width <= 1280px) { .blog-achivement-card__category { gap: 0.3125vw; } } @media screen and (width <= 991px) { .blog-achivement-card__category { gap: 0.5208333333vw; } } @media screen and (width <= 767px) { .blog-achivement-card__category { gap: 1.0256410256vw; } } .blog-achivement-card__category > li { background-color: var(--cl-white); display: inline-block; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .blog-achivement-card__category > li { font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 0.0625rem solid #c3c3c3; } } @media screen and (width <= 1280px) { .blog-achivement-card__category > li { font-size: 0.9375vw; padding: 0.3125vw 0.625vw; border: 0.078125vw solid #c3c3c3; } } @media screen and (width <= 991px) { .blog-achivement-card__category > li { font-size: 1.5625vw; padding: 0.5208333333vw 1.0416666667vw; border: 0.1302083333vw solid #c3c3c3; } } @media screen and (width <= 767px) { .blog-achivement-card__category > li { font-size: 2.5641025641vw; } } /* --------------------------------------- よく読まれている記事 -----------------------------------------*/ .blog-popular-card { flex-shrink: 0; display: block; background-color: var(--cl-white); } @media screen and (width <= 991px) { .blog-popular-card { width: 53.3854166667vw !important; padding-right: 5.2083333333vw; } } @media screen and (width <= 767px) { .blog-popular-card { width: 79.4871794872vw !important; padding-right: 2.0512820513vw; } } @media screen and (width > 1280px) { .blog-popular-card:not(:last-of-type) { margin-bottom: 1rem; } } @media screen and (width <= 1280px) { .blog-popular-card:not(:last-of-type) { margin-bottom: 1.25vw; } } @media screen and (width <= 991px) { .blog-popular-card:not(:last-of-type) { margin-bottom: 0; } } .blog-popular-card__wrapper { display: grid; align-items: center; grid-template-areas: "img category" "img title"; grid-template-rows: auto 1fr; position: relative; z-index: 0; } @media screen and (width > 1280px) { .blog-popular-card__wrapper { grid-template-columns: 7.5rem 1fr; -moz-column-gap: 1rem; column-gap: 1rem; } } @media screen and (width <= 1280px) { .blog-popular-card__wrapper { grid-template-columns: 9.375vw 1fr; -moz-column-gap: 1.25vw; column-gap: 1.25vw; } } @media screen and (width <= 991px) { .blog-popular-card__wrapper { grid-template-columns: 26.0416666667vw 1fr; -moz-column-gap: 2.0833333333vw; column-gap: 2.0833333333vw; } } @media screen and (width <= 767px) { .blog-popular-card__wrapper { grid-template-columns: 35.8974358974vw 1fr; -moz-column-gap: 4.1025641026vw; column-gap: 4.1025641026vw; } } .blog-popular-card__thumbnail { grid-area: img; aspect-ratio: 16/9; overflow: hidden; } .blog-popular-card__thumbnail a::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 10; } .blog-popular-card__thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-popular-card__category { grid-area: category; display: flex; align-items: center; flex-wrap: wrap; } @media screen and (width > 1280px) { .blog-popular-card__category { gap: 0; margin-bottom: 0.25rem; } } @media screen and (width <= 1280px) { .blog-popular-card__category { gap: 0; margin-bottom: 0.3125vw; } } @media screen and (width <= 991px) { .blog-popular-card__category { gap: 0.2604166667vw 0; margin-bottom: 0.5208333333vw; } } @media screen and (width <= 767px) { .blog-popular-card__category { gap: 0.5128205128vw 0; margin-bottom: 0.5128205128vw; } } .blog-popular-card__category > a { pointer-events: none; border: #c3c3c3 solid 0.0625rem; font-weight: bold; letter-spacing: 0.04em; display: inline-block; position: relative; } @media screen and (width > 1280px) { .blog-popular-card__category > a { padding: 0.125rem 0.375rem; font-size: 0.625rem; } } @media screen and (width <= 1280px) { .blog-popular-card__category > a { padding: 0.15625vw 0.46875vw; font-size: 0.78125vw; } } @media screen and (width <= 991px) { .blog-popular-card__category > a { padding: 0.2604166667vw 0.5208333333vw; font-size: 1.3020833333vw; } } @media screen and (width <= 767px) { .blog-popular-card__category > a { padding: 0.5128205128vw 1.0256410256vw; font-size: 2.0512820513vw; } } .blog-popular-card__category > a:not(:last-of-type):after { content: ""; position: absolute; bottom: 0; background-color: var(--cl-white); } @media screen and (width > 1280px) { .blog-popular-card__category > a:not(:last-of-type):after { width: 0.25rem; height: 0.5rem; right: -0.3125rem; } } @media screen and (width <= 1280px) { .blog-popular-card__category > a:not(:last-of-type):after { width: 0.3125vw; height: 0.625vw; right: -0.390625vw; } } @media screen and (width <= 991px) { .blog-popular-card__category > a:not(:last-of-type):after { width: 0.5208333333vw; height: 1.0416666667vw; right: -0.6510416667vw; } } @media screen and (width <= 767px) { .blog-popular-card__category > a:not(:last-of-type):after { width: 1.0256410256vw; height: 2.0512820513vw; right: -1.2820512821vw; bottom: -0.5128205128vw; } } .blog-popular-card__title { grid-area: title; font-weight: bold; letter-spacing: 0.04em; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: unset; margin-bottom: auto; } @media screen and (width > 1280px) { .blog-popular-card__title { font-size: 0.8125rem; } } @media screen and (width <= 1280px) { .blog-popular-card__title { font-size: 1.015625vw; } } @media screen and (width <= 991px) { .blog-popular-card__title { font-size: 1.5625vw; } } @media screen and (width <= 767px) { .blog-popular-card__title { font-size: 3.0769230769vw; } } /* --------------------------------------- よく読まれている記事（サイドバー用） -----------------------------------------*/ .blog-popular-card-sidebar { display: block; background-color: var(--cl-white); } @media screen and (width <= 991px) { .blog-popular-card-sidebar { width: 53.3854166667vw !important; padding-right: 5.2083333333vw; } } @media screen and (width <= 767px) { .blog-popular-card-sidebar { width: 85.641025641vw !important; padding-right: 2.0512820513vw; } } @media screen and (width > 1280px) { .blog-popular-card-sidebar:not(:last-of-type) { margin-bottom: 1rem; } } @media screen and (width <= 1280px) { .blog-popular-card-sidebar:not(:last-of-type) { margin-bottom: 1.25vw; } } @media screen and (width <= 991px) { .blog-popular-card-sidebar:not(:last-of-type) { margin-bottom: 0; } } .blog-popular-card-sidebar__wrapper { display: grid; align-items: center; grid-template-areas: "img title"; position: relative; z-index: 0; } @media screen and (width > 1280px) { .blog-popular-card-sidebar__wrapper { grid-template-columns: 7.5rem 1fr; -moz-column-gap: 1rem; column-gap: 1rem; } } @media screen and (width <= 1280px) { .blog-popular-card-sidebar__wrapper { grid-template-columns: 9.375vw 1fr; -moz-column-gap: 1.25vw; column-gap: 1.25vw; } } @media screen and (width <= 991px) { .blog-popular-card-sidebar__wrapper { grid-template-columns: 26.0416666667vw 1fr; -moz-column-gap: 2.0833333333vw; column-gap: 2.0833333333vw; } } @media screen and (width <= 767px) { .blog-popular-card-sidebar__wrapper { grid-template-columns: 35.8974358974vw 1fr; -moz-column-gap: 4.1025641026vw; column-gap: 4.1025641026vw; } } .blog-popular-card-sidebar__thumbnail { grid-area: img; aspect-ratio: 16/9; overflow: hidden; } .blog-popular-card-sidebar__thumbnail a::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 10; } .blog-popular-card-sidebar__thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-popular-card-sidebar__category { grid-area: category; display: flex; align-items: center; flex-wrap: wrap; } @media screen and (width > 1280px) { .blog-popular-card-sidebar__category { gap: 0.25rem; margin-bottom: 0.25rem; } } @media screen and (width <= 1280px) { .blog-popular-card-sidebar__category { gap: 0.3125vw; margin-bottom: 0.3125vw; } } @media screen and (width <= 991px) { .blog-popular-card-sidebar__category { gap: 0.2604166667vw 0.5208333333vw; margin-bottom: 0.5208333333vw; } } @media screen and (width <= 767px) { .blog-popular-card-sidebar__category { gap: 0.5128205128vw; margin-bottom: 0.5128205128vw; } } .blog-popular-card-sidebar__category li { border: #c3c3c3 solid 0.0625rem; font-weight: bold; letter-spacing: 0.04em; } @media screen and (width > 1280px) { .blog-popular-card-sidebar__category li { padding: 0.125rem 0.375rem; font-size: 0.625rem; } } @media screen and (width <= 1280px) { .blog-popular-card-sidebar__category li { padding: 0.15625vw 0.46875vw; font-size: 0.78125vw; } } @media screen and (width <= 991px) { .blog-popular-card-sidebar__category li { padding: 0.2604166667vw 0.5208333333vw; font-size: 1.3020833333vw; } } @media screen and (width <= 767px) { .blog-popular-card-sidebar__category li { padding: 0.5128205128vw 1.0256410256vw; font-size: 2.0512820513vw; } } .blog-popular-card-sidebar__title { grid-area: title; font-weight: bold; letter-spacing: 0.04em; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: unset; } @media screen and (width > 1280px) { .blog-popular-card-sidebar__title { font-size: 0.8125rem; } } @media screen and (width <= 1280px) { .blog-popular-card-sidebar__title { font-size: 1.015625vw; } } @media screen and (width <= 991px) { .blog-popular-card-sidebar__title { font-size: 1.5625vw; } } @media screen and (width <= 767px) { .blog-popular-card-sidebar__title { font-size: 3.0769230769vw; } } /* --------------------------------------- Pager -----------------------------------------*/ @media screen and (width > 1280px) { .pager { padding-block: 5rem 10rem; } } @media screen and (width <= 1280px) { .pager { padding-block: 6.25vw 12.5vw; } } @media screen and (width <= 991px) { .pager { padding-block: 10.4166666667vw 20.8333333333vw; } } @media screen and (width <= 767px) { .pager { padding-block: 10.2564102564vw 20.5128205128vw; } } .pager__wrapper { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1280px) { .pager__wrapper { gap: 2.5rem; } } @media screen and (width <= 1280px) { .pager__wrapper { gap: 3.125vw; } } @media screen and (width <= 991px) { .pager__wrapper { gap: 5.2083333333vw; } } @media screen and (width <= 767px) { .pager__wrapper { gap: 8.2051282051vw; } } .pager__list { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1280px) { .pager__item:not(:last-child) { margin-right: 1rem; } } @media screen and (width <= 1280px) { .pager__item:not(:last-child) { margin-right: 1.25vw; } } @media screen and (width <= 991px) { .pager__item:not(:last-child) { margin-right: 2.0833333333vw; } } @media screen and (width <= 767px) { .pager__item:not(:last-child) { margin-right: 3.0769230769vw; } } .pager__item--last { position: relative; } @media screen and (width > 1280px) { .pager__item--last { margin-left: 2rem; } } @media screen and (width <= 1280px) { .pager__item--last { margin-left: 2.5vw; } } @media screen and (width <= 991px) { .pager__item--last { margin-left: 4.1666666667vw; } } @media screen and (width <= 767px) { .pager__item--last { margin-left: 6.1538461538vw; } } .pager__item--last::before { content: "…"; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1280px) { .pager__item--last::before { left: -3rem; margin-inline: 1rem; } } @media screen and (width <= 1280px) { .pager__item--last::before { left: -3.75vw; margin-inline: 1.25vw; } } @media screen and (width <= 991px) { .pager__item--last::before { left: -6.25vw; margin-inline: 2.0833333333vw; } } @media screen and (width <= 767px) { .pager__item--last::before { left: -9.2307692308vw; margin-inline: 2.0512820513vw; } } .pager__link { border-radius: 50%; background-color: var(--cl-white); display: grid; place-content: center; letter-spacing: 0.04em; font-weight: bold; } @media screen and (width > 1280px) { .pager__link { width: 2.5rem; height: 2.5rem; border: #c3c3c3 solid 0.0625rem; font-size: 1.125rem; } } @media screen and (width <= 1280px) { .pager__link { width: 3.125vw; height: 3.125vw; border: #c3c3c3 solid 0.078125vw; font-size: 18px; font-size: 1.40625vw; } } @media screen and (width <= 991px) { .pager__link { width: 5.2083333333vw; height: 5.2083333333vw; border: #c3c3c3 solid 0.1302083333vw; font-size: 18px; font-size: 2.34375vw; } } @media screen and (width <= 767px) { .pager__link { width: 6.1538461538vw; height: 6.1538461538vw; border: #c3c3c3 solid 0.2564102564vw; font-size: 10px; font-size: 2.5641025641vw; } } @media (any-hover: hover) { .pager__link:hover { border-color: var(--cl-text); background-color: var(--cl-text); color: var(--cl-white); } } .pager__link--active { border-color: var(--cl-text); background-color: var(--cl-text); color: var(--cl-white); } @media (any-hover: hover) { .pager__link--active:hover { color: var(--cl-white); } } .pager__prev img, .pager__next img { vertical-align: middle; } @media screen and (width > 1280px) { .pagination { padding-block: 5rem 10rem; } } @media screen and (width <= 1280px) { .pagination { padding-block: 6.25vw 12.5vw; } } @media screen and (width <= 991px) { .pagination { padding-block: 10.4166666667vw 20.8333333333vw; } } @media screen and (width <= 767px) { .pagination { padding-block: 10.2564102564vw 20.5128205128vw; } } .pagination .nav-links { display: flex; align-items: center; justify-content: center; } .pagination .page-numbers { border-radius: 50%; background-color: var(--cl-white); display: grid; place-content: center; letter-spacing: 0.04em; font-weight: bold; } @media screen and (width > 1280px) { .pagination .page-numbers { width: 2.5rem; height: 2.5rem; border: #c3c3c3 solid 0.0625rem; font-size: 1.125rem; margin-right: 1rem; } } @media screen and (width <= 1280px) { .pagination .page-numbers { width: 3.125vw; height: 3.125vw; border: #c3c3c3 solid 0.078125vw; font-size: 18px; font-size: 1.40625vw; margin-right: 1.25vw; } } @media screen and (width <= 991px) { .pagination .page-numbers { width: 5.2083333333vw; height: 5.2083333333vw; border: #c3c3c3 solid 0.1302083333vw; font-size: 18px; font-size: 2.34375vw; margin-right: 2.0833333333vw; } } @media screen and (width <= 767px) { .pagination .page-numbers { width: 6.1538461538vw; height: 6.1538461538vw; border: #c3c3c3 solid 0.2564102564vw; font-size: 10px; font-size: 2.5641025641vw; margin-right: 3.0769230769vw; } } @media (any-hover: hover) { .pagination .page-numbers:hover { border-color: var(--cl-text); background-color: var(--cl-text); color: var(--cl-white); } } .pagination .page-numbers:last-child { margin-right: 0; } .pagination .page-numbers.prev, .pagination .page-numbers.dots, .pagination .page-numbers.next { border: none; } @media (any-hover: hover) { .pagination .page-numbers.prev:hover, .pagination .page-numbers.dots:hover, .pagination .page-numbers.next:hover { border-color: transparent; background-color: transparent; color: var(--cl-text); } } .pagination .page-numbers.current { border-color: var(--cl-text); background-color: var(--cl-text); color: var(--cl-white); } @media (any-hover: hover) { .pagination .page-numbers.current:hover { color: var(--cl-white); } } /* --------------------------------------- Display -----------------------------------------*/ @media screen and (width <= 991px) { .pc-only { display: none !important; } } .tab-only { display: none; } @media screen and (width <= 991px) { .tab-only { display: block; } } @media screen and (width <= 767px) { .tab-only { display: none !important; } } .sp-only { display: none; } @media screen and (width <= 767px) { .sp-only { display: block !important; } } @media screen and (width <= 767px) { .pc-tab-only { display: none !important; } } .sp-tab-only { display: none; } @media screen and (width <= 991px) { .sp-tab-only { display: block !important; } } @media screen and (width <= 991px) { .pc-sp-only { display: none; } } @media screen and (width <= 767px) { .pc-sp-only { display: block !important; } } /* --------------------------------------- Margin -----------------------------------------*/ .mt00 { margin-top: 0px !important; } .mt01 { margin-top: 1px !important; } .mt02 { margin-top: 2px !important; } .mt03 { margin-top: 3px !important; } .mt04 { margin-top: 4px !important; } .mt05 { margin-top: 5px !important; } .mt06 { margin-top: 6px !important; } .mt07 { margin-top: 7px !important; } .mt08 { margin-top: 8px !important; } .mt09 { margin-top: 9px !important; } .mt10 { margin-top: 10px !important; } .mt11 { margin-top: 11px !important; } .mt12 { margin-top: 12px !important; } .mt13 { margin-top: 13px !important; } .mt14 { margin-top: 14px !important; } .mt15 { margin-top: 15px !important; } .mt16 { margin-top: 16px !important; } .mt17 { margin-top: 17px !important; } .mt18 { margin-top: 18px !important; } .mt19 { margin-top: 19px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt45 { margin-top: 45px !important; } .mt50 { margin-top: 50px !important; } .mt55 { margin-top: 55px !important; } .mt60 { margin-top: 60px !important; } .mt65 { margin-top: 65px !important; } .mt70 { margin-top: 70px !important; } .mt75 { margin-top: 75px !important; } .mt80 { margin-top: 80px !important; } .mt85 { margin-top: 85px !important; } .mt90 { margin-top: 90px !important; } .mt95 { margin-top: 95px !important; } .mt100 { margin-top: 100px !important; } .mr00 { margin-right: 0 !important; } .mr01 { margin-right: 1px !important; } .mr02 { margin-right: 2px !important; } .mr03 { margin-right: 3px !important; } .mr04 { margin-right: 4px !important; } .mr05 { margin-right: 5px !important; } .mr06 { margin-right: 6px !important; } .mr07 { margin-right: 7px !important; } .mr08 { margin-right: 8px !important; } .mr09 { margin-right: 9px !important; } .mr10 { margin-right: 10px !important; } .mr11 { margin-right: 11px !important; } .mr12 { margin-right: 12px !important; } .mr13 { margin-right: 13px !important; } .mr14 { margin-right: 14px !important; } .mr15 { margin-right: 15px !important; } .mr16 { margin-right: 16px !important; } .mr17 { margin-right: 17px !important; } .mr18 { margin-right: 18px !important; } .mr19 { margin-right: 19px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr45 { margin-right: 45px !important; } .mr50 { margin-right: 50px !important; } .mr55 { margin-right: 55px !important; } .mr60 { margin-right: 60px !important; } .mr65 { margin-right: 65px !important; } .mr70 { margin-right: 70px !important; } .mr75 { margin-right: 75px !important; } .mr80 { margin-right: 80px !important; } .mr85 { margin-right: 85px !important; } .mr90 { margin-right: 90px !important; } .mr95 { margin-right: 95px !important; } .mr100 { margin-right: 100px !important; } .mb00 { margin-bottom: 0px !important; } .mb01 { margin-bottom: 1px !important; } .mb02 { margin-bottom: 2px !important; } .mb03 { margin-bottom: 3px !important; } .mb04 { margin-bottom: 4px !important; } .mb05 { margin-bottom: 5px !important; } .mb06 { margin-bottom: 6px !important; } .mb07 { margin-bottom: 7px !important; } .mb08 { margin-bottom: 8px !important; } .mb09 { margin-bottom: 9px !important; } .mb10 { margin-bottom: 10px !important; } .mb11 { margin-bottom: 11px !important; } .mb12 { margin-bottom: 12px !important; } .mb13 { margin-bottom: 13px !important; } .mb14 { margin-bottom: 14px !important; } .mb15 { margin-bottom: 15px !important; } .mb16 { margin-bottom: 16px !important; } .mb17 { margin-bottom: 17px !important; } .mb18 { margin-bottom: 18px !important; } .mb19 { margin-bottom: 19px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb55 { margin-bottom: 55px !important; } .mb60 { margin-bottom: 60px !important; } .mb65 { margin-bottom: 65px !important; } .mb70 { margin-bottom: 70px !important; } .mb75 { margin-bottom: 75px !important; } .mb80 { margin-bottom: 80px !important; } .mb85 { margin-bottom: 85px !important; } .mb90 { margin-bottom: 90px !important; } .mb95 { margin-bottom: 95px !important; } .mb100 { margin-bottom: 100px !important; } .mb150 { margin-bottom: 150px !important; } .ml00 { margin-left: 0px !important; } .ml01 { margin-left: 1px !important; } .ml02 { margin-left: 2px !important; } .ml03 { margin-left: 3px !important; } .ml04 { margin-left: 4px !important; } .ml05 { margin-left: 5px !important; } .ml06 { margin-left: 6px !important; } .ml07 { margin-left: 7px !important; } .ml08 { margin-left: 8px !important; } .ml09 { margin-left: 9px !important; } .ml10 { margin-left: 10px !important; } .ml11 { margin-left: 11px !important; } .ml12 { margin-left: 12px !important; } .ml13 { margin-left: 13px !important; } .ml14 { margin-left: 14px !important; } .ml15 { margin-left: 15px !important; } .ml16 { margin-left: 16px !important; } .ml17 { margin-left: 17px !important; } .ml18 { margin-left: 18px !important; } .ml19 { margin-left: 19px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml45 { margin-left: 45px !important; } .ml50 { margin-left: 50px !important; } .ml55 { margin-left: 55px !important; } .ml60 { margin-left: 60px !important; } .ml65 { margin-left: 65px !important; } .ml70 { margin-left: 70px !important; } .ml75 { margin-left: 75px !important; } .ml80 { margin-left: 80px !important; } .ml85 { margin-left: 85px !important; } .ml90 { margin-left: 90px !important; } .ml95 { margin-left: 95px !important; } .ml100 { margin-left: 100px !important; } .ma00 { margin: 0px !important; } .ma01 { margin: 1px !important; } .ma02 { margin: 2px !important; } .ma03 { margin: 3px !important; } .ma04 { margin: 4px !important; } .ma05 { margin: 5px !important; } .ma06 { margin: 6px !important; } .ma07 { margin: 7px !important; } .ma08 { margin: 8px !important; } .ma09 { margin: 9px !important; } .ma10 { margin: 10px !important; } .ma11 { margin: 11px !important; } .ma12 { margin: 12px !important; } .ma13 { margin: 13px !important; } .ma14 { margin: 14px !important; } .ma15 { margin: 15px !important; } .ma16 { margin: 16px !important; } .ma17 { margin: 17px !important; } .ma18 { margin: 18px !important; } .ma19 { margin: 19px !important; } .ma20 { margin: 20px !important; } .ma25 { margin: 25px !important; } .ma30 { margin: 30px !important; } .ma35 { margin: 35px !important; } .ma40 { margin: 40px !important; } .ma45 { margin: 45px !important; } .ma50 { margin: 50px !important; } .ma55 { margin: 55px !important; } .ma60 { margin: 60px !important; } .ma65 { margin: 65px !important; } .ma70 { margin: 70px !important; } .ma75 { margin: 75px !important; } .ma80 { margin: 80px !important; } .ma85 { margin: 85px !important; } .ma90 { margin: 90px !important; } .ma95 { margin: 95px !important; } .ma100 { margin: 100px !important; } /* --------------------------------------- Padding -----------------------------------------*/ .pt00 { padding-top: 0px !important; } .pt01 { padding-top: 1px !important; } .pt02 { padding-top: 2px !important; } .pt03 { padding-top: 3px !important; } .pt04 { padding-top: 4px !important; } .pt05 { padding-top: 5px !important; } .pt06 { padding-top: 6px !important; } .pt07 { padding-top: 7px !important; } .pt08 { padding-top: 8px !important; } .pt09 { padding-top: 9px !important; } .pt10 { padding-top: 10px !important; } .pt11 { padding-top: 11px !important; } .pt12 { padding-top: 12px !important; } .pt13 { padding-top: 13px !important; } .pt14 { padding-top: 14px !important; } .pt15 { padding-top: 15px !important; } .pt16 { padding-top: 16px !important; } .pt17 { padding-top: 17px !important; } .pt18 { padding-top: 18px !important; } .pt19 { padding-top: 19px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt45 { padding-top: 45px !important; } .pt50 { padding-top: 50px !important; } .pt55 { padding-top: 55px !important; } .pt60 { padding-top: 60px !important; } .pt65 { padding-top: 65px !important; } .pt70 { padding-top: 70px !important; } .pt75 { padding-top: 75px !important; } .pt80 { padding-top: 80px !important; } .pt85 { padding-top: 85px !important; } .pt90 { padding-top: 90px !important; } .pt95 { padding-top: 95px !important; } .pt100 { padding-top: 100px !important; } .pr00 { padding-right: 0px !important; } .pr01 { padding-right: 1px !important; } .pr02 { padding-right: 2px !important; } .pr03 { padding-right: 3px !important; } .pr04 { padding-right: 4px !important; } .pr05 { padding-right: 5px !important; } .pr06 { padding-right: 6px !important; } .pr07 { padding-right: 7px !important; } .pr08 { padding-right: 8px !important; } .pr09 { padding-right: 9px !important; } .pr10 { padding-right: 10px !important; } .pr11 { padding-right: 11px !important; } .pr12 { padding-right: 12px !important; } .pr13 { padding-right: 13px !important; } .pr14 { padding-right: 14px !important; } .pr15 { padding-right: 15px !important; } .pr16 { padding-right: 16px !important; } .pr17 { padding-right: 17px !important; } .pr18 { padding-right: 18px !important; } .pr19 { padding-right: 19px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr45 { padding-right: 45px !important; } .pr50 { padding-right: 50px !important; } .pr55 { padding-right: 55px !important; } .pr60 { padding-right: 60px !important; } .pr65 { padding-right: 65px !important; } .pr70 { padding-right: 70px !important; } .pr75 { padding-right: 75px !important; } .pr80 { padding-right: 80px !important; } .pr85 { padding-right: 85px !important; } .pr90 { padding-right: 90px !important; } .pr95 { padding-right: 95px !important; } .pr100 { padding-right: 100px !important; } .pb00 { padding-bottom: 0px !important; } .pb01 { padding-bottom: 1px !important; } .pb02 { padding-bottom: 2px !important; } .pb03 { padding-bottom: 3px !important; } .pb04 { padding-bottom: 4px !important; } .pb05 { padding-bottom: 5px !important; } .pb06 { padding-bottom: 6px !important; } .pb07 { padding-bottom: 7px !important; } .pb08 { padding-bottom: 8px !important; } .pb09 { padding-bottom: 9px !important; } .pb10 { padding-bottom: 10px !important; } .pb11 { padding-bottom: 11px !important; } .pb12 { padding-bottom: 12px !important; } .pb13 { padding-bottom: 13px !important; } .pb14 { padding-bottom: 14px !important; } .pb15 { padding-bottom: 15px !important; } .pb16 { padding-bottom: 16px !important; } .pb17 { padding-bottom: 17px !important; } .pb18 { padding-bottom: 18px !important; } .pb19 { padding-bottom: 19px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb45 { padding-bottom: 45px !important; } .pb50 { padding-bottom: 50px !important; } .pb55 { padding-bottom: 55px !important; } .pb60 { padding-bottom: 60px !important; } .pb65 { padding-bottom: 65px !important; } .pb70 { padding-bottom: 70px !important; } .pb75 { padding-bottom: 75px !important; } .pb80 { padding-bottom: 80px !important; } .pb85 { padding-bottom: 85px !important; } .pb90 { padding-bottom: 90px !important; } .pb95 { padding-bottom: 95px !important; } .pb100 { padding-bottom: 100px !important; } .pl00 { padding-left: 0px !important; } .pl01 { padding-left: 1px !important; } .pl02 { padding-left: 2px !important; } .pl03 { padding-left: 3px !important; } .pl04 { padding-left: 4px !important; } .pl05 { padding-left: 5px !important; } .pl06 { padding-left: 6px !important; } .pl07 { padding-left: 7px !important; } .pl08 { padding-left: 8px !important; } .pl09 { padding-left: 9px !important; } .pl10 { padding-left: 10px !important; } .pl11 { padding-left: 11px !important; } .pl12 { padding-left: 12px !important; } .pl13 { padding-left: 13px !important; } .pl14 { padding-left: 14px !important; } .pl15 { padding-left: 15px !important; } .pl16 { padding-left: 16px !important; } .pl17 { padding-left: 17px !important; } .pl18 { padding-left: 18px !important; } .pl19 { padding-left: 19px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl45 { padding-left: 45px !important; } .pl50 { padding-left: 50px !important; } .pl55 { padding-left: 55px !important; } .pl60 { padding-left: 60px !important; } .pl65 { padding-left: 65px !important; } .pl70 { padding-left: 70px !important; } .pl75 { padding-left: 75px !important; } .pl80 { padding-left: 80px !important; } .pl85 { padding-left: 85px !important; } .pl90 { padding-left: 90px !important; } .pl95 { padding-left: 95px !important; } .pl100 { padding-left: 100px !important; } .pa00 { padding: 0px !important; } .pa01 { padding: 1px !important; } .pa02 { padding: 2px !important; } .pa03 { padding: 3px !important; } .pa04 { padding: 4px !important; } .pa05 { padding: 5px !important; } .pa06 { padding: 6px !important; } .pa07 { padding: 7px !important; } .pa08 { padding: 8px !important; } .pa09 { padding: 9px !important; } .pa10 { padding: 10px !important; } .pa11 { padding: 11px !important; } .pa12 { padding: 12px !important; } .pa13 { padding: 13px !important; } .pa14 { padding: 14px !important; } .pa15 { padding: 15px !important; } .pa16 { padding: 16px !important; } .pa17 { padding: 17px !important; } .pa18 { padding: 18px !important; } .pa19 { padding: 19px !important; } .pa20 { padding: 20px !important; } .pa25 { padding: 25px !important; } .pa30 { padding: 30px !important; } .pa35 { padding: 35px !important; } .pa40 { padding: 40px !important; } .pa45 { padding: 45px !important; } .pa50 { padding: 50px !important; } .pa55 { padding: 55px !important; } .pa60 { padding: 60px !important; } .pa65 { padding: 65px !important; } .pa70 { padding: 70px !important; } .pa75 { padding: 75px !important; } .pa80 { padding: 80px !important; } .pa85 { padding: 85px !important; } .pa90 { padding: 90px !important; } .pa95 { padding: 95px !important; } .pa100 { padding: 100px !important; } .bold { font-weight: bold; } /*# sourceMappingURL=maps/style.css.map */