/* ============================================================
   page.css — 東京木材埠頭株式会社 トップページ
   Google Fonts
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@600&family=Roboto:ital,wght@400,700;0,900;1,700&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   命名規則: テンプレート準拠（font-family / font-size / line-height /
   letter-spacing / color / width / height / gutter / gap / border / radius）
   数値: 東京木材埠頭 Figma 1440px デザイン準拠
============================================================ */
:root {
    /* ── Typography ── */
    --font-family-primary: YakuHanJP, -apple-system, BlinkMacSystemFont, 'roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, Arial, sans-serif;
    --font-family-secondary: 'Roboto', sans-serif;
    --font-family-serif: 'Noto Serif JP', serif;

    /* フォントサイズスケール（ピクセル値ベース）
     サイト全体で使用される全17段階を網羅 */
    --font-size-10: 10px; /* 0.625rem  — PDF バッジ */
    --font-size-11: 11px; /* 0.6875rem — ニュースタグ */
    --font-size-12: 12px; /* 0.75rem   — SCROLL ラベル、コピーライト、小ラベル */
    --font-size-13: 13px; /* 0.8125rem — グローバルナビ、あしすとボタン、TOPICS */
    --font-size-14: 14px; /* 0.875rem  — カード説明文、フッターリンク、body-sm */
    --font-size-15: 15px; /* 0.9375rem — ニュース行、メッセージ本文、ボタン */
    --font-size-16: 16px; /* 1rem      — 本文デフォルト、リンク行、テーブル */
    --font-size-18: 18px; /* 1.125rem  — ヒーロー縦書き、page-title-en、カードタイトル */
    --font-size-20: 20px; /* 1.25rem   — 導入テキスト、コンテンツ見出し */
    --font-size-22: 22px; /* 1.375rem  — セクション見出し（cp-subheading） */
    --font-size-24: 24px; /* 1.5rem    — セクションヘッダータイトル、メッセージ見出し */
    --font-size-26: 26px; /* 1.625rem  — ページネーション */
    --font-size-28: 28px; /* 1.75rem   — 統計数値（小） */
    --font-size-32: 32px; /* 2rem      — 中央見出し、ページタイトル（モバイル） */
    --font-size-36: 36px; /* 2.25rem   — 統計数値（大） */
    --font-size-40: 40px; /* 2.5rem    — ページタイトル */
    --font-size-48: 48px; /* 3rem      — 予備（大見出し） */
    --font-size-112: 112px; /* 7rem      — ウォーターマーク */

    /* セマンティックエイリアス（テンプレート互換） */
    --font-size-2xs: var(--font-size-10);
    --font-size-xs: var(--font-size-11);
    --font-size-sm: var(--font-size-13);
    --font-size-base: var(--font-size-16);
    --font-size-md: var(--font-size-18);
    --font-size-lg: var(--font-size-22);
    --font-size-xl: var(--font-size-32);
    --font-size-2xl: var(--font-size-40);
    --font-size-3xl: var(--font-size-48);
    --line-height-base: 1.75;
    --line-height-xl: 2;
    --line-height-lg: 1.8;
    --line-height-md: 1.4;
    --line-height-sm: 1;
    --letter-spacing-base: inherit;
    --letter-spacing-xl: 0.1em;
    --letter-spacing-lg: 0.06em;
    --letter-spacing-md: 0.04em;
    --letter-spacing-sm: 0.02em;

    /* ── Colors — WCAG AA 対応 ── */
    --color-primary: #003399; /* #fff 上: 10.8:1 ✓ */
    --color-primary-light: #95b9fd;
    --color-primary-dark: #002070;
    --color-secondary: #171c2b; /* 濃色見出し */
    --color-secondary-light: #2b3a67;
    --color-secondary-dark: #0e1220;
    --color-accent: #d01111; /* 警告・強調赤 */
    --color-ex-yellow: #fcb900; /* ハイライト */

    /* グレースケール */
    --color-900: #000000;
    --color-800: #202020; /* 本文テキスト — #fff 上: 16.9:1 ✓ */
    --color-700: #464646;
    --color-600: #595959; /* 控えめテキスト — #fff 上: 7.0:1 ✓ */
    --color-500: #6c6c6c; /* 破線ボーダー — #fff 上: 5.1:1 ✓ */
    --color-400: #a0a0a0;
    --color-300: #c5c5c5; /* 標準ボーダー */
    --color-200: #d9d9d9; /* プレースホルダー背景 */
    --color-100: #f0f0f0; /* サブタイル背景 */
    --color-000: #ffffff;

    /* ── Layout ── */
    --width-content-max: 1360px; /* メインコンテンツ最大幅 */
    --width-content-narrow: 1240px; /* 企業メッセージ等の狭い幅 */
    --width-content-tiet: 800px; /* タイで狭い幅 */
    --width-subpage-max: 1140px; /* サブページ最大幅 */
    --height-header: 80px; /* ヘッダー高さ */

    /* ── Gutter（パディング） ── */
    --gutter-2xl: 128px; /* トップページ左右 */
    --gutter-xl: 64px; /* セクション上下 */
    --gutter-lg: 48px; /* サブページ左右 / 大ギャップ */
    --gutter-md: 48px; /* フッター左右 */
    --gutter-base: 32px;
    --gutter-sm: 24px;
    --gutter-xs: 16px;
    --gutter-2xs: 8px;

    /* ── Gap（要素間余白） ── */
    --gap-3xl: 128px;
    --gap-2xl: 96px;
    --gap-xl: 64px; /* セクション間カラム等 */
    --gap-lg: 48px;
    --gap-base: 32px; /* サービスカード間 */
    --gap-md: 24px; /* グリッド等 */
    --gap-sm: 16px;
    --gap-xs: 8px;
    --gap-2xs: 4px;

    /* ── Column（2カラムレイアウト） ── */
    --col-text: 5; /* 本文カラム比率 */
    --col-stats: 7; /* 統計カラム比率 */
    --col-heading-w: 24%; /* 左見出し列幅 */
    --col-label-w: 165px; /* テーブルラベル列幅 */

    /* ── Heights ── */
    --height-hero: 780px;
    --height-card-img: 320px;
    --height-footer-logo: 100px;

    /* ── Border ── */
    --border-default-color: var(--color-300);
    --border-default-style: solid;
    --border-width-base: 1px;
    --border-width-xl: 5px; /* アクティブタブ */
    --border-width-lg: 3px; /* フォーカスリング */
    --border-width-md: 2px; /* インフォボックス */
    --border-width-sm: 1px;

    /* ── Radius ── */
    --radius-base: 10px; /* 画像・カード共通 */
    --radius-xl: 60px; /* ボタン（ピル型） */
    --radius-lg: 50px; /* ヒーロー */
    --radius-md: 30px; /* サービスカード */
    --radius-sm: 9px; /* チップ・タグ小 */
    --radius-xs: 4px; /* 微小丸め */
    --radius-tag: 24px; /* ニュースタグ */
}

/* ============================================================
   2. ACCESSIBILITY
============================================================ */

/* スキップリンク */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* フォーカスリング — すべてのインタラクティブ要素 */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

div#emergency {
    max-height: 50px;
    background-color: #fcd600;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    display: none;
}

.has-emergency #emergency {
    display: block;
}
#emergency a {
    display: flex;
    align-items: center;
    justify-content: center;
}

#emergency:hover {
    opacity: 0.8;
}
#emergency a i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(images/common/ico_cursol_btonbrk.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    flex-shrink: 0;
}

#emergency span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 576px) {
    div#emergency {
        padding: 14px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   3. BASE
