:root{
    --navy:#102a43;
    --navy2:#173f5f;
    --blue:#1769aa;
    --blue2:#2f80c7;
    --sky:#eef7ff;
    --sky2:#f7fbff;
    --green:#2f8f75;
    --orange:#e58b2a;
    --purple:#7357b8;
    --pink:#b95776;
    --text:#25313c;
    --sub:#627181;
    --line:#dfe7ee;
    --white:#fff;
    --shadow:0 12px 34px rgba(22,55,82,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    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.85;
    background:#fff;
}
a{color:var(--blue)}
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(223,231,238,.9);
    backdrop-filter:blur(8px);
}
.header-inner{
    width:min(1160px,calc(100% - 34px));
    margin:0 auto;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--navy);
    white-space:nowrap;
}
.brand-mark{
    width:42px;height:42px;border-radius:11px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--navy),var(--blue2));
    color:#fff;font-weight:800;font-size:1.2rem;
    box-shadow:0 6px 16px rgba(23,105,170,.20);
}
.brand-main{display:block;font-size:1.05rem;font-weight:800;line-height:1.15}
.brand-sub{display:block;margin-top:3px;color:#7a8997;font-size:.66rem}
.global-nav{display:flex;align-items:center;gap:5px}
.global-nav a{
    padding:9px 11px;color:#384a59;text-decoration:none;
    font-size:.9rem;font-weight:650;border-radius:8px;
}
.global-nav a:hover,.global-nav a.current{color:var(--blue);background:#eef6fc}
.global-nav .nav-contact{
    margin-left:7px;padding:10px 16px;color:#fff;background:var(--blue);
}
.wrap{width:min(1080px,calc(100% - 34px));margin:0 auto}
.breadcrumb{padding:17px 0;color:#7c8995;font-size:.86rem}
.breadcrumb a{color:#687785;text-decoration:none}

/* hero */
.hero{
    position:relative;overflow:hidden;color:#fff;
    background:
      radial-gradient(circle at 88% 18%,rgba(255,255,255,.14),transparent 28%),
      linear-gradient(135deg,#102a43 0%,#174f78 58%,#1769aa 100%);
}
.hero-inner{
    width:min(1080px,calc(100% - 34px));margin:0 auto;
    padding:76px 0 72px;
}
.hero-kicker{margin:0 0 12px;color:#acd9f3;font-size:.8rem;font-weight:800;letter-spacing:.15em}
.hero h1{margin:0 0 18px;font-size:clamp(2.35rem,5vw,3.85rem);line-height:1.2}
.hero .lead{max-width:860px;margin:0;color:#eaf5fb;font-size:1.08rem}
.hero-summary{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;
}
.hero-summary a{
    padding:7px 13px;border:1px solid rgba(255,255,255,.28);
    border-radius:999px;background:rgba(255,255,255,.08);
    color:#fff;text-decoration:none;font-size:.82rem;
}

/* sections */
.section{padding:72px 0}
.section.soft{background:var(--sky2)}
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:11px;
    color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.14em
}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--blue2)}
.section-title{
    margin:0 0 18px;color:var(--navy);
    font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.45
}
.section-lead{max-width:860px;margin:0 0 34px;color:#586979;font-size:1.02rem}
.category-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.category{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 22px rgba(22,55,82,.05);
}
.category-head{
    padding:23px 25px;
    display:flex;align-items:center;gap:15px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#f8fbfd);
}
.icon{
    flex:0 0 auto;width:49px;height:49px;
    display:grid;place-items:center;border-radius:13px;
    background:#eaf5fd;font-size:1.45rem;
}
.category:nth-child(2) .icon{background:#eef8ef}
.category:nth-child(3) .icon{background:#fff5e8}
.category:nth-child(4) .icon{background:#f0efff}
.category:nth-child(5) .icon{background:#eef8f7}
.category:nth-child(6) .icon{background:#fff0f4}
.category:nth-child(7) .icon{background:#f5f0ff}
.category:nth-child(8) .icon{background:#fff6e8}
.category:nth-child(9) .icon{background:#edf6fc}
.category:nth-child(10) .icon{background:#eff8f4}
.category:nth-child(11) .icon{background:#fff1f1}
.category:nth-child(12) .icon{background:#f2f3f5}
.category-head h2{margin:0;color:var(--navy);font-size:1.22rem}
.category-head p{margin:2px 0 0;color:#80909d;font-size:.78rem}
.function-list{margin:0;padding:8px 25px 19px;list-style:none}
.function-list li{
    padding:15px 0;border-bottom:1px dashed #dce5ec;
}
.function-list li:last-child{border-bottom:0}
.function-list strong{
    display:block;margin-bottom:3px;color:#253a4d;font-size:.98rem;
}
.function-list span{
    display:block;color:#61717f;font-size:.9rem;line-height:1.65;
}

/* special */
.note{
    margin-top:36px;padding:27px 30px;border-radius:16px;
    background:#eef7ff;border:1px solid #d8ebf8;
}
.note strong{color:var(--navy)}
.statement{
    padding:39px;border-radius:20px;color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--navy2));
}
.statement h2{margin:0 0 14px;font-size:clamp(1.6rem,3vw,2.15rem)}
.statement p{margin:0;color:#dcebf4}
.link-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;
}
.link-card{
    display:block;padding:24px;border:1px solid var(--line);
    border-radius:14px;background:#fff;text-decoration:none;
    box-shadow:0 6px 18px rgba(22,55,82,.04);
}
.link-card strong{display:block;color:var(--navy);margin-bottom:6px}
.link-card span{display:block;color:#687887;font-size:.88rem}

/* CTA/footer */
.contact-cta{
    padding:70px 0;color:#fff;text-align:center;
    background:linear-gradient(135deg,#0f263a 0%,#153d5b 60%,#1769aa 120%);
}
.contact-inner{width:min(900px,calc(100% - 34px));margin:0 auto}
.contact-label{margin:0 0 8px;color:#9fd8f5;font-size:.78rem;font-weight:800;letter-spacing:.14em}
.contact-cta h2{margin:0 0 15px;font-size:clamp(1.8rem,4vw,2.55rem)}
.contact-cta p{color:#d9e9f2}
.button-row{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.btn{
    display:inline-block;padding:12px 24px;border-radius:9px;
    text-decoration:none;font-weight:800;
}
.btn-primary{color:var(--navy);background:#fff}
.btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.07)}
.site-footer{padding:32px 0;color:#82909e;background:#0b1d2c}
.footer-inner{
    width:min(1080px,calc(100% - 34px));margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;gap:25px
}
.footer-brand{margin:0;color:#e3edf4;font-weight:750}
.footer-sub{margin:3px 0 0;font-size:.76rem}
.footer-links{display:flex;flex-wrap:wrap;gap:18px}
.footer-links a{color:#acbac5;text-decoration:none;font-size:.85rem}

@media(max-width:920px){
    .global-nav a:not(.nav-contact){display:none}
    .category-grid{grid-template-columns:1fr}
    .link-cards{grid-template-columns:1fr}
}
@media(max-width:700px){
    .header-inner{min-height:66px}
    .brand-sub{display:none}
    .brand-mark{width:38px;height:38px}
    .global-nav .nav-contact{padding:9px 12px;font-size:.82rem}
    .section{padding:52px 0}
    .hero-inner{padding:50px 0 54px}
    .category-head{padding:20px}
    .function-list{padding-left:20px;padding-right:20px}
    .statement{padding:29px 23px}
    .footer-inner{display:block;text-align:center}
    .footer-links{justify-content:center;margin-top:17px}
}