/*
 * SabaKan Design Foundation v1
 * Source of truth: /Design.md
 * Load before style.css. Shared classes use the ds- prefix.
 */

@font-face {
    font-family: "LINE Seed JP";
    src: url("../fonts/line-seed-jp/LINESeedJP-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed JP";
    src: url("../fonts/line-seed-jp/LINESeedJP-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "LINE Seed JP";
    src: url("../fonts/line-seed-jp/LINESeedJP-ExtraBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    /* Mackerel-inspired neutral surfaces: silver first, blue second. */
    --sv-color-saba-50: #f6f8f9;
    --sv-color-saba-100: #eef2f4;
    --sv-color-saba-200: #d7e0e5;
    --sv-color-navy-900: #00174b;
    --sv-color-navy-800: #07366d;
    --sv-color-ink: #092247;
    --sv-color-brand: #1261c3;
    --sv-color-brand-strong: #0b57aa;
    --sv-color-accent: #07485b;
    --sv-color-accent-strong: #0b5f77;
    --sv-color-accent-soft: #e9f2f4;
    --sv-color-muted: #52647a;
    --sv-color-border: var(--sv-color-saba-200);
    --sv-color-soft-blue: var(--sv-color-saba-100);
    --sv-color-soft-gray: var(--sv-color-saba-50);
    --sv-color-white: #fff;
    --sv-color-success: #18875f;
    --sv-color-warning: #a85a00;

    --sv-font-sans: "LINE Seed JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

    --sv-text-xs: 12px;
    --sv-text-sm: 14px;
    --sv-text-base: 16px;
    --sv-text-lg: 18px;
    --sv-text-xl: 22px;
    --sv-text-2xl: 28px;
    --sv-text-3xl: 34px;
    --sv-text-4xl: 44px;

    --sv-space-1: 4px;
    --sv-space-2: 8px;
    --sv-space-3: 12px;
    --sv-space-4: 16px;
    --sv-space-5: 20px;
    --sv-space-6: 24px;
    --sv-space-8: 32px;
    --sv-space-10: 40px;
    --sv-space-12: 48px;
    --sv-space-16: 64px;
    --sv-space-21: 84px;
    --sv-space-24: 96px;

    --sv-container-wide: 1280px;
    --sv-container-default: 1188px;
    --sv-container-reading: 840px;
    --sv-container-narrow: 720px;
    --sv-gutter-wide: 32px;
    --sv-gutter-tablet: 14px;
    --sv-gutter-mobile: 12px;

    --sv-radius-control: 8px;
    --sv-radius-card: 12px;
    --sv-radius-media: 16px;
    --sv-radius-pill: 999px;

    --sv-shadow-card: 0 14px 34px rgba(16, 66, 124, .07);
    --sv-shadow-float: 0 18px 42px rgba(0, 23, 75, .18);
    --sv-action-shadow: 0 8px 18px rgba(7, 72, 91, .18);
    --sv-focus-ring: 0 0 0 3px rgba(7, 72, 91, .28);
    --sv-transition: 180ms ease;
}

.ds-container {
    width: min(var(--sv-container-wide), calc(100% - (var(--sv-gutter-wide) * 2)));
    margin-inline: auto;
}

.ds-container--default {
    max-width: var(--sv-container-default);
}

.ds-container--reading {
    max-width: var(--sv-container-reading);
}

.ds-container--narrow {
    max-width: var(--sv-container-narrow);
}

.ds-section {
    padding-block: var(--sv-space-21);
}

.ds-section--tight {
    padding-block: var(--sv-space-16);
}

.ds-section--spacious {
    padding-block: var(--sv-space-24);
}

.ds-section--soft {
    background: var(--sv-color-soft-blue);
}

.ds-section--navy {
    color: var(--sv-color-white);
    background: var(--sv-color-navy-900);
}

.ds-stack {
    --ds-stack-space: var(--sv-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ds-stack-space);
}

.ds-stack--sm {
    --ds-stack-space: var(--sv-space-3);
}

.ds-stack--lg {
    --ds-stack-space: var(--sv-space-10);
}

.ds-cluster {
    --ds-cluster-space: var(--sv-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-cluster-space);
    align-items: center;
}

.ds-cluster--between {
    justify-content: space-between;
}

.ds-grid {
    --ds-grid-min: 250px;
    --ds-grid-space: var(--sv-space-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-min)), 1fr));
    gap: var(--ds-grid-space);
}

.ds-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-grid--wide-aside {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr);
}

.ds-section-heading {
    max-width: 760px;
    margin-bottom: var(--sv-space-8);
}

.ds-section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.ds-kicker {
    margin: 0 0 var(--sv-space-2);
    color: var(--sv-color-accent);
    font-size: var(--sv-text-xs);
    font-weight: 800;
    letter-spacing: .12em;
}

.ds-title {
    margin: 0;
    color: var(--sv-color-ink);
    font-size: var(--sv-text-3xl);
    font-weight: 800;
    line-height: 1.4;
    text-wrap: pretty;
}