============================================================ */
body {
    font-family: var(--font-family-primary);
    background: var(--color-000);
    color: var(--color-800);
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    display: block;
    max-width: 100%;
}
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: 1.5rem;
}
img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    -webkit-backface-visibility: hidden;
}
[id] {
    scroll-margin-top: var(--height-header);
}
hr {
    border: none;
    border-top: 1px solid var(--color-300);
    color: inherit;
}

main#main-content {
    margin-top: -80px;
}
@media (max-width: 768px) {
    main#main-content {
        margin-top: -68px;
    }
}
/* ============================================================
   スプラッシュ画面
   ============================================================ */

/* オーバーレイ全体 */
.splash {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary); /* #171c2b（ダークネイビー） */
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

/* 非表示状態（JSで付与） */
.splash--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ロゴ＋バーを縦並びに */
.splash__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* ロゴ */
.splash__logo {
    width: 160px;
    height: auto;
    /* ダーク背景のため白抜きに */
    filter: brightness(0) invert(1);
    animation: splash-logo-in 0.6s ease forwards;
}

@keyframes splash-logo-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* プログレスバー背景 */
.splash__bar-wrap {
    width: 160px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

/* 伸びるバー */
.splash__bar {
    height: 100%;
    width: 0%;
    background: var(--color-000); /* #003399 */
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================================================
   4. LAYOUT HELPERS  (l-)
============================================================ */
.l-section {
    /* padding-top: var(--gutter-xl); */
    padding-bottom: var(--gutter-xl);
}
main > .l-section:last-child {
    padding-bottom: var(--gutter-sm);
}
.l-section-x {
    padding-left: var(--gutter-2xl);
    padding-right: var(--gutter-sm);
}
@media (max-width: 768px) {
    .l-section {
        padding-bottom: var(--gutter-lg);
    }
}
/* 最大幅1240px・センター寄せ（ご利用の方へ・東京木材埠頭について共通） */
.l-content-wrap {
    padding-left: var(--gutter-xl);
    padding-right: var(--gutter-xl);
    max-width: var(--width-content-max);
    margin-left: auto;
    margin-right: auto;
}
.l-content-centered {
    max-width: var(--width-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter-xl);
    padding-right: var(--gutter-xl);
}
@media (max-width: 991px) {
    .l-content-centered {
        padding-left: 0;
    }
}
@media (max-width: 768px) {
    .l-content-centered {
        padding-left: 0;
        padding-right: var(--gutter-sm);
    }
}

/* ヒーロー：左オフセットレイアウト */
.l-hero-wrap {
    /* margin-left: var(--gutter-2xl); */
    border-bottom-right-radius: var(--radius-lg);
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--gutter-2xl);
}

/* 画像を覆う共通ラッパー */
.l-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─ レスポンシブ対応 ─ */
@media (max-width: 768px) {
    .l-content-wrap {
        padding-left: var(--gutter-sm);
        padding-right: var(--gutter-sm);
    }
    .topics__label {
        padding-top: 8px;
        margin-bottom: 0;
    }
}
@media (max-width: 578px) {
    .l-section-x {
        padding-left: 40px;
        padding-right: 16px;
    }
}

/* ============================================================
   5. COMPONENTS  (c-)
============================================================ */

/* ---- 5-1. セクションタイトル ---- */
.c-section-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}
.c-section-header__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}
.c-section-header__title {
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.8;
    margin: 0;
    color: var(--color-800);
}

/* ─ レスポンシブ対応 ─ */
@media (max-width: 768px) {
    .c-section-header__title {
        font-size: var(--font-size-22);
    }
}
@media (max-width: 768px) {
    .c-section-header {
        margin-bottom: 0px;
    }
}

/* ---- 5-2. 丸矢印アイコン ---- */
.c-arrow {
    width: 20px;
    height: 20px;
    background-image: url(images/common/ico_cursol_btonbl.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.c-arrow::after {
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, 1px);
}
/* 大サイズ */
.c-arrow--lg {
    width: 26px;
    height: 26px;
}
.c-arrow--lg::after {
    width: 7px;
    height: 7px;
}

/* ---- 5-3. 矢印付きリンク行 ---- */
.c-link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0;
    color: var(--color-800);
    font-weight: 700;
    font-size: var(--font-size-16);
    transition: color 0.2s;
}
.c-link-item:hover,
.c-link-item:focus-visible {
    color: var(--color-primary);
}

/* ---- 5-4. 区切り線 ---- */
.c-divider {
    border: none;
    border-top: 1px solid var(--color-300);
    opacity: 1;
}
.c-divider--dashed {
    border-top-style: dashed;
    border-color: var(--color-500);
}

/* ---- 5-5. カテゴリタグ ---- */
.c-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-800);
    border-radius: var(--radius-tag);
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-11);
    font-weight: 700;
    white-space: nowrap;
    min-width: 96px;
    color: var(--color-800);
}
@media (max-width: 991px) {
    .c-tag {
        font-size: var(--font-size-10);
        padding: 0.1rem 0.5rem;
        min-width: 76px;
    }
}

/* テーブル横スクロール */
.table-scroll {
    overflow-x: auto;
}

/* ページトップボタン（表示切替） */
.to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---- 5-6. 無限スクロール ---- */

.text-infinity-scroll {
    width: 100%;
    display: flex;
    overflow: hidden;
}
.text-infinity-scroll .first,
.text-infinity-scroll .second {
    flex-shrink: 0;
    width: auto;
    height: auto;
    text-wrap: nowrap;
    word-break: keep-all;
    display: inline;
}

.text-infinity-scroll .first {
    animation: anim--first 500s infinite linear 0.1s both;
}

.text-infinity-scroll .second {
    animation: anim--second 500s infinite linear 0.1s both;
}

