/*
============================================================
A11Y
============================================================
*/
.skip-nav {
    position: fixed;
    top: auto;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-nav:focus {
    top: 16px;
    left: 16px;
    padding: 10px 14px;
    width: auto;
    height: auto;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: var(--radius-sm);
    z-index: var(--z-skip);
}

.sound-only,
.sound_only,
.sr-only,
.u-sr-only {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/*
============================================================
SECTION AND CONTAINER
============================================================
*/
.sec {
    position: relative;
    padding: 72px 0;
    width: 100%;
    overflow: clip;
}

.sec--tight {
    padding: 40px 0;
}

.sec--flush {
    padding: 0;
}

.cont-wrap {
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
    max-width: var(--container-max);
}

.cont-wrap-md {
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
    max-width: var(--container-md-max);
}

.cont-wrap-sub {
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
    max-width: var(--container-sub-max);
}

.cont-wrap-lg {
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
    max-width: var(--container-lg-max);
}

.cont-wrap-xlg {
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
    max-width: var(--container-xlg-max);
}

.cont {
    margin-inline: auto;
}

.wrap {
    position: relative;
}

.head {
    position: relative;
}

.body {
    position: relative;
}

.foot {
    position: relative;
}

/*
============================================================
MEDIA
============================================================
*/
.figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.media {
    position: relative;
}

.media-embed,
.youtube-wrap,
.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.media-embed:before,
.youtube-wrap:before,
.video-wrapper:before,
.is-16x9:before {
    display: block;
    padding-top: 56.25%;
    content: "";
}

.media-embed iframe,
.youtube-wrap iframe,
.video-wrapper iframe,
.is-16x9 iframe,
.is-16x9 img,
.is-16x9 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*
============================================================
VISIBILITY
============================================================
*/
.visible {
    display: block;
}

.hidden {
    display: none;
}

.pc-show {
    display: block;
}

.mb-show {
    display: none;
}

@media (max-width: 1024px) {
    .pc-show {
        display: none;
    }
}

@media (max-width: 1024px) {
    .mb-show {
        display: block;
    }
}

/*
============================================================
BUTTON AND ARROW
============================================================
*/
.btn--primary {
    color: var(--primary-contrast);
    background: var(--primary);
    border-color: var(--primary);
}

.btn--ghost {
    color: var(--primary);
    background: transparent;
    border-color: var(--primary);
}

.btn--link {
    padding: 0;
    min-height: 0;
    color: inherit;
    background: transparent;
    border-color: transparent;
}

.btn--lg {
    min-height: 56px;
    padding: 0 24px;
}

.arrow {
    --size: 44px;
    --bg: var(--color-black);
    --fg: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    color: var(--fg);
    background: var(--bg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--speed-fast) var(--ease-base), background-color var(--speed-fast) var(--ease-base), color var(--speed-fast) var(--ease-base), opacity var(--speed-fast) var(--ease-base);
}

.arrow:before {
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    content: "";
}

.arrow--right:before {
    transform: rotate(-45deg);
}

.arrow--left:before {
    transform: rotate(135deg);
}

.arrow--black {
    --bg: var(--color-black);
    --fg: var(--color-white);
}

/*
============================================================
TABLE
============================================================
*/
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border: 1px solid var(--tbl-border);
}

.table--center th,
.table--center td {
    text-align: center;
}

.table--compact th,
.table--compact td {
    padding: 8px 10px;
}

.table-wrap--scroll {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 1024px) {
    .table--stack,
    .table--stack thead,
    .table--stack tbody,
    .table--stack tr,
    .table--stack th,
    .table--stack td {
        display: block;
        width: 100%;
    }
}

@media (hover: none) {
    a,
    img,
    .btn,
    .arrow {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
        transition-duration: 0.001ms;
    }
}