.ds-section-heading--center .ds-title {
    text-wrap: balance;
}

.ds-lead {
    margin: var(--sv-space-3) 0 0;
    color: var(--sv-color-muted);
    font-size: var(--sv-text-base);
    font-weight: 400;
    line-height: 1.9;
    text-wrap: pretty;
}

.ds-meta {
    color: var(--sv-color-muted);
    font-size: var(--sv-text-sm);
    line-height: 1.65;
}

.ds-surface {
    padding: var(--sv-space-8);
    background: var(--sv-color-white);
    border: 1px solid var(--sv-color-border);
    border-radius: var(--sv-radius-card);
}

.ds-surface--soft {
    background: var(--sv-color-soft-blue);
}

.ds-surface--raised {
    box-shadow: var(--sv-shadow-card);
}

.ds-surface--navy {
    color: var(--sv-color-white);
    background: var(--sv-color-navy-800);
    border-color: rgba(216, 228, 241, .28);
    box-shadow: var(--sv-shadow-float);
}

.ds-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--sv-space-2);
    padding: 10px 24px;
    color: var(--sv-color-brand);
    font: inherit;
    font-size: var(--sv-text-sm);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    background: var(--sv-color-white);
    border: 1px solid var(--sv-color-accent);
    border-radius: var(--sv-radius-pill);
    cursor: pointer;
    transition: color var(--sv-transition), background-color var(--sv-transition), border-color var(--sv-transition), box-shadow var(--sv-transition), transform var(--sv-transition);
}

.ds-button:hover {
    transform: translateY(-1px);
}

.ds-button--primary {
    color: var(--sv-color-white);
    background: var(--sv-color-accent);
    border-color: var(--sv-color-accent);
    box-shadow: var(--sv-action-shadow);
}

.ds-button--primary:hover {
    background: var(--sv-color-accent-strong);
    border-color: var(--sv-color-accent-strong);
}

.ds-button--secondary:hover {
    color: var(--sv-color-white);
    background: var(--sv-color-accent);
}

.ds-button--text {
    min-height: 44px;
    padding-inline: 0;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--sv-color-accent);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
    color: var(--sv-color-muted);
    background: var(--sv-color-saba-100);
    border-color: var(--sv-color-saba-200);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.ds-button:focus-visible,
.ds-control:focus-visible,
.ds-link-list a:focus-visible {
    outline: 0;
    box-shadow: var(--sv-focus-ring);
}

.ds-field {
    display: grid;
    gap: var(--sv-space-2);
    color: var(--sv-color-ink);
    font-size: 13px;
    font-weight: 700;
}

.ds-control {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    color: var(--sv-color-ink);
    font: inherit;
    background: var(--sv-color-white);
    border: 1px solid #b8cde2;
    border-radius: var(--sv-radius-control);
}

.ds-link-list {
    border-top: 2px solid var(--sv-color-brand);
    border-bottom: 1px solid var(--sv-color-border);
}

.ds-link-list a {
    display: block;
    min-height: 72px;
    padding: var(--sv-space-4) var(--sv-space-2);
    color: var(--sv-color-ink);
    text-decoration: none;
    border-top: 1px solid var(--sv-color-border);
    transition: color var(--sv-transition), background-color var(--sv-transition);
}

.ds-link-list a:first-child {
    border-top: 0;
}

.ds-link-list a:hover {
    color: var(--sv-color-brand);
    background: var(--sv-color-soft-blue);
}

.ds-eyecatch {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--sv-color-soft-blue);
    border-radius: var(--sv-radius-card);
}

.ds-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--sv-color-border);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.u-text-center {
    text-align: center !important;
}

.u-mt-0 {
    margin-top: 0 !important;
}

.u-mb-0 {
    margin-bottom: 0 !important;
}

@supports (word-break: auto-phrase) {
    .ds-title:lang(ja),
    .ds-lead:lang(ja) {
        word-break: auto-phrase;
    }
}

@media (max-width: 980px) {
    .ds-container {
        width: min(var(--sv-container-narrow), calc(100% - (var(--sv-gutter-tablet) * 2)));
    }

    .ds-grid--wide-aside,
    .ds-grid--3 {
        grid-template-columns: 1fr;
    }

    .ds-section {
        padding-block: var(--sv-space-16);
    }
}

@media (max-width: 720px) {
    .ds-container {
        width: calc(100% - (var(--sv-gutter-mobile) * 2));
    }

    .ds-grid--2,
    .ds-grid--3 {
        grid-template-columns: 1fr;
    }

    .ds-section,
    .ds-section--spacious {
        padding-block: 56px;
    }

    .ds-title {
        font-size: var(--sv-text-2xl);
    }

    .ds-surface {
        padding: var(--sv-space-6) var(--sv-space-5);
    }

    .ds-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-button,
    .ds-link-list a {
        transition: none;
    }
}