@keyframes anim--first {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes anim--second {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* ---- 5-6. サービスカード ---- */

/* カード列コンテナ */
.cards-row {
    gap: var(--gap-base);
    padding-left: var(--gutter-xl); /* 100px (Figma: x=101) */
    padding-right: var(--gutter-xl); /* 100px (Figma: right margin 100px) */
    max-width: var(--width-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* 個別カード */
.c-card {
    flex: 1;
    min-width: 0;
}

/* 最後のカードのみ右側に30px角丸（Figma: rounded-br-30 rounded-tr-30） */
.c-card:last-child {
    /* border-radius: 0 30px 30px 0;*/
    overflow: hidden;
}
@media (max-width: 1279px) {
    .c-card:last-child .c-card__img-wrap {
        border-radius: 0 12px 12px 0;
    }

    .c-card .c-card__img-wrap {
        border-radius: 12px !important;
    }
}
@media (max-width: 768px) {
    .cards-row {
        gap: 24px;
        padding-left: var(--gutter-sm);
        padding-right: var(--gutter-sm);
    }
    .c-card .c-card__img-wrap {
        border-radius: 12px !important;
        height: 260px;
    }
}
@media (max-width: 568px) {
    .c-card .c-card__img-wrap {
        border-radius: 12px !important;
        height: 200px;
    }
}
/* ── 画像ラッパー ── */
.c-card__img-wrap {
    position: relative;
    height: var(--height-card-img); /* Figma: h=321px */
    background: #c5c5c5; /* Figma: img_thum_gate の色 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
}

/* 最後のカードの画像は右上のみ30px角丸 */
.c-card:last-child .c-card__img-wrap {
    border-radius: 0 30px 30px 0;
}

.c-card__img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* グレープレースホルダー（Card2） */
.c-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: #c5c5c5;
}

/* ホバー時の画像拡大 */
.c-card:hover .c-card__img-wrap img,
.c-card:focus-within .c-card__img-wrap img {
    transform: scale(1.04);
}

/* ── 白ラベル（画像の左下に重なるオーバーレイ） ──
   Figma: h=37px, border-radius 0 10px 0 0, white bg */
.c-card__label {
    padding: 12px 14px 12px 8px;
    margin: 0 24px 0 0;
    background: #fff;
    border-radius: 0 10px 0 0;
    z-index: 500;
    display: inline-flex;
    align-items: center;
}

/* カード名テキスト（Figma: 16px bold Noto Sans JP） */
.c-card__name {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-16);
    font-weight: 700;
    color: var(--color-800);
    line-height: normal;
    background-image: url(images/common/ico_cursol_btonbl.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 26px;
}

/* 説明文（画像の下、Figma: 14px, line-height 1.6） */
.c-card__desc {
    display: block;
    padding: 10px 8px 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14);
    line-height: 1.6;
    color: var(--color-800);
    margin: 0;
}

@media (max-width: 578px) {
    .c-card__name {
        font-size: var(--font-size-14);
    }
    .c-card__desc {
        font-size: var(--font-size-13);
        padding: 0;
    }
    .c-card__img-placeholder {
        position: relative;
        border-radius: 12px !important;
    }

    .c-card__img-wrap img {
        position: relative;
        border-radius: 12px !important;
    }

    .c-card .c-card__img-wrap {
        display: block;
        height: auto;
        overflow: visible;
        background-color: transparent;
    }

    .c-card__label {
        margin: 0;
        padding: 12px 0 12px 0;
    }
}

/* ---- 5-7. ニュース行 ---- */
.c-news-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.625rem 0;
}
.c-news-item__date {
    font-family: var(--font-family-secondary);
    font-weight: 700;
    font-size: var(--font-size-15);
    white-space: nowrap;
    color: var(--color-800);
}
/* ニュース本文リンク */
.c-news-item__title {
    flex: 1;
    font-size: var(--font-size-15);
    line-height: 1.8;
    font-weight: 700;
    color: var(--color-800);
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.c-news-item__title:hover,
.c-news-item__title:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}
.subpage-main a.c-news-item__title {
    font-size: var(--font-size-16);
    padding: 10px 0;
}
@media (max-width: 991px) {
    .c-news-item {
        display: block;
    }
    .c-news-item__date {
        font-size: var(--font-size-14);
        margin-right: 8px;
    }
    .c-news-item__title {
        width: 100%;
        padding-top: 6px;
    }
    .c-arrow {
        flex-shrink: 0;
    }
}
@media (max-width: 578px) {
    .c-news-item {
        display: block;
    }

    .c-news-item__date {
        font-size: var(--font-size-13);
        margin-right: 16px;
    }

    .c-news-item__title {
        font-size: var(--font-size-13);
    }
    .subpage-main a.c-news-item__title {
        font-size: var(--font-size-15);
        padding: 5px 0;
        gap: 8px;
    }
}
/* ---- 5-8. アウトラインボタン ---- */
.c-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 0 1rem 0 1.5rem;
    height: 50px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-15);
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    background-color: #fff;
    transition:
        background 0.2s,
        color 0.2s;
}
.c-btn-outline:hover,
.c-btn-outline:focus-visible {
    background: var(--color-primary);
    color: #fff;
}
.c-btn-outline:hover .c-arrow,
.c-btn-outline:focus-visible .c-arrow {
    background-image: url(images/common/ico_cursolwh-round.svg);
    background-size: 20px;
}
.c-btn-outline:hover .c-arrow::after,
.c-btn-outline:focus-visible .c-arrow::after {
    border-color: var(--color-primary);
}
@media (max-width: 578px) {
    .c-btn-outline {
        font-size: var(--font-size-14);
    }
}

/* ---- 5-9. フッターナビ ---- */
.c-footer-nav__title {
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-15);
    margin-bottom: 0.75rem;
}
.c-footer-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.c-footer-nav__list a {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-13);
    line-height: 2.2;
    transition: color 0.2s;
}
.c-footer-nav__list a:hover,
.c-footer-nav__list a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* ---- 5-10. 統計カード ---- */
.c-stat {
    text-align: center;
}
.c-stat__icon {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
}
.c-stat__label {
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}
.c-stat__num {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-36);
    font-weight: 900;
    line-height: 1;
    padding: 0 2px;
}
.c-stat__unit {
    font-size: var(--font-size-15);
    font-weight: 700;
}
.c-stat__sub {
    font-size: var(--font-size-13);
    color: var(--color-600);
}

/* SOLAS 統計バリアント */
.c-stat__label--multiline {
    line-height: 1.3;
}
.c-stat__num--sm {
    font-size: var(--font-size-28);
}

/* スクロール矢印回転 */
.hero__arrow-rotate {
    transform-origin: center center;
    display: flex;
}

/* ---- 5-11. プレースホルダー ---- */
.c-placeholder {
    width: 100%;
    height: 100%;
    justify-content: center;
    min-height: 200px;
}

/* ─ レスポンシブ対応 ─ */
@media (max-width: 768px) {
    .c-stat__label {
        font-size: var(--font-size-14);
    }

    .c-stat__num {
        font-size: var(--font-size-32);
    }

    .c-stat__num--sm {
        font-size: var(--font-size-22);
    }

    .c-stat__unit {
        font-size: var(--font-size-14);
    }

    .c-stat__unit {
        font-size: var(--font-size-12);
    }
}
/* ============================================================
   6. HEADER (React SiteHeader.tsx)
============================================================ */

/* ── ヘッダー外枠 ── */
.hdr {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: var(--height-header);
    z-index: 1000;
}

/* ── 白背景エリア（ロゴ＋ナビ） ── */
.hdr__white {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--height-header);
    /* width: 50%; */
    /* min-width: 560px; */
    background: var(--color-000);
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    padding-right: 40px;
    gap: 32px;
}

/* ── ロゴリンク ── */
.hdr__logo {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    text-decoration: none;
}

/* ── グローバルナビリスト ── */
.hdr__nav-list {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 80px;
    align-items: stretch;
}

/* ── イタリック斜体テキスト ── */
.hdr__skew {
    display: inline-block;
    transform: skewX(-8deg);
    transform-origin: center center;
}

/* ── 右側ブルー背景（装飾帯） ── */
.hdr__blue-band {
    position: absolute;
    right: 0;
    top: 0;
    height: var(--height-header);
    width: 180px;
    background: var(--color-primary);
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 41111;
}

/* ── あしすとねっとボタン ── */
.hdr__assist {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 100%;
    justify-content: center;
    height: 100%;
}
.hdr__assist:hover,
.hdr__assist:focus-visible {
    opacity: 0.85;
    color: #fff;
}
.hdr__assist-text {
    display: inline-block;
    transform: skewX(-8deg);
    color: #fff;
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: var(--font-size-13);
    line-height: 1;
    white-space: nowrap;
}

