:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #647087;
    --line: #dde3ec;
    --navy: #152d50;
    --blue: #0967e8;
    --blue-hover: #0758c8;
    --soft-blue: #eef5ff;
    --radius: 14px;
    --shadow: 0 8px 28px rgba(29, 48, 77, 0.07);
    --container: 1040px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.site-header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    width: min(calc(100% - 40px), var(--container));
    min-height: 72px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}
.site-brand img { width: 164px; }
.site-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    white-space: nowrap;
}
.site-nav a, .footer-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .footer-nav a:hover { color: var(--blue); }
.nav-label--mobile { display: none; }

.site-main { min-height: 65vh; }
.home-hero {
    padding: var(--intro-space-top, 82px) 0 var(--intro-space-bottom, 54px);
}
.home-hero h1,
.tool-heading h1,
.prose-page h1 {
    margin: 4px 0 14px;
    line-height: 1.35;
    letter-spacing: -.025em;
}
.home-hero h1 { font-size: var(--intro-title-size, clamp(32px, 5vw, 50px)); }
.home-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: var(--intro-lead-size, 17px);
}
.eyebrow {
    margin: 0;
    color: var(--blue);
    font-weight: 700;
    font-size: var(--intro-eyebrow-size, 12px);
    letter-spacing: .14em;
}

.section { padding: 40px 0 64px; }
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.section-heading h2 { margin: 3px 0 0; font-size: 26px; }
.section-heading__note { margin: 0; color: var(--muted); font-size: 14px; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}
.tool-card {
    display: block;
    min-height: 230px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tool-card:hover {
    transform: translateY(-2px);
    border-color: #b9c9e2;
    box-shadow: 0 12px 34px rgba(29,48,77,.10);
}
.tool-card__topline { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.tool-card__category { color: var(--muted); font-size: 12px; font-weight: 600; }
.tool-card h3 { margin: 20px 0 8px; line-height: 1.45; font-size: 20px; }
.tool-card p { margin: 0; color: var(--muted); font-size: 14px; }
.tool-card__link { display: inline-block; margin-top: 20px; color: var(--blue); font-weight: 700; font-size: 14px; }

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.status-badge--coming { color: #5d687a; background: #eef1f5; }
.status-badge--beta { color: #775900; background: #fff4c5; }

.plain-panel,
.tool-placeholder {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
}
.plain-panel h2 { margin-top: 0; }
.plain-panel p, .tool-placeholder p { color: var(--muted); }
.text-link, .back-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.text-link:hover, .back-link:hover { text-decoration: underline; }

.tool-page, .prose-page { padding: 54px 0 80px; }
.tool-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin: 22px 0 28px;
}
.tool-heading h1,
.prose-page h1 {
    font-size: var(--intro-title-size, clamp(28px, 4vw, 40px));
}
.tool-heading p {
    margin: 0;
    color: var(--muted);
    max-width: 760px;
    font-size: var(--intro-lead-size, 16px);
}
.tool-placeholder { border-style: dashed; }
.prose-page { max-width: 760px; }
.prose-page p { color: #3f4b60; }

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.site-footer__inner {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
    padding: 28px 0 34px;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    font-size: 13px;
}
.site-footer__copy { margin: 18px 0 0; color: #8b94a4; font-size: 12px; }

@media (max-width: 720px) {
    .container, .site-header__inner, .site-footer__inner {
        width: min(calc(100% - 28px), var(--container));
    }
    .site-header__inner {
        min-height: 64px;
        gap: 12px;
    }
    .site-brand img { width: 126px; }
    .site-nav {
        gap: 12px;
        font-size: 12.5px;
    }
    .nav-label--desktop { display: none; }
    .nav-label--mobile { display: inline; }

    .home-hero {
        padding-top: var(--intro-space-top, 42px);
        padding-bottom: var(--intro-space-bottom, 24px);
    }
    .section { padding: 30px 0 48px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .tool-grid { grid-template-columns: 1fr; }
    .tool-card { min-height: auto; }
    .tool-heading { flex-direction: column; gap: 14px; }
    .tool-page, .prose-page { padding: 38px 0 60px; }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
    }
    .footer-nav a { display: block; }
}

@media (max-width: 360px) {
    .site-brand img { width: 112px; }
    .site-nav { gap: 9px; font-size: 12px; }
}