:root {
    --isys-blue: #0b5ed7;
    --isys-blue-dark: #073f91;
    --isys-blue-soft: #eaf3ff;
    --isys-navy: #0b1f3a;
    --isys-text: #25324a;
    --isys-muted: #667085;
    --isys-border: #d9e4f5;
    --isys-bg: #f7fbff;
    --isys-white: #ffffff;
    --isys-shadow: 0 18px 45px rgba(11, 31, 58, 0.10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--isys-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.8;
    background: var(--isys-white);
}

a { color: var(--isys-blue); text-decoration: none; }
a:hover { color: var(--isys-blue-dark); }

.site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(217, 228, 245, 0.8);
}

.navbar-brand img {
    width: 132px;
    height: auto;
    display: block;
}

.nav-link {
    color: var(--isys-navy);
    font-weight: 700;
    font-size: 0.95rem;
}

.nav-link.active,
.nav-link:hover { color: var(--isys-blue); }

.btn-isys {
    color: #fff;
    background: linear-gradient(135deg, var(--isys-blue), #1e88ff);
    border: 0;
    border-radius: 999px;
    padding: 0.9rem 1.6rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(11, 94, 215, 0.25);
}

.btn-isys:hover { color: #fff; transform: translateY(-1px); }

.btn-outline-isys {
    color: var(--isys-blue-dark);
    border: 1px solid var(--isys-border);
    border-radius: 999px;
    padding: 0.85rem 1.45rem;
    font-weight: 800;
    background: #fff;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 84px;
    background:
        radial-gradient(circle at 85% 10%, rgba(11, 94, 215, 0.18), transparent 32%),
        linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #eaf3ff 100%);
}

.hero:before {
    content: "";
    position: absolute;
    right: -120px;
    top: 60px;
    width: 360px;
    height: 360px;
    border: 46px solid rgba(11, 94, 215, 0.07);
    border-radius: 50%;
}

.hero-label,
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--isys-blue);
    background: var(--isys-blue-soft);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.hero h1 {
    color: var(--isys-navy);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.15;
    font-size: clamp(2.35rem, 5vw, 4.7rem);
    margin-top: 1.2rem;
}

.hero-lead {
    max-width: 760px;
    color: #344054;
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    font-weight: 600;
    margin-top: 1.25rem;
}

.hero-panel,
.card-isys,
.stat-box,
.case-card,
.price-card,
.flow-card,
.faq-card {
    background: #fff;
    border: 1px solid var(--isys-border);
    border-radius: 24px;
    box-shadow: var(--isys-shadow);
}

.hero-panel { padding: 28px; }

.hero-panel .check-list { margin: 0; padding: 0; list-style: none; }
.hero-panel .check-list li { display: flex; gap: 0.7rem; margin-bottom: 0.9rem; font-weight: 700; }
.hero-panel .check-list i { color: var(--isys-blue); }

.section-padding { padding: 82px 0; }
.bg-soft { background: var(--isys-bg); }
.section-title {
    color: var(--isys-navy);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.section-description { color: var(--isys-muted); font-size: 1.05rem; }

.card-isys { height: 100%; padding: 30px; }
.card-isys h3, .case-card h3, .flow-card h3 { color: var(--isys-navy); font-size: 1.25rem; font-weight: 900; margin: 1rem 0 0.7rem; }
.icon-circle {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--isys-blue), #33a2ff);
    border-radius: 17px;
    font-size: 1.5rem;
}

.stat-box { padding: 24px; height: 100%; }
.stat-number { color: var(--isys-blue); font-size: 2.15rem; font-weight: 900; line-height: 1.1; }

.problem-box {
    border-left: 4px solid var(--isys-blue);
    background: #fff;
    padding: 22px 24px;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
}

.case-card { height: 100%; padding: 28px; }
.case-tag {
    display: inline-block;
    color: var(--isys-blue-dark);
    background: var(--isys-blue-soft);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.flow-card { height: 100%; padding: 26px; position: relative; }
.flow-number { color: rgba(11, 94, 215, 0.16); font-size: 3.4rem; font-weight: 900; line-height: 1; }

.price-card { height: 100%; padding: 30px; }
.price-card.featured { border: 2px solid var(--isys-blue); transform: translateY(-4px); }
.price { color: var(--isys-navy); font-size: 2rem; font-weight: 900; }
.price small { color: var(--isys-muted); font-size: 0.9rem; font-weight: 700; }

.table-isys th { color: var(--isys-navy); width: 34%; background: var(--isys-bg); }
.table-isys th, .table-isys td { padding: 1rem; border-color: var(--isys-border); }

.cta-section {
    color: #fff;
    padding: 72px 0;
    background: linear-gradient(135deg, var(--isys-blue-dark), var(--isys-blue));
}
.cta-section h2 { font-weight: 900; }

.breadcrumb-area { background: var(--isys-bg); border-bottom: 1px solid var(--isys-border); }
.breadcrumb { margin: 0; padding: 1rem 0; }

.form-control, .form-select { border-radius: 14px; border-color: var(--isys-border); padding: 0.85rem 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--isys-blue); box-shadow: 0 0 0 0.2rem rgba(11, 94, 215, 0.12); }

.site-footer { background: var(--isys-navy); color: rgba(255,255,255,.75); padding: 52px 0 26px; }
.site-footer a { color: rgba(255,255,255,.86); }
.footer-logo img { width: 120px; background: #fff; border-radius: 12px; padding: 4px; }

@media (max-width: 991.98px) {
    .hero { padding: 68px 0 56px; }
    .section-padding { padding: 58px 0; }
    .price-card.featured { transform: none; }
}