/* ── ハンバーガーボタン ── */
.hdr__hamburger {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.hdr__hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

/* グローバルナビゲーションリンク */
.header-nav-link {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: var(--font-size-14);
    color: var(--color-800);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.header-nav-link:hover,
.header-nav-link:focus-visible {
    color: var(--color-primary);
}

/* ── ナビアイテム（position基点） ── */
.hdr__nav-item {
    position: static;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* ── ボタン型ナビリンク（既存の.header-nav-linkに追加） ── */
.header-nav-link--has-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    /* 既存の font / color / transition はそのまま継承 */
}

/* ── 矢印（▼） ── */
.hdr__nav-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* 開いているとき矢印を上向きに */
.header-nav-link--has-dropdown[aria-expanded='true'] .hdr__nav-arrow {
    transform: rotate(-135deg) translateY(-2px);
}

/* ── ドロップダウン本体 ── */
.hdr__dropdown {
    position: absolute;
    left: auto;
    top: 65px;
    min-width: 220px;
    background: var(--color-000);
    border-radius: 12px;
    box-shadow: 0 0px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2000;

    /* アニメーション（hidden で非表示時は無効） */
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    pointer-events: none;
    overflow: hidden;
}

/* hidden 属性があるときは完全に非表示 */
.hdr__dropdown[hidden] {
    display: none; /* hidden属性のデフォルト挙動を明示 */
}

/* 開いているとき（hidden を外してからアニメーション） */
.hdr__dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── ドロップダウンリンク ── */
.hdr__dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: var(--font-size-14);
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-200);
    transition:
        color 0.15s,
        background 0.15s;
}

.hdr__dropdown li:last-child .hdr__dropdown-link {
    border-bottom: none;
}

.hdr__dropdown-link:hover,
.hdr__dropdown-link:focus-visible {
    color: var(--color-primary);
    background: var(--color-100);
    outline: none;
}

/* ── アイコン（青丸矢印） ── */
.hdr__dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* アイコン内の矢印（CSS三角形） */
.hdr__dropdown-icon::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, 1px);
}

/* ── あしすとねっとボタン（button化に対応） ── */
button.hdr__assist {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    /* 既存スタイル（color・font等）はそのまま継承 */
}

/* ── 矢印（グロナビと共通クラスを流用） ── */
.hdr__assist-arrow {
    border-color: #fff; /* 白背景なので白矢印に上書き */
}

/* ── あしすとねっと専用ドロップダウン位置（右端に合わせる） ── */
.hdr__dropdown--assist {
    left: auto;
    right: 15px; /* hdr__blue-band の右端に揃える */
    /* blue-band の真下から */
    min-width: 220px;
}

/* ── ログインアイテム（アイコン付き円形ボーダー） ── */
.hdr__dropdown-link--login {
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px dashed var(--color-200); /* デザインカンプに合わせてdashed */
    border-radius: 12px 12px 0 0;
}

/* ── ログインアイコン（人物アイコン） ── */
.hdr__dropdown-login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: url('images/common/ico_login.svg') center / 36px no-repeat;
    /* SVGがない場合はCSSで代替 */
}

/* ── PDFバッジ ── */
.hdr__dropdown-link--pdf {
    gap: 12px;
    border-bottom: none;
}

.hdr__dropdown-pdf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-10);
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

/* ── スクリーンリーダー専用テキスト ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ── あしすとねっとについて：下に区切り線 ── */
/* 既存の hdr__dropdown li:last-child のルールがあるので上書きが必要 */
.hdr__dropdown--assist li:nth-child(2) .hdr__dropdown-link {
    border-bottom: 1px solid var(--color-200);
}

/* ── 利用申込書ラッパー ── */
.hdr__dropdown-pdf-item {
    padding: 12px 16px; /* ボタンの外側余白 */
    border-bottom: none;
    background-color: #ededed;
    border-radius: 0 0 12px 12px;
}

/* ── 利用申込書ボタン（枠スタイル） ── */
.hdr__dropdown-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: var(--font-size-14);
    color: var(--color-primary);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
    box-sizing: border-box;
    background-color: #fff;
}

.hdr__dropdown-pdf-btn:hover,
.hdr__dropdown-pdf-btn:focus-visible {
    background: var(--color-primary);
    color: #fff;
    outline: none;
}

/* ホバー時にPDFバッジの色も反転 */
.hdr__dropdown-pdf-btn:hover .hdr__dropdown-pdf-badge,
.hdr__dropdown-pdf-btn:focus-visible .hdr__dropdown-pdf-badge {
    background: #fff;
    color: var(--color-primary);
}

.sp .hdr__dropdown-login-icon {
    background: url('images/common/ico_login_off.svg') center / 36px no-repeat;
}

.hdr__dropdown-link.sp {
    color: var(--color-600);
    font-weight: 400;
}

/* ── モバイル：ドロップダウン位置 ── */
@media (max-width: 768px) {
    .hdr__dropdown--assist {
        top: calc(100% + 6px); /* blue-band 真下に少し余白 */
        right: 0; /* blue-band 右端に揃える */
        min-width: 220px;
        /* 画面幅が狭い場合の対策 */
        max-width: calc(100vw - 24px);
    }
}
/* グローバルナビ 現在地 */
.header-nav-link--active {
    color: var(--color-primary);
}

/* ご利用の方へ ボタン（ドロップダウン）の場合 */
button.header-nav-link--active {
    color: var(--color-primary);
}

/* ── フォーカスリング（キーボード操作時） ── */
.header-nav-link--has-dropdown:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .hdr__white {
        gap: 16px;
    }

    .hdr__nav-list {
        gap: 16px;
    }

    .header-nav-link {
        font-size: var(--font-size-12);
    }

    .hdr__logo-img {
        height: 26px;
    }

    .hdr__blue-band {
        width: 160px;
    }

    .hdr__assist-text {
        font-size: var(--font-size-12);
    }
}
@media (max-width: 768px) {
    header.hdr {
        height: 68px;
        background: var(--color-000);
    }

    .hdr__white {
        height: 68px;
        padding-left: 5px;
        padding-right: 16px;
        gap: 6px;
    }

    .hdr__blue-band {
        height: auto;
        right: 12px;
        top: 16px;
        width: auto;
        border-radius: 4px;
    }

    a.hdr__assist {
        padding: 6px 8px;
        gap: 4px;
    }
}
@media (max-width: 576px) {
    img.hdr__assist-img {
        width: 16px;
    }
    .hdr__blue-band {
        top: 20px;
    }
    span.hdr__assist-text {
        font-size: var(--font-size-11);
    }
}
/* ============================================================
   6b. MOBILE NAV (React SiteHeader.tsx)
============================================================ */

/* ── オーバーレイ ── */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s;
}

/* ─�� パネル ── */
.mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    max-width: 80vw;
    background: var(--color-primary-dark);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.mobile-panel--open {
    transform: translateX(0);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* パネルヘッダー */
.mobile-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px 24px;
    border-bottom: 1px solid var(--color-300);
    background-color: var(--color-primary);
}
.mobile-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-20);
    color: var(--color-000);
}

/* ナビリンク */
.mobile-panel__link {
    display: block;
    padding: 10px 24px 10px 42px;
    font-weight: 700;
    font-size: var(--font-size-13);
    color: var(--color-000);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
    border-top: 1px dashed #7b9dde;
    background-image: url(images/common/ico_cursol_short-r_wh.svg);
    background-repeat: no-repeat;
    background-position: 24px center;
    background-size: 11px;
}
.mobile-panel__link:hover,
.mobile-panel__link:focus-visible {
    background: var(--color-100);
    color: var(--color-primary);
}

/* パネルフッター */
.mobile-panel__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--color-300);
}
.mobile-panel__assist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-14);
    text-decoration: none;
}
.mobile-panel__assist:hover,
.mobile-panel__assist:focus-visible {
    opacity: 0.85;
    color: #fff;
}
span.mobile-panel__ttl {
    padding: 16px 24px 5px 24px;
    font-weight: 700;
    font-size: var(--font-size-11);
    display: block;
    color: var(--color-000);
}

#mobile-nav-panel ul li ul {
    background-color: var(--color-primary);
}
/* ── ドロワー背景オーバーレイ ── */
.mobile-overlay {
    display: none; /* ← 追加：初期は非表示 */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1099;
    opacity: 0; /* ← 追加：フェードイン用初期値 */
    transition: opacity 0.3s;
}

