@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url(https://cdn.jsdelivr.net/npm/@exawizards/exabase-design-system-icons@1.5.0/font/exabase-design-system-icons.css); html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
} input[type=submit] {
-webkit-appearance: none;
}
:root {
--admin-bar--height: var(--wp-admin--admin-bar--height, 0px);
--header-bar--height: 64px;
--header--height: calc(var(--header-bar--height) + var(--admin-bar--height));
--bp--xs: 400px;
--bp--sm: 600px;
--bp--md: 768px;
--bp--lg: 1024px;
--bp--xl: 1280px;
--bp--2xl: 1380px;
--bp--3xl: 1440px;
--bp--content: 920px;
--bp--hd: 1920px;
--font-size--h-32: 1.5rem;
--font-size--h-24: 1.25rem;
--font-size--h-20: 1.125rem;
--font-family--noto: Noto Sans JP, sans-serif;
--font-family--inter: Inter, sans-serif;
--font-family--ei: "exabase-design-system-icons";
--font-family--default: Inter, Noto Sans JP, sans-serif;
--page--padding-x: 16px;
--sidebar--width: 100%;
}
@media print, screen and (min-width: 768px) {
:root {
--font-size--h-32: 1.75rem;
--font-size--h-24: 1.5rem;
--font-size--h-20: 1.25rem;
}
}
@media print, screen and (min-width: 1024px) {
:root {
--font-size--h-32: 2rem;
}
}
@media print, screen and (min-width: 768px) {
:root {
--page--padding-x: 24px;
}
}
@media print, screen and (min-width: 1024px) {
:root {
--page--padding-x: 32px;
}
}
@media print, screen and (min-width: 1024px) {
:root {
--sidebar--width: 240px;
}
}
@media print, screen and (min-width: 1280px) {
:root {
--sidebar--width: 340px;
}
}
@media print {
@page {
size: A4;
}
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
min-height: 100vh;
}
@media print {
html,
body {
min-width: var(--bp--lg);
}
}
html {
color: var(--color--exabase-gray-95);
font-size: 16px;
scroll-behavior: smooth;
scroll-padding-top: var(--header--height);
}
body {
min-width: var(--bp--xs);
overflow-x: clip;
background-color: white;
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding: 0;
}
body * {
font-family: var(--font-family--default);
font-feature-settings: "palt";
} #wpadminbar {
position: fixed !important;
}
b,
strong,
small,
span {
font-size: inherit;
font-family: inherit;
line-height: inherit;
font-weight: inherit;
}
b,
strong {
font-weight: bold;
}
br {
line-height: 0;
}
.l-content__body {
width: 100%;
}
.l-content__body--2cols {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5rem;
}
@media print, screen and (min-width: 1024px) {
.l-content__body--2cols {
flex-direction: row;
align-items: flex-start;
gap: 3.75rem;
}
}
@media print, screen and (min-width: 1024px) {
.l-content__body--2cols .l-content__main {
flex: 1;
}
}
@media print, screen and (min-width: 1024px) {
.l-content__body--wide-sidebar {
gap: 1rem;
--sidebar--width: 320px;
}
}
@media print, screen and (min-width: 1280px) {
.l-content__body--wide-sidebar {
--sidebar--width: 405px;
}
}
.l-content__main--bg-white {
background-color: white;
padding-block: 1.5rem;
padding-inline: 1rem;
}
@media print, screen and (min-width: 600px) {
.l-content__main--bg-white {
padding-inline: 2rem;
}
}
@media print, screen and (min-width: 768px) {
.l-content__main--bg-white {
padding-block: 2.5rem;
}
}
@media print, screen and (min-width: 1280px) {
.l-content__main--bg-white {
padding-inline: 3.75rem;
}
}
.c-breadcrumb {
overflow: hidden;
}
.c-breadcrumb ol {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0 8px;
list-style: none;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
min-width: 0;
}
.c-breadcrumb ol li {
min-width: 0;
max-width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
}
.c-breadcrumb ol li .home {
font-weight: bold;
}
.c-breadcrumb ol li a,
.c-breadcrumb ol li > span {
display: block;
max-width: 100%;
min-width: 0;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
}
.c-breadcrumb ol li a {
color: var(--color--exabase-exablue-50) !important;
}
.c-breadcrumb ol li a:hover {
text-decoration: underline;
}
.c-breadcrumb ol li br {
display: none;
}
.c-button {
--py: 0.625rem;
--px: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color--exabase-exablue-50);
border: 0;
border-radius: 100px;
font-weight: bold;
color: white !important;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.1em;
text-decoration: none !important;
padding: var(--py) var(--px);
transition: background-color ease 0.2s;
cursor: pointer;
}
.c-button:hover {
background-color: var(--color--exabase-exablue-70);
}
.c-button--outline {
background-color: white;
border: 1px solid var(--color--exabase-exablue-50);
color: var(--color--exabase-exablue-50) !important;
padding: calc(var(--py) - 1px) calc(var(--px) - 1px);
transition: all ease 0.2s;
}
.c-button--outline:hover {
background-color: var(--color--exabase-exablue-3);
border: 1px solid var(--color--exabase-exablue-70);
color: var(--color--exabase-exablue-70) !important;
}
.c-button--primary-light {
background-color: var(--color--exabase-exablue-3);
color: var(--color--exabase-gray-95) !important;
}
.c-button--primary-light:hover {
background-color: var(--color--exabase-exablue-10);
}
.c-button--black {
background-color: black;
}
.c-button--black:hover {
background-color: var(--color--exabase-gray-80);
}
.c-button--sm {
--py: 0.5rem;
--px: 1rem;
font-size: 0.8125rem;
}
.c-button--lg {
--py: 1rem;
--px: 1.5rem;
font-size: 1rem;
}
@media print, screen and (min-width: 768px) {
.c-button--lg {
font-size: 1.125rem;
}
}
.c-button--xl {
--py: 1.25rem;
--px: 2.5rem;
font-size: 1.125rem;
}
@media print, screen and (min-width: 768px) {
.c-button--xl {
font-size: 1.25rem;
}
}
.c-content {
--font-size--base: fn.pxToRem(15);
display: flex;
flex-direction: column;
gap: 2.5rem;
}
@media print, screen and (min-width: 768px) {
.c-content {
--font-size--base: fn.pxToRem(16);
}
}
.c-content h2,
.c-content h3,
.c-content h4 {
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.03em;
}
.c-content h2 {
color: var(--color--exabase-exablue-50);
font-size: 1.25rem;
}
@media print, screen and (min-width: 600px) {
.c-content h2 {
font-size: 1.375rem;
}
}
@media print, screen and (min-width: 768px) {
.c-content h2 {
font-size: 1.5rem;
}
}
.c-content h3 {
border-bottom: 1px solid var(--color--exabase-gray-10);
color: var(--color--exabase-gray-95);
font-size: 1.125rem;
padding: 0 0 0.625rem 0;
}
@media print, screen and (min-width: 600px) {
.c-content h3 {
font-size: 1.25rem;
}
}
@media print, screen and (min-width: 768px) {
.c-content h3 {
font-size: 1.375rem;
padding: 0 0 1rem 0;
}
}
.c-content h4 {
font-size: 1rem;
color: var(--color--exabase-gray-95);
}
@media print, screen and (min-width: 600px) {
.c-content h4 {
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 768px) {
.c-content h4 {
font-size: 1.125rem;
}
}
.c-content p {
font-size: var(--font-size--base);
line-height: 1.8;
letter-spacing: 0.03em;
}
.c-content p.c-content__p--note {
font-size: 0.8125rem;
}
@media print, screen and (min-width: 768px) {
.c-content p.c-content__p--note {
font-size: 0.875rem;
}
}
.c-content blockquote {
background-color: var(--color--exabase-gray-3);
padding: 1.25rem;
}
@media print, screen and (min-width: 600px) {
.c-content blockquote {
padding: 1.75rem;
}
}
.c-content a {
color: var(--color--exabase-gray-95);
text-decoration: underline;
}
.c-content a:hover {
text-decoration: none;
}
.c-content strong {
font-weight: bold;
}
.c-content mark {
background: linear-gradient(transparent 50%, var(--color--exabase-yellow-40) 50%);
color: var(--color--exabase-gray-95);
font-style: normal;
font-weight: normal;
}
.c-content sup,
.c-content sub {
font-size: 0.5em;
}
.c-content sup {
vertical-align: super;
}
.c-content sub {
vertical-align: sub;
}
.c-content figure {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: auto !important;
max-width: 100%;
}
.c-content figure figcaption {
font-size: 0.625rem;
line-height: 1.8;
text-align: center;
}
@media print, screen and (min-width: 600px) {
.c-content figure figcaption {
font-size: 0.6875rem;
}
}
@media print, screen and (min-width: 1024px) {
.c-content figure figcaption {
font-size: 0.75rem;
}
}
.c-content img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
.c-content img.aligncenter {
margin: 0 auto;
}
.c-content ul,
.c-content ol {
margin: 0 0 1.5rem 1.4em;
}
.c-content ul ul,
.c-content ul ol,
.c-content ol ul,
.c-content ol ol {
margin-bottom: 0;
}
.c-content ul li,
.c-content ol li {
font-size: var(--font-size--base);
line-height: 1.8;
}
.c-content hr {
width: 128px;
border-top: 4px solid var(--color--exabase-exablue-50);
margin: 2.5rem auto;
}
.c-content table {
border-collapse: collapse;
border-spacing: 0;
border: solid 1px var(--color--exabase-gray-10);
}
.c-content table tbody tr:not(:last-child) {
border-bottom: 1px solid var(--color--exabase-gray-10);
}
.c-content table tbody tr th,
.c-content table tbody tr td {
font-size: var(--font-size--base);
padding: 0.5rem;
}
@media print, screen and (min-width: 768px) {
.c-content table tbody tr th,
.c-content table tbody tr td {
padding: 0.75rem 1rem;
}
}
.c-content table tbody tr th:not(:last-child),
.c-content table tbody tr td:not(:last-child) {
border-right: 1px solid var(--color--exabase-gray-10);
}
.c-content table tbody tr th {
background-color: var(--color--exabase-gray-3);
font-weight: bold;
}
.c-content .js-scrollable {
max-width: 100%;
overflow-x: auto;
}
@media print, screen and (max-width: 767px) {
.c-content .js-scrollable table thead tr th, .c-content .js-scrollable table thead tr td,
.c-content .js-scrollable table tbody tr th,
.c-content .js-scrollable table tbody tr td {
white-space: nowrap;
}
}
.c-faq {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.c-faq__q {
--py: 0.75rem;
--px: 1rem;
--icon-size: 2rem;
--chevron-size: 1rem;
position: relative;
display: flex;
align-items: center;
min-height: calc(var(--py) * 2 + var(--icon-size));
background-color: var(--color--exabase-exablue-1);
border-radius: 0.25rem;
font-weight: bold;
color: var(--color--exabase-exablue-50);
font-size: 0.875rem;
padding-block: var(--py);
padding-inline: calc(var(--px) * 2 + var(--icon-size)) calc(var(--px) * 2 + var(--chevron-size));
cursor: pointer;
transition: opacity ease 0.2s;
}
@media print, screen and (min-width: 768px) {
.c-faq__q {
--py: 1rem;
--px: 1.25rem;
--icon-size: 2.5rem;
--chevron-size: 1.25rem;
}
}
@media print, screen and (min-width: 768px) {
.c-faq__q {
font-size: 1rem;
}
}
.c-faq__q:hover {
opacity: 0.75;
}
.c-faq__q::after, .c-faq__q::before {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
transform: translateY(-50%);
}
.c-faq__q::before {
left: 1rem;
content: "Q";
width: var(--icon-size);
height: var(--icon-size);
border-radius: 9999px;
background: var(--color--exabase-exablue-50);
font-size: 1.25rem;
line-height: 1;
color: white;
}
@media print, screen and (min-width: 768px) {
.c-faq__q::before {
font-size: 1.5rem;
}
}
.c-faq__q::after {
right: var(--px);
content: "\f15b";
font-size: var(--chevron-size);
font-family: var(--font-family--ei);
color: var(--color--exabase-exablue-50);
}
.c-faq__q[aria-expanded=true]::after {
content: "\f16a";
}
.c-faq__a {
display: none;
font-size: 0.875rem;
padding: 0.5rem 1.25rem;
}
@media print, screen and (min-width: 768px) {
.c-faq__a {
font-size: 1rem;
padding: 0.625rem 1.875rem;
}
}
.c-faq__a .c-content > *:last-child {
margin-bottom: 0;
}
.c-header-nav__menu {
display: flex;
gap: 0.875rem;
list-style-type: none;
}
.c-header-nav__menu > .menu-item {
position: relative;
display: flex;
align-items: center;
}
.c-header-nav__menu > .menu-item a {
display: flex;
align-items: center;
height: 100%;
font-weight: bold;
font-size: 0.875rem;
color: var(--color--exabase-exablue-50);
text-decoration: none;
line-height: 1;
letter-spacing: 0.1em;
white-space: nowrap;
padding: 0.5rem;
}
.c-header-nav__menu > .menu-item a:hover {
text-decoration: underline;
}
.c-header-nav__menu > .menu-item a:hover::after {
text-decoration: none;
}
.c-header-nav__menu > .menu-item a:not([href]) {
cursor: default;
}
.c-header-nav__menu > .menu-item a:not([href]):hover {
text-decoration: none;
}
.c-header-nav__menu > .menu-item.menu-item-has-children > a:after {
display: flex;
font-family: var(--font-family--ei);
content: "\f15b";
margin-left: 4px;
}
.c-header-nav__menu > .menu-item.menu-item-has-children:hover > .sub-menu {
display: block;
}
.c-header-nav__menu > .menu-item .sub-menu {
position: absolute;
left: calc(8px - 24px);
bottom: 0;
z-index: 1;
display: none;
min-width: calc(100% + 24px * 2);
list-style-type: none;
background-color: white;
border-radius: 8px;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
transform: translateY(100%);
padding: 16px 0;
}
.c-header-nav__menu > .menu-item .sub-menu > .menu-item > a {
display: block;
font-weight: normal;
font-size: 0.875rem;
color: var(--color--exabase-gray-95);
white-space: nowrap;
padding: 8px 24px;
}
.c-header-nav__menu > .menu-item .sub-menu > .menu-item > a:hover {
text-decoration: underline;
}
.c-hidden-element {
position: absolute !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
font-size: 1px !important;
line-height: 0 !important;
white-space: nowrap !important;
padding: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
clip: rect(0, 0, 0, 0) !important;
overflow: hidden !important;
}
.c-button, .c-hsform--s .hs-form .hs-submit .actions .hs-button.primary {
--py: 0.625rem;
--px: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color--exabase-exablue-50);
border: 0;
border-radius: 100px;
font-weight: bold;
color: white !important;
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.1em;
text-decoration: none !important;
padding: var(--py) var(--px);
transition: background-color ease 0.2s;
cursor: pointer;
}
.c-button:hover, .c-hsform--s .hs-form .hs-submit .actions .hs-button.primary:hover {
background-color: var(--color--exabase-exablue-70);
}
.c-button--outline {
background-color: white;
border: 1px solid var(--color--exabase-exablue-50);
color: var(--color--exabase-exablue-50) !important;
padding: calc(var(--py) - 1px) calc(var(--px) - 1px);
transition: all ease 0.2s;
}
.c-button--outline:hover {
background-color: var(--color--exabase-exablue-3);
border: 1px solid var(--color--exabase-exablue-70);
color: var(--color--exabase-exablue-70) !important;
}
.c-button--primary-light {
background-color: var(--color--exabase-exablue-3);
color: var(--color--exabase-gray-95) !important;
}
.c-button--primary-light:hover {
background-color: var(--color--exabase-exablue-10);
}
.c-button--black {
background-color: black;
}
.c-button--black:hover {
background-color: var(--color--exabase-gray-80);
}
.c-button--sm {
--py: 0.5rem;
--px: 1rem;
font-size: 0.8125rem;
}
.c-button--lg, .c-hsform--s .hs-form .hs-submit .actions .hs-button.primary {
--py: 1rem;
--px: 1.5rem;
font-size: 1rem;
}
@media print, screen and (min-width: 768px) {
.c-button--lg, .c-hsform--s .hs-form .hs-submit .actions .hs-button.primary {
font-size: 1.125rem;
}
}
.c-button--xl {
--py: 1.25rem;
--px: 2.5rem;
font-size: 1.125rem;
}
@media print, screen and (min-width: 768px) {
.c-button--xl {
font-size: 1.25rem;
}
}
.c-hsform--s .hs-form fieldset {
display: flex;
align-items: flex-start;
max-width: none;
margin: 0 auto;
}
.c-hsform--s .hs-form fieldset.form-columns-1 > .field {
display: grid;
grid-template-areas: "label input" "blank error";
grid-template-columns: 80px 1fr;
gap: 4px;
}
.c-hsform--s .hs-form fieldset.form-columns-1 > .field.hs-fieldtype-booleancheckbox {
grid-template-areas: "input input" "error error";
}
.c-hsform--s .hs-form fieldset.form-columns-2 {
position: relative;
display: grid;
grid-template-areas: "label input1 input2";
grid-template-columns: 80px 1fr 1fr;
gap: 4px;
}
.c-hsform--s .hs-form fieldset.form-columns-2 > .field {
display: grid;
grid-template-areas: "input" "error";
gap: 4px;
width: 100%;
}
.c-hsform--s .hs-form fieldset.form-columns-2 > .field:nth-child(1) {
grid-area: input1;
}
.c-hsform--s .hs-form fieldset.form-columns-2 > .field:nth-child(2) {
grid-area: input2;
}
.c-hsform--s .hs-form fieldset.form-columns-2 > .field:nth-child(2) > label {
display: none;
}
.c-hsform--s .hs-form fieldset.form-columns-2 > .field > label {
position: absolute;
left: 0;
top: 1em;
transform: translateY(-50%);
}
.c-hsform--s .hs-form .field {
flex: 1;
float: none;
margin-bottom: 24px;
}
.c-hsform--s .hs-form .field:last-child {
margin-right: 0;
}
@media print, screen and (max-width: 767px) {
.c-hsform--s .hs-form .field {
margin-bottom: 16px;
}
}
.c-hsform--s .hs-form .field > label {
grid-area: label;
display: flex;
gap: 2px;
align-items: center;
font-size: 0.875rem;
color: var(--color--exabase-gray-95);
}
.c-hsform--s .hs-form .field .hs-form-required {
font-size: 0.625rem;
color: var(--color--exabase-red-60);
}
.c-hsform--s .hs-form .field > .input {
grid-area: input;
display: flex;
margin-right: 0;
}
.c-hsform--s .hs-form .field input[type=text],
.c-hsform--s .hs-form .field input[type=email],
.c-hsform--s .hs-form .field input[type=tel],
.c-hsform--s .hs-form .field select,
.c-hsform--s .hs-form .field textarea {
border: 0;
background-color: var(--color--exabase-bluegray-1);
border: 1px solid var(--color--exabase-bluegray-20);
border-radius: 4px;
color: var(--color--exabase-gray-95);
font-size: 0.9375rem;
letter-spacing: 0;
width: 100% !important;
padding: 4px 8px;
}
.c-hsform--s .hs-form .field input[type=text]::placeholder,
.c-hsform--s .hs-form .field input[type=email]::placeholder,
.c-hsform--s .hs-form .field input[type=tel]::placeholder,
.c-hsform--s .hs-form .field select::placeholder,
.c-hsform--s .hs-form .field textarea::placeholder {
color: var(--color--exabase-bluegray-20);
font-size: 0.875rem;
}
.c-hsform--s .hs-form .field input[type=text][disabled],
.c-hsform--s .hs-form .field input[type=email][disabled],
.c-hsform--s .hs-form .field input[type=tel][disabled],
.c-hsform--s .hs-form .field select[disabled],
.c-hsform--s .hs-form .field textarea[disabled] {
color: var(--color--exabase-bluegray-20);
}
.c-hsform--s .hs-form .field input[type=text]:focus,
.c-hsform--s .hs-form .field input[type=email]:focus,
.c-hsform--s .hs-form .field input[type=tel]:focus,
.c-hsform--s .hs-form .field select:focus,
.c-hsform--s .hs-form .field textarea:focus {
outline-color: var(--color--exabase-exablue-50);
}
.c-hsform--s .hs-form .field input[type=text].invalid, .c-hsform--s .hs-form .field input[type=text].error,
.c-hsform--s .hs-form .field input[type=email].invalid,
.c-hsform--s .hs-form .field input[type=email].error,
.c-hsform--s .hs-form .field input[type=tel].invalid,
.c-hsform--s .hs-form .field input[type=tel].error,
.c-hsform--s .hs-form .field select.invalid,
.c-hsform--s .hs-form .field select.error,
.c-hsform--s .hs-form .field textarea.invalid,
.c-hsform--s .hs-form .field textarea.error {
border-color: var(--color--exabase-red-60);
}
.c-hsform--s .hs-form .field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(//exawizards.com/column/wp-content/themes/exa_dx_media/assets/img/common/form-select-chevron-gray20.svg);
background-position: center right 10px;
background-repeat: no-repeat;
}
.c-hsform--s .hs-form .field textarea {
height: 140px;
}
.c-hsform--s .hs-form .field .inputs-list {
list-style: none;
}
.c-hsform--s .hs-form .field .inputs-list li label {
display: flex;
align-items: flex-start;
justify-content: flex-start;
font-size: 0.8125rem;
color: var(--color--exabase-gray-40);
line-height: 1.6;
}
.c-hsform--s .hs-form .field .hs-error-msgs {
grid-area: error;
list-style: none;
}
.c-hsform--s .hs-form .field .hs-error-msgs li .hs-error-msg {
display: block;
font-size: 0.75rem;
color: var(--color--exabase-red-60);
line-height: 1.4;
}
.c-hsform--s .hs-form .hs-richtext {
margin-bottom: 12px;
}
.c-hsform--s .hs-form .hs-richtext a {
color: var(--color--exabase-exablue-50);
text-decoration: none;
}
.c-hsform--s .hs-form .hs-richtext a:hover {
text-decoration: underline;
}
.c-hsform--s .hs-form .hs-submit {
margin-top: 16px;
}
.c-hsform--s .hs-form .hs-submit .actions {
display: flex;
align-items: center;
justify-content: center;
}
.c-hsform--s .hs-form .hs-submit .actions .hs-button.primary {
width: 100%;
max-width: 240px;
}
.c-hsform--s .hs-form .hs_error_rollup {
border-radius: 4px;
border: 1px solid var(--color--exabase-red-60);
color: var(--color--exabase-red-60);
font-size: 0.875rem;
text-align: center;
margin-top: 32px;
padding: 8px;
}
.c-hsform--s .hs-form .hs_error_rollup ul {
list-style: none;
}
.c-pagination .pagination .nav-links > .page-numbers {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
@media print, screen and (min-width: 768px) {
.c-pagination .pagination .nav-links > .page-numbers {
gap: 1rem 2rem;
}
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers,
.c-pagination .pagination .nav-links > .page-numbers li .dots {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 1.125rem;
text-decoration: none;
}
@media print, screen and (min-width: 768px) {
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers,
.c-pagination .pagination .nav-links > .page-numbers li .dots {
width: 36px;
height: 36px;
font-size: 1.25rem;
}
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers:not(.prev):not(.next) {
color: var(--color--exabase-exablue-50);
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers:not(.prev):not(.next):hover {
border-bottom: 1px solid var(--color--exabase-exablue-50);
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers:not(.prev):not(.next).current {
border-bottom: 1px solid var(--color--exabase-exablue-50);
font-weight: bold;
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers.prev, .c-pagination .pagination .nav-links > .page-numbers li .page-numbers.next {
background-color: var(--color--exabase-exablue-50);
border-radius: 9999px;
font-family: var(--font-family--ei);
font-weight: bold;
color: white;
transition: background-color 0.2s ease;
}
.c-pagination .pagination .nav-links > .page-numbers li .page-numbers.prev:hover, .c-pagination .pagination .nav-links > .page-numbers li .page-numbers.next:hover {
background-color: var(--color--exabase-exablue-70);
}
.c-pagination .pagination .nav-links > .page-numbers li .dots {
color: var(--color--exabase-exablue-50);
}
.c-section-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
border-bottom: 1px solid var(--color--exabase-exablue-3);
padding-bottom: 1rem;
}
@media print, screen and (min-width: 600px) {
.c-section-header {
gap: 0.875rem;
}
}
@media print, screen and (min-width: 1024px) {
.c-section-header {
gap: 1rem;
}
}
.c-section-header__title {
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.05em;
}
@media print, screen and (min-width: 600px) {
.c-section-header__title {
font-size: 1.75rem;
}
}
@media print, screen and (min-width: 1024px) {
.c-section-header__title {
font-size: 1.875rem;
}
}
.c-side-nav__menu {
display: flex;
flex-direction: column;
gap: 1.5rem;
list-style-type: none;
}
.c-side-nav__menu > .menu-item {
display: flex;
flex-direction: column;
align-items: start;
gap: 0.25rem;
}
.c-side-nav__menu > .menu-item a {
display: flex;
align-items: center;
height: 100%;
font-weight: bold;
font-size: 1rem;
color: var(--color--exabase-exablue-50);
text-decoration: none;
padding-block: 0.375rem;
}
.c-side-nav__menu > .menu-item a:hover {
text-decoration: underline;
}
.c-side-nav__menu > .menu-item a:hover::after {
text-decoration: none;
}
.c-side-nav__menu > .menu-item a:not([href]) {
cursor: default;
}
.c-side-nav__menu > .menu-item a:not([href]):hover {
text-decoration: none;
}
.c-side-nav__menu > .menu-item .sub-menu {
list-style-type: none;
}
.c-side-nav__menu > .menu-item .sub-menu > .menu-item > a {
display: block;
font-weight: normal;
font-size: 0.9375rem;
color: var(--color--exabase-gray-95);
}
.c-side-nav__menu > .menu-item .sub-menu > .menu-item > a:hover {
text-decoration: underline;
}
.c-sidebar-ranking {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
@media print, screen and (min-width: 768px) and (max-width: 1023px) {
.c-sidebar-ranking {
gap: 1.5rem;
}
}
@media print, screen and (min-width: 1280px) {
.c-sidebar-ranking {
gap: 1.5rem;
}
}
.c-sidebar-ranking li {
list-style: none;
}
.c-sidebar-ranking__item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.c-sidebar-ranking__num {
flex: none;
width: 1.5rem;
font-size: 2.0625rem;
font-weight: 200;
font-style: italic;
color: var(--color--exabase-exablue-50);
line-height: 1;
text-align: center;
}
.c-sidebar-ranking__content {
flex: 1;
}
.c-tag {
--font-size: 0.625rem;
--padding-y: 0.1875rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
background-color: var(--color--exabase-exablue-1);
border-radius: 9999px;
font-size: var(--font-size);
color: var(--color--exabase-exablue-50);
line-height: 1.4;
letter-spacing: 0.05em;
text-decoration: none;
padding: var(--padding-y) 1rem;
transition: background-color ease 0.2s;
}
@media print, screen and (min-width: 768px) {
.c-tag {
--font-size: 0.75rem;
--padding-y: 0.25rem;
}
}
.c-tag--lg {
--font-size: 0.8125rem;
--padding-y: 0.375rem;
}
@media print, screen and (min-width: 768px) {
.c-tag--lg {
--font-size: 0.9375rem;
--padding-y: 0.5rem;
}
}
.c-tag:hover {
background-color: var(--color--exabase-exablue-3);
}
.c-tag__count {
display: inline-block;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 9999px;
font-size: 0.8em;
line-height: 1;
padding: 0.125rem 0.375rem;
}
.c-wrapper {
--py-lg: 72px;
--py-md: 56px;
--py-sm: 24px;
--inner-width: var(--bp--lg);
}
@media print, screen and (min-width: 768px) {
.c-wrapper {
--py-lg: 92px;
--py-md: 64px;
--py-sm: 32px;
}
}
@media print, screen and (min-width: 768px) and (max-width: 1023px) {
.c-wrapper:not(.c-wrapper--not-gradual-width) {
--inner-width: var(--bp--md);
}
}
@media print, screen and (min-width: 600px) and (max-width: 767px) {
.c-wrapper:not(.c-wrapper--not-gradual-width) {
--inner-width: var(--bp--sm);
}
}
@media print, screen and (max-width: 599px) {
.c-wrapper:not(.c-wrapper--not-gradual-width) {
--inner-width: var(--bp--xs);
}
}
.c-wrapper--width3xl {
--inner-width: var(--bp--3xl);
}
@media print, screen and (min-width: 1380px) and (max-width: 1439px) {
.c-wrapper--width3xl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--2xl);
}
}
@media print, screen and (min-width: 1280px) and (max-width: 1379px) {
.c-wrapper--width3xl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--xl);
}
}
@media print, screen and (min-width: 1024px) and (max-width: 1279px) {
.c-wrapper--width3xl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--lg);
}
}
.c-wrapper--width2xl {
--inner-width: var(--bp--2xl);
}
@media print, screen and (min-width: 1280px) and (max-width: 1379px) {
.c-wrapper--width2xl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--xl);
}
}
@media print, screen and (min-width: 1024px) and (max-width: 1279px) {
.c-wrapper--width2xl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--lg);
}
}
.c-wrapper--widthXl {
--inner-width: var(--bp--xl);
}
@media print, screen and (min-width: 1024px) and (max-width: 1279px) {
.c-wrapper--widthXl:not(.c-wrapper--notGradualWidth) {
--inner-width: var(--bp--lg);
}
}
@media print, screen and (min-width: 768px) {
.c-wrapper--widthMd {
--inner-width: var(--bp--md) !important;
}
}
@media print, screen and (min-width: 600px) {
.c-wrapper--widthSm {
--inner-width: var(--bp--sm) !important;
}
}
.c-wrapper--pyLg {
padding-block: var(--py-lg);
}
.c-wrapper--pyMd {
padding-block: var(--py-md);
}
.c-wrapper--pySm {
padding-block: var(--py-sm);
}
.c-wrapper__inner {
width: 100%;
max-width: var(--inner-width);
padding-inline: var(--page--padding-x);
margin: 0 auto;
}
.c-wrapper__inner--with-breadcrumb {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding-bottom: 2.5rem;
}
@media print, screen and (min-width: 768px) {
.c-wrapper__inner--with-breadcrumb {
gap: 4rem;
padding-bottom: 4rem;
}
}
div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
border: 0 !important;
background: none !important;
box-shadow: none !important;
width: 100%;
padding: 0 0 8px 0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
display: grid;
grid-template: "lt r" "lb r";
gap: 16px;
width: calc(100% - 16px) !important;
max-width: calc(var(--bp--lg) - 64px) !important;
margin: 0 auto;
background-color: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
padding: 8px !important;
}
@media print, screen and (max-width: 599px) {
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
display: flex;
flex-direction: column;
align-items: flex-end;
}
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording {
grid-area: lt;
margin: 0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording p {
font-family: var(--font-family--default);
font-size: 0.75rem !important;
margin: 0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording p a {
font-size: inherit !important;
color: var(--color--exabase-exablue-50) !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p#hs-eu-cookie-disclaimer {
grid-area: lb;
margin: 0 !important;
font-family: var(--font-family--default);
font-size: 0.75rem !important;
margin: 0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p#hs-eu-cookie-disclaimer a {
font-size: inherit !important;
color: var(--color--exabase-exablue-50) !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area {
grid-area: r;
display: flex;
align-items: flex-end !important;
margin: 0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group {
display: flex !important;
flex-direction: column !important;
gap: 8px;
}
@media print, screen and (max-width: 599px) {
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group {
flex-direction: row !important;
}
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button,
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-decline-button {
font-family: var(--font-family--default);
font-size: 0.75rem !important;
margin: 0 !important;
white-space: nowrap !important;
transition: opacity ease 0.2s;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button a,
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-decline-button a {
font-size: inherit !important;
color: var(--color--exabase-exablue-50) !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button:hover,
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-decline-button:hover {
opacity: 0.75;
}
#ez-toc-container {
--padding-x: 1.5rem;
--title--height: 3rem;
--content--padding-y: 1rem;
--toggle--rotate: rotate(0deg);
background-color: var(--color--exabase-gray-1) !important;
border-radius: 8px;
border: 0;
overflow: hidden;
box-shadow: none;
margin: 0;
padding: 0 var(--padding-x);
}
#ez-toc-container.toc_close {
--toggle--rotate: rotate(-180deg);
}
@media print, screen and (min-width: 768px) {
#ez-toc-container {
--padding-x: 2rem;
--title--height: 3.75rem;
--content--padding-y: 1.5rem;
}
}
#ez-toc-container .ez-toc-title-container {
position: absolute;
left: 0;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 100%;
height: var(--title--height);
background-color: var(--color--exabase-gray-3);
padding: 0 var(--padding-x);
transition: background-color ease 0.2s;
}
#ez-toc-container .ez-toc-title-container:hover {
background-color: var(--color--exabase-gray-5);
}
#ez-toc-container .ez-toc-title-container .ez-toc-title {
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.03em;
font-weight: normal;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container .ez-toc-title-container .ez-toc-title {
font-size: 1.125rem;
}
}
#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle {
position: absolute;
inset: 0;
}
#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle .ez-toc-toggle {
float: none !important;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
text-decoration: none;
margin: 0;
padding: 0 var(--padding-x);
}
#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle .ez-toc-toggle .ez-toc-js-icon-con {
float: none;
left: 0;
border: 0;
border-radius: 0;
}
#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle .ez-toc-toggle .ez-toc-js-icon-con .ez-toc-icon-toggle-span > svg {
display: none;
}
#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle .ez-toc-toggle .ez-toc-js-icon-con .ez-toc-icon-toggle-span::before {
position: inherit;
content: "\f15b";
font-family: var(--font-family--ei);
font-size: 1.5rem;
color: var(--color--exabase-exablue-50);
line-height: 1;
transform: var(--toggle--rotate);
transition: transform ease 0.2s;
}
#ez-toc-container nav {
padding-top: var(--title--height);
}
#ez-toc-container nav .ez-toc-list {
padding: var(--content--padding-y) 0;
}
#ez-toc-container nav .ez-toc-list > li:not(:last-child) {
margin-bottom: 0.75rem;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container nav .ez-toc-list > li:not(:last-child) {
margin-bottom: 1rem;
}
}
#ez-toc-container nav .ez-toc-list .ez-toc-heading-level-2 {
display: flex;
flex-direction: column;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container nav .ez-toc-list .ez-toc-heading-level-2 {
gap: 0.25rem;
}
}
#ez-toc-container nav .ez-toc-list .ez-toc-heading-level-2 > a {
font-weight: bold;
color: var(--color--exabase-exablue-50);
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0.025em;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container nav .ez-toc-list .ez-toc-heading-level-2 > a {
font-size: 1rem;
}
}
#ez-toc-container nav .ez-toc-list .ez-toc-list-level-3 {
display: flex;
flex-direction: column;
margin: 0 0 0 1rem !important;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container nav .ez-toc-list .ez-toc-list-level-3 {
margin: 0 0 0 1.5rem !important;
}
}
@media print, screen and (min-width: 1280px) {
#ez-toc-container nav .ez-toc-list .ez-toc-list-level-3 {
margin: 0 0 0 2.5rem !important;
}
}
#ez-toc-container nav .ez-toc-list .ez-toc-list-level-3 .ez-toc-heading-level-3 > a {
color: var(--color--exabase-gray-95);
font-size: 0.8125rem;
line-height: 1.6;
letter-spacing: 0.025em;
}
@media print, screen and (min-width: 768px) {
#ez-toc-container nav .ez-toc-list .ez-toc-list-level-3 .ez-toc-heading-level-3 > a {
font-size: 0.875rem;
}
}
.frontpage__section-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2.75rem;
}
@media print, screen and (max-width: 767px) {
.frontpage__section-inner {
gap: 1.5rem;
}
}
.frontpage__section-content {
display: flex;
flex-direction: column;
gap: 1rem;
}