.mobile-overlay--visible {
    display: block;
}

.mobile-overlay--open {
    opacity: 1;
}

/* ============================================================
   7. HERO
============================================================ */
.hero {
    /* ページ最上部から開始 — fixed headerの背後まで画像を表示 */
    position: relative;
    height: var(--height-hero);
    /* padding-top なし：ヘッダーと重なる */
    height: calc(100svh - 30px);
    min-height: 500px;
    max-height: 1000px;
}

.has-emergency .hero {
    height: calc(100svh - 80px);
}

/* ヒーロー画像エリア（l-hero-wrap 内） */
.l-hero-wrap {
    /* margin-left: var(--gutter-2xl); */ /* 100px — Figma: left=100px */
    border-bottom-right-radius: var(--radius-lg);
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100px; /* 100px */
}

.hero__img-area {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

/* 縦書きキャッチ — Figma: left=40px, top=237px */
.hero__vertical-text {
    position: absolute;
    left: 40px;
    bottom: 0;
    top: 0;
    display: flex;
    height: calc(100svh - 30px);
    min-height: 500px;
    max-height: 700px;
    writing-mode: vertical-rl;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-18); /* 18px */
    font-weight: 500;
    color: var(--color-800);
    letter-spacing: 0.5em;
    line-height: 1;
    margin: auto;
    z-index: 2;
    font-feature-settings: 'vert';
    justify-content: center;
}

.has-emergency .hero__vertical {
    height: calc(100svh - 80px);
}

/* SCROLL テキスト — Figma: left=27px, top=680px */
.hero__scroll-label {
    position: absolute;
    left: 27px;
    bottom: 52px;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-12); /* 12px */
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-800);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    z-index: 2;
    line-height: 1;
}

/* スクロール矢印 — Figma: left=50px, top=729px, rotate(90deg) → 下向き */
.hero__scroll-arrow {
    position: absolute;
    left: 47px;
    bottom: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
@media (max-width: 768px) {
    .l-hero-wrap {
        border-bottom-right-radius: var(--radius-md);
    }
}
@media (max-width: 578px) {
    .l-hero-wrap {
        left: 40px;
    }

    .hero {
        height: calc(100svh - 30px);
        min-height: 400px;
        max-height: 600px;
    }

    .hero__vertical-text {
        left: 13px;
        height: calc(100svh - 30px);
        min-height: 500px;
        max-height: 600px;
        font-size: var(--font-size-12);
    }

    .hero__scroll-label {
        display: none;
    }

    .hero__scroll-arrow {
        display: none;
    }
}
/* ============================================================
   8. TOPICS
============================================================ */
.topics {
    padding-bottom: 1rem;
    position: relative;
    top: -26px;
    background-color: #ffff;
    margin-right: 100px;
    border-radius: 12px;
}
.topics__label {
    font-family: var(--font-family-secondary);
    font-weight: 900;
    font-size: var(--font-size-13);
    min-width: 86px;
    padding-top: 14px;
    color: var(--color-800);
}

@media (max-width: 991px) {
    .topics {
        margin-right: 40px;
        top: -50px;
    }
}

@media (max-width: 578px) {
    .topics__label {
        padding-top: 8px;
        margin-bottom: 0;
    }
    .topics {
        top: -50px;
        margin-right: 20px;
        border-radius: 20px;
    }
}

/* ============================================================
   9. MESSAGE / STATS
============================================================ */
.message-heading {
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.7;
}
.message-body {
    font-size: var(--font-size-15);
    line-height: 1.9;
}
@media (max-width: 568px) {
    .message-heading {
        font-size: var(--font-size-20);
    }
}
/* ============================================================
   10. WATERMARK
============================================================ */
.watermark {
    overflow: hidden;
    height: 68px;
    position: relative;
}
.watermark__text {
    font-family: var(--font-family-secondary);
    font-weight: 900;
    font-size: 140px;
    color: var(--color-100);
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    padding-bottom: var(--gutter-xl);
    position: relative;
}
@media (max-width: 568px) {
    .watermark__text {
        font-size: 70px;
    }
}

/* ============================================================
   12. ABOUT SECTION
============================================================ */
.about__img-wrap {
    width: 58%;
    flex-shrink: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    overflow: hidden;
}
.about__content {
    flex: 1;
    padding: 0 3.5rem;
}
@media (max-width: 991px) {
    .about__content {
        padding: 0 0 0 3.5rem;
    }
}
@media (max-width: 768px) {
    .about__content {
        padding: 1.5rem 0 0;
        width: 100%;
        padding-left: var(--gutter-sm);
    }
    .about__img-wrap {
        width: 100%;
    }
}

/* ============================================================
   13. FOOTER
============================================================ */
.site-footer {
    position: relative;
    overflow: hidden;
}
.footer__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--color-primary) 0%, #002070 100%);
    z-index: 0;
    background-image: url(images/common/bg_footer.jpg);
    background-size: cover;
    background-position: center;
}

/* ── ロゴ白帯 ── */
.footer__logo-band {
    position: relative;
    z-index: 1;
    background: var(--color-000);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ── サイトマップ ── */
.footer__content {
    position: relative;
    z-index: 1;
    padding: 56px 0 32px;
    max-width: var(--width-content-tiet);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter-md);
    padding-right: var(--gutter-md);
}

/* 3カラム Figma配置準拠 */
.footer__sitemap {
    align-items: start;
    width: 100%;
    margin: 0 auto;
}

.footer__col {
    display: flex;
    flex-direction: column;
}

/* カラムタイトル */
.footer__col-title {
    color: #fff;
    /* 16px */
    font-weight: 700;
    line-height: 1;
    margin: 0 0 20px 0;
}

/* 矢印アイコン付きタイトル（Col3） */
.footer__col-title--link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.2s;
    display: block;
    background-image: url(images/common/ico_cursolwh-round.svg);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 18px;
}
.footer__col-title--link:hover,
.footer__col-title--link:focus-visible {
    opacity: 0.75;
    color: #fff;
}

/* リンクリスト（ダッシュ箇条書き） */
.footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.footer__link-list li {
    margin-bottom: 8px;
}
.footer__link {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #fff;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14); /* 14px */
    line-height: 28px; /* Figma: leading-[28px] */
    text-decoration: none;
    transition: color 0.2s;
}
.footer__link:hover,
.footer__link:focus-visible {
    color: #fff;
    text-decoration: underline;
}
.footer__link-dash {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-14);
}

/* 仕切り線 */
.footer__divider-wrap {
    margin: 48px calc(50% - 50vw) 24px;
    width: 100vw;
}

/* コピーライト */
.footer__copy {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-12);
    margin: 0;
}
@media (max-width: 768px) {
    p.footer__col-title {
        font-size: var(--font-size-14);
        line-height: 1.6;
    }

    a.footer__link {
        font-size: var(--font-size-12);
        line-height: 1.6;
    }

    .footer__content {
        padding: 48px 124px;
    }

    .footer__col-title--link {
        font-size: var(--font-size-14);
    }
}

.home-hero__background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    border-radius: 0 0 var(--radius-lg) 0;
}
.home-hero__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 578px) {
    .footer__content {
        padding: 48px 24px;
    }
    .home-hero__background {
        border-radius: 0 0 var(--radius-sm) 0;
    }
    .footer__col:last-child {
        width: calc(100vw - 48px);
    }
}
.color\:primary {
    color: var(--color-primary);
}

.color\:primary-light {
    color: var(--color-primary-light);
}

.color\:primary-dark {
    color: var(--color-primary-dark);
}

.color\:secondary {
    color: var(--color-secondary);
}

.color\:secondary-light {
    color: var(--color-secondary-light);
}

.color\:secondary-dark {
    color: var(--color-secondary-dark);
}

.color\:tertiary {
    color: var(--color-tertiary);
}

.color\:tertiary-light {
    color: var(--color-tertiary-light);
}

.color\:tertiary-dark {
    color: var(--color-tertiary-dark);
}

.color\:quaternary {
    color: var(--color-quaternary);
}

.color\:quaternary-light {
    color: var(--color-quaternary-light);
}

.color\:quaternary-dark {
    color: var(--color-quaternary-dark);
}

.bg-color\:primary {
    background-color: var(--color-primary);
}

.bg-color\:primary-light {
    background-color: var(--color-primary-light);
}

.bg-color\:primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-color\:secondary {
    background-color: var(--color-secondary);
}

.bg-color\:secondary-light {
    background-color: var(--color-secondary-light);
}

.bg-color\:secondary-dark {
    background-color: var(--color-secondary-dark);
}

.bg-color\:tertiary {
    background-color: var(--color-tertiary);
}

.bg-color\:tertiary-light {
    background-color: var(--color-tertiary-light);
}

.bg-color\:tertiary-dark {
    background-color: var(--color-tertiary-dark);
}

.bg-color\:quaternary {
    background-color: var(--color-quaternary);
}

.bg-color\:quaternary-light {
    background-color: var(--color-quaternary-light);
}

.bg-color\:quaternary-dark {
    background-color: var(--color-quaternary-dark);
}

.color\:900 {
    color: var(--color-900);
}

.color\:800 {
    color: var(--color-800);
}

.color\:700 {
    color: var(--color-700);
}

.color\:600 {
    color: var(--color-600);
}

.color\:500 {
    color: var(--color-500);
}

.color\:400 {
    color: var(--color-400);
}

.color\:300 {
    color: var(--color-300);
}

.color\:200 {
    color: var(--color-200);
}

.color\:100 {
    color: var(--color-100);
}

.color\:000 {
    color: var(--color-000);
}

.bg-color\:900 {
    background-color: var(--color-900);
}

.bg-color\:800 {
    background-color: var(--color-800);
}

.bg-color\:700 {
    background-color: var(--color-700);
}

.bg-color\:600 {
    background-color: var(--color-600);
}

.bg-color\:500 {
    background-color: var(--color-500);
}

.bg-color\:400 {
    background-color: var(--color-400);
}

.bg-color\:300 {
    background-color: var(--color-300);
}

.bg-color\:200 {
    background-color: var(--color-200);
}

.bg-color\:100 {
    background-color: var(--color-100);
}

.bg-color\:000 {
    background-color: var(--color-000);
}

.color\:red,
.color\:red-light {
    color: var(--color-red);
}

.color\:red-dark {
    color: var(--color-red-dark);
}

.color\:green {
    color: var(--color-green);
}

.color\:green-light {
    color: var(--color-green-light);
}

.color\:green-dark {
    color: var(--color-green-dark);
}

.color\:blue {
    color: var(--color-blue);
}

.color\:blue-light {
    color: var(--color-blue-light);
}

.color\:blue-dark {
    color: var(--color-blue-dark);
}

.bg-color\:red,
.bg-color\:red-light {
    background-color: var(--color-red);
}

.bg-color\:red-dark {
    background-color: var(--color-red-dark);
}

.bg-color\:green {
    background-color: var(--color-green);
}

.bg-color\:green-light {
    background-color: var(--color-green-light);
}

.bg-color\:green-dark {
    background-color: var(--color-green-dark);
}

.bg-color\:blue {
    background-color: var(--color-blue);
}

.bg-color\:blue-light {
    background-color: var(--color-blue-light);
}

.bg-color\:blue-dark {
    background-color: var(--color-blue-dark);
}

.font\:primary {
    font-family: var(--font-family-primary);
}

.font\:secondary {
    font-family: var(--font-family-secondary);
}

.font\:base {
    font-size: var(--font-size-base);
}

.font\:2xl {
    font-size: var(--font-size-2xl);
}

.font\:xl {
    font-size: var(--font-size-xl);
}

.font\:lg {
    font-size: var(--font-size-lg);
}

.font\:md {
    font-size: var(--font-size-md);
}

.font\:sm {
    font-size: var(--font-size-sm);
}

.font\:xs {
    font-size: var(--font-size-xs);
}

.font\:2xs {
    font-size: var(--font-size-2xs);
}

.font\:300 {
    font-weight: 300;
}

.font\:normal {
    font-weight: 400;
}

.font\:500 {
    font-weight: 500;
}

.font\:600 {
    font-weight: 600;
}

.font\:bold {
    font-weight: 700;
}

.font\:900 {
    font-weight: 900;
}

.font\:italic {
    font-style: italic;
}

.align\:inherit {
    vertical-align: inherit;
}

.align\:baseline {
    vertical-align: baseline;
}

.align\:sub {
    vertical-align: sub;
}

.align\:super {
    vertical-align: super;
}

.align\:text-top {
    vertical-align: text-top;
}

.align\:text-bottom {
    vertical-align: text-bottom;
}

.align\:top {
    vertical-align: top;
}

.align\:middle {
    vertical-align: middle;
}

.align\:bottom {
    vertical-align: bottom;
}

.text\:left {
    text-align: left;
}

.text\:center {
    text-align: center;
}

.text\:right {
    text-align: right;
}

.text\:justify {
    text-align: justify;
}

.line-height\:none {
    line-height: 1;
}

.line-height {
    line-height: var(--line-height-base);
}

.line-height\:xl {
    line-height: var(--line-height-xl);
}

.line-height\:lg {
    line-height: var(--line-height-lg);
}

.line-height\:md {
    line-height: var(--line-height-md);
}

.line-height\:sm {
    line-height: var(--line-height-sm);
}

.lh\:none {
    line-height: 1;
}

.lh {
    line-height: var(--line-height-base);
}

.lh\:2xl {
    line-height: var(--line-height-2xl);
}

.lh\:xl {
    line-height: var(--line-height-xl);
}

.lh\:lg {
    line-height: var(--line-height-lg);
}

.lh\:md {
    line-height: var(--line-height-md);
}

.lh\:sm {
    line-height: var(--line-height-sm);
}

.lh\:xs {
    line-height: var(--line-height-xs);
}

.lh\:2xs {
    line-height: var(--line-height-2xs);
}

.white-space\:normal {
    white-space: normal;
}

.white-space\:nowrap {
    white-space: nowrap;
}

.white-space\:pre {
    white-space: pre;
}

.white-space\:pre-line {
    white-space: pre-line;
}

.white-space\:break-spaces {
    white-space: break-spaces;
}

.letter-spacing\:none {
    letter-spacing: 0;
}

.letter-spacing {
    letter-spacing: var(--letter-spacing-base);
}

.letter-spacing\:xl {
    letter-spacing: var(--letter-spacing-xl);
}

.letter-spacing\:lg {
    letter-spacing: var(--letter-spacing-lg);
}

.letter-spacing\:md {
    letter-spacing: var(--letter-spacing-md);
}

.letter-spacing\:sm {
    letter-spacing: var(--letter-spacing-sm);
}

.border {
    border: var(--border-width-base) var(--border-default-style) var(--border-default-color);
}

.border\:top {
    border-top: var(--border-width-base) var(--border-default-style) var(--border-default-color);
}

.border\:right {
    border-right: var(--border-width-base) var(--border-default-style) var(--border-default-color);
}

.border\:bottom {
    border-bottom: var(--border-width-base) var(--border-default-style) var(--border-default-color);
}

.border\:left {
    border-left: var(--border-width-base) var(--border-default-style) var(--border-default-color);
}

.border.border-width {
    border-width: var(--border-width-base);
}

.border.border-width\:xl {
    border-width: var(--border-width-xl);
}

.border.border-width\:lg {
    border-width: var(--border-width-lg);
}

.border.border-width\:md {
    border-width: var(--border-width-md);
}

.border.border-width\:sm {
    border-width: var(--border-width-sm);
}

.border\:top.border-width {
    border-top-width: var(--border-width-base);
}

.border\:top.border-width\:xl {
    border-top-width: var(--border-width-xl);
}

.border\:top.border-width\:lg {
    border-top-width: var(--border-width-lg);
}

.border\:top.border-width\:md {
    border-top-width: var(--border-width-md);
}

.border\:top.border-width\:sm {
    border-top-width: var(--border-width-sm);
}

.border\:right.border-width {
    border-right-width: var(--border-width-base);
}

.border\:right.border-width\:xl {
    border-right-width: var(--border-width-xl);
}

.border\:right.border-width\:lg {
    border-right-width: var(--border-width-lg);
}

.border\:right.border-width\:md {
    border-right-width: var(--border-width-md);
}

.border\:right.border-width\:sm {
    border-right-width: var(--border-width-sm);
}

.border\:bottom.border-width {
    border-bottom-width: var(--border-width-base);
}

.border\:bottom.border-width\:xl {
    border-bottom-width: var(--border-width-xl);
}

.border\:bottom.border-width\:lg {
    border-bottom-width: var(--border-width-lg);
}

.border\:bottom.border-width\:md {
    border-bottom-width: var(--border-width-md);
}

.border\:bottom.border-width\:sm {
    border-bottom-width: var(--border-width-sm);
}

.border\:left.border-width {
    border-left-width: var(--border-width-base);
}

.border\:left.border-width\:xl {
    border-left-width: var(--border-width-xl);
}

.border\:left.border-width\:lg {
    border-left-width: var(--border-width-lg);
}

.border\:left.border-width\:md {
    border-left-width: var(--border-width-md);
}

.border\:left.border-width\:sm {
    border-left-width: var(--border-width-sm);
}

.border-style\:solid {
    border-style: solid;
}

.border-style\:dotted {
    border-style: dotted;
}

.border-style\:dashed {
    border-style: dashed;
}

.border-color\:primary {
    border-color: var(--color-primary);
}

.border-color\:primary-light {
    border-color: var(--color-primary-light);
}

.border-color\:primary-dark {
    border-color: var(--color-primary-dark);
}

.border-color\:secondary {
    border-color: var(--color-secondary);
}

.border-color\:secondary-light {
    border-color: var(--color-secondary-light);
}

.border-color\:secondary-dark {
    border-color: var(--color-secondary-dark);
}

.border-color\:tertiary {
    border-color: var(--color-tertiary);
}

.border-color\:tertiary-light {
    border-color: var(--color-tertiary-light);
}

.border-color\:tertiary-dark {
    border-color: var(--color-tertiary-dark);
}

.border-color\:quaternary {
    border-color: var(--color-quaternary);
}

.border-color\:quaternary-light {
    border-color: var(--color-quaternary-light);
}

.border-color\:quaternary-dark {
    border-color: var(--color-quaternary-dark);
}

.border-color\:900 {
    border-color: var(--color-900);
}

.border-color\:800 {
    border-color: var(--color-800);
}

.border-color\:700 {
    border-color: var(--color-700);
}

.border-color\:600 {
    border-color: var(--color-600);
}

.border-color\:500 {
    border-color: var(--color-500);
}

.border-color\:400 {
    border-color: var(--color-400);
}

.border-color\:300 {
    border-color: var(--color-300);
}

.border-color\:200 {
    border-color: var(--color-200);
}

.border-color\:100 {
    border-color: var(--color-100);
}

.border-color\:000 {
    border-color: var(--color-000);
}

.border-color\:red,
.border-color\:red-light {
    border-color: var(--color-red);
}

.border-color\:red-dark {
    border-color: var(--color-red-dark);
}

.border-color\:green {
    border-color: var(--color-green);
}

.border-color\:green-light {
    border-color: var(--color-green-light);
}

.border-color\:green-dark {
    border-color: var(--color-green-dark);
}

.border-color\:blue {
    border-color: var(--color-blue);
}

.border-color\:blue-light {
    border-color: var(--color-blue-light);
}

.border-color\:blue-dark {
    border-color: var(--color-blue-dark);
}

.radius\:none {
    border-radius: 0;
}

.radius {
    border-radius: var(--radius-base);
}

.radius\:xl {
    border-radius: var(--radius-xl);
}

.radius\:lg {
    border-radius: var(--radius-lg);
}

.radius\:md {
    border-radius: var(--radius-md);
}

.radius\:sm {
    border-radius: var(--radius-sm);
}

.mt {
    margin-top: var(--gutter-base);
}

.mt\:2xl {
    margin-top: var(--gutter-2xl);
}

.mt\:xl {
    margin-top: var(--gutter-xl);
}

.mt\:lg {
    margin-top: var(--gutter-lg);
}

.mt\:md {
    margin-top: var(--gutter-md);
}

.mt\:sm {
    margin-top: var(--gutter-sm);
}

.mt\:xs {
    margin-top: var(--gutter-xs);
}

.mt\:2xs {
    margin-top: var(--gutter-2xs);
}

.mt\:none {
    margin-top: 0;
}

.mt\:auto {
    margin-top: auto;
}

.mr {
    margin-right: var(--gutter-base);
}

.mr\:2xl {
    margin-right: var(--gutter-2xl);
}

.mr\:xl {
    margin-right: var(--gutter-xl);
}

.mr\:lg {
    margin-right: var(--gutter-lg);
}

.mr\:md {
    margin-right: var(--gutter-md);
}

.mr\:sm {
    margin-right: var(--gutter-sm);
}

.mr\:xs {
    margin-right: var(--gutter-xs);
}

.mr\:2xs {
    margin-right: var(--gutter-2xs);
}

.mr\:none {
    margin-right: 0;
}

.mr\:auto {
    margin-right: auto;
}

.mb {
    margin-bottom: var(--gutter-base);
}

.mb\:2xl {
    margin-bottom: var(--gutter-2xl);
}

.mb\:xl {
    margin-bottom: var(--gutter-xl);
}

.mb\:lg {
    margin-bottom: var(--gutter-lg);
}

.mb\:md {
    margin-bottom: var(--gutter-md);
}

.mb\:sm {
    margin-bottom: var(--gutter-sm);
}

.mb\:xs {
    margin-bottom: var(--gutter-xs);
}

.mb\:2xs {
    margin-bottom: var(--gutter-2xs);
}

.mb\:none {
    margin-bottom: 0;
}

.mb\:auto {
    margin-bottom: auto;
}

.ml {
    margin-left: var(--gutter-base);
}

.ml\:2xl {
    margin-left: var(--gutter-2xl);
}

.ml\:xl {
    margin-left: var(--gutter-xl);
}

.ml\:lg {
    margin-left: var(--gutter-lg);
}

.ml\:md {
    margin-left: var(--gutter-md);
}

.ml\:sm {
    margin-left: var(--gutter-sm);
}

.ml\:xs {
    margin-left: var(--gutter-xs);
}

.ml\:2xs {
    margin-left: var(--gutter-2xs);
}

.ml\:none {
    margin-left: 0;
}

.ml\:auto {
    margin-left: auto;
}

.mx {
    margin-right: var(--gutter-base);
    margin-left: var(--gutter-base);
}

.mx\:2xl {
    margin-right: var(--gutter-2xl);
    margin-left: var(--gutter-2xl);
}

.mx\:xl {
    margin-right: var(--gutter-xl);
    margin-left: var(--gutter-xl);
}

.mx\:lg {
    margin-right: var(--gutter-lg);
    margin-left: var(--gutter-lg);
}

.mx\:md {
    margin-right: var(--gutter-md);
    margin-left: var(--gutter-md);
}

.mx\:sm {
    margin-right: var(--gutter-sm);
    margin-left: var(--gutter-sm);
}

.mx\:xs {
    margin-right: var(--gutter-xs);
    margin-left: var(--gutter-xs);
}

.mx\:2xs {
    margin-right: var(--gutter-2xs);
    margin-left: var(--gutter-2xs);
}

.mx\:none {
    margin-right: 0;
    margin-left: 0;
}

.mx\:auto {
    margin-right: auto;
    margin-left: auto;
}

.my {
    margin-top: var(--gutter-base);
    margin-bottom: var(--gutter-base);
}

.my\:2xl {
    margin-top: var(--gutter-2xl);
    margin-bottom: var(--gutter-2xl);
}

.my\:xl {
    margin-top: var(--gutter-xl);
    margin-bottom: var(--gutter-xl);
}

.my\:lg {
    margin-top: var(--gutter-lg);
    margin-bottom: var(--gutter-lg);
}

.my\:md {
    margin-top: var(--gutter-md);
    margin-bottom: var(--gutter-md);
}

.my\:sm {
    margin-top: var(--gutter-sm);
    margin-bottom: var(--gutter-sm);
}

.my\:xs {
    margin-top: var(--gutter-xs);
    margin-bottom: var(--gutter-xs);
}

.my\:2xs {
    margin-top: var(--gutter-2xs);
    margin-bottom: var(--gutter-2xs);
}

.my\:none {
    margin-top: 0;
    margin-bottom: 0;
}

.my\:auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mg {
    margin: var(--gutter-base);
}

.mg\:2xl {
    margin: var(--gutter-2xl);
}

.mg\:xl {
    margin: var(--gutter-xl);
}

.mg\:lg {
    margin: var(--gutter-lg);
}

.mg\:md {
    margin: var(--gutter-md);
}

.mg\:sm {
    margin: var(--gutter-sm);
}

.mg\:xs {
    margin: var(--gutter-xs);
}

.mg\:2xs {
    margin: var(--gutter-2xs);
}

.mg\:none {
    margin: 0;
}

.pt {
    padding-top: var(--gutter-base);
}

.pt\:2xl {
    padding-top: var(--gutter-2xl);
}

.pt\:xl {
    padding-top: var(--gutter-xl);
}

.pt\:lg {
    padding-top: var(--gutter-lg);
}

.pt\:md {
    padding-top: var(--gutter-md);
}

.pt\:sm {
    padding-top: var(--gutter-sm);
}

.pt\:xs {
    padding-top: var(--gutter-xs);
}

.pt\:2xs {
    padding-top: var(--gutter-2xs);
}

.pt\:none {
    padding-top: 0;
}

.pr {
    padding-right: var(--gutter-base);
}

.pr\:2xl {
    padding-right: var(--gutter-2xl);
}

.pr\:xl {
    padding-right: var(--gutter-xl);
}

.pr\:lg {
    padding-right: var(--gutter-lg);
}

.pr\:md {
    padding-right: var(--gutter-md);
}

.pr\:sm {
    padding-right: var(--gutter-sm);
}

.pr\:xs {
    padding-right: var(--gutter-xs);
}

.pr\:2xs {
    padding-right: var(--gutter-2xs);
}

.pr\:none {
    padding-right: 0;
}

.pb {
    padding-bottom: var(--gutter-base);
}

.pb\:2xl {
    padding-bottom: var(--gutter-2xl);
}

.pb\:xl {
    padding-bottom: var(--gutter-xl);
}

.pb\:lg {
    padding-bottom: var(--gutter-lg);
}

.pb\:md {
    padding-bottom: var(--gutter-md);
}

.pb\:sm {
    padding-bottom: var(--gutter-sm);
}

.pb\:xs {
    padding-bottom: var(--gutter-xs);
}

.pb\:2xs {
    padding-bottom: var(--gutter-2xs);
}

.pb\:none {
    padding-bottom: 0;
}

.pl {
    padding-left: var(--gutter-base);
}

.pl\:2xl {
    padding-left: var(--gutter-2xl);
}

.pl\:xl {
    padding-left: var(--gutter-xl);
}

.pl\:lg {
    padding-left: var(--gutter-lg);
}

.pl\:md {
    padding-left: var(--gutter-md);
}

.pl\:sm {
    padding-left: var(--gutter-sm);
}

.pl\:xs {
    padding-left: var(--gutter-xs);
}

.pl\:2xs {
    padding-left: var(--gutter-2xs);
}

.pl\:none {
    padding-left: 0;
}

.px {
    padding-right: var(--gutter-base);
    padding-left: var(--gutter-base);
}

.px\:2xl {
    padding-right: var(--gutter-2xl);
    padding-left: var(--gutter-2xl);
}

.px\:xl {
    padding-right: var(--gutter-xl);
    padding-left: var(--gutter-xl);
}

.px\:lg {
    padding-right: var(--gutter-lg);
    padding-left: var(--gutter-lg);
}

.px\:md {
    padding-right: var(--gutter-md);
    padding-left: var(--gutter-md);
}

.px\:sm {
    padding-right: var(--gutter-sm);
    padding-left: var(--gutter-sm);
}

.px\:xs {
    padding-right: var(--gutter-xs);
    padding-left: var(--gutter-xs);
}

.px\:2xs {
    padding-right: var(--gutter-2xs);
    padding-left: var(--gutter-2xs);
}

.px\:none {
    padding-right: 0;
    padding-left: 0;
}

.px\:auto {
    padding-right: auto;
    padding-left: auto;
}

.py {
    padding-top: var(--gutter-base);
    padding-bottom: var(--gutter-base);
}

.py\:2xl {
    padding-top: var(--gutter-2xl);
    padding-bottom: var(--gutter-2xl);
}

.py\:xl {
    padding-top: var(--gutter-xl);
    padding-bottom: var(--gutter-xl);
}

.py\:lg {
    padding-top: var(--gutter-lg);
    padding-bottom: var(--gutter-lg);
}

.py\:md {
    padding-top: var(--gutter-md);
    padding-bottom: var(--gutter-md);
}

.py\:sm {
    padding-top: var(--gutter-sm);
    padding-bottom: var(--gutter-sm);
}

.py\:xs {
    padding-top: var(--gutter-xs);
    padding-bottom: var(--gutter-xs);
}

.py\:2xs {
    padding-top: var(--gutter-2xs);
    padding-bottom: var(--gutter-2xs);
}

.py\:none {
    padding-top: 0;
    padding-bottom: 0;
}

.py\:auto {
    padding-top: auto;
    padding-bottom: auto;
}

.pd {
    padding: var(--gutter-base);
}

.pd\:2xl {
    padding: var(--gutter-2xl);
}

.pd\:xl {
    padding: var(--gutter-xl);
}

.pd\:lg {
    padding: var(--gutter-lg);
}

.pd\:md {
    padding: var(--gutter-md);
}

.pd\:sm {
    padding: var(--gutter-sm);
}

.pd\:xs {
    padding: var(--gutter-xs);
}

.pd\:2xs {
    padding: var(--gutter-2xs);
}

.pd\:none {
    padding: 0;
}