:root { --ink:#0d1b2a; --ink-soft:#29445c; --blue:#1261d6; --blue-dark:#0d3f91; --cyan:#45d0e6; --paper:#f4f7fb; --line:#d7e0ea; --white:#fff; --radius:22px; --shadow:0 18px 50px rgba(13,27,42,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.topbar { background:var(--ink); color:#dce8f7; font-size:13px; }
.topbar .container { display:flex; justify-content:space-between; gap:18px; padding:8px 0; }
.header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:78px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.02em; }
.brand img { width:38px; height:38px; }
.brand small { display:block; color:#66809b; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:22px; font-size:14px; color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active { color:var(--blue); }
.nav-cta { padding:10px 16px; color:var(--white)!important; background:var(--blue); border-radius:999px; font-weight:700; }
.menu { display:none; border:1px solid var(--line); background:var(--white); border-radius:10px; padding:8px 11px; color:var(--ink); }
.hero { padding:86px 0 76px; background:radial-gradient(circle at 85% 5%, rgba(69,208,230,.24), transparent 34%), linear-gradient(135deg,#f7fbff 0%,#e9f2ff 100%); }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center; }
.eyebrow { color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:14px 0 20px; font-size:clamp(36px,5vw,64px); line-height:1.14; letter-spacing:-.045em; }
h2 { margin:0 0 12px; font-size:clamp(26px,3vw,40px); line-height:1.25; letter-spacing:-.03em; }
h3 { margin:0 0 8px; font-size:20px; line-height:1.35; }
.lead { max-width:650px; font-size:18px; color:var(--ink-soft); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--blue); background:var(--blue); color:var(--white); font-weight:800; }
.button.secondary { background:transparent; color:var(--blue-dark); border-color:#9fb9dc; }
.button.light { background:var(--white); color:var(--blue-dark); border-color:var(--white); }
.hero-photo { border-radius:30px; overflow:hidden; box-shadow:var(--shadow); background:var(--ink); }
.hero-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.hero-photo figcaption { padding:12px 16px; color:#dbe9fa; font-size:12px; }
.section { padding:76px 0; }
.section.tint { background:#edf4fb; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.section-head p { max-width:560px; margin:0; color:var(--ink-soft); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 8px 24px rgba(13,27,42,.04); }
.card p { color:var(--ink-soft); margin:8px 0 0; }
.card .icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; margin-bottom:18px; background:#e4f6fa; color:var(--blue-dark); font-weight:900; }
.media-card { overflow:hidden; padding:0; }
.media-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.media-card .card-copy { padding:22px; }
.tag { display:inline-flex; padding:5px 9px; border-radius:999px; background:#e8f1ff; color:var(--blue-dark); font-size:12px; font-weight:800; }
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#b8cde6; border:1px solid #b8cde6; border-radius:var(--radius); overflow:hidden; }
.stat { padding:24px; background:var(--white); }
.stat strong { display:block; font-size:28px; line-height:1.2; color:var(--blue-dark); }
.stat span { color:var(--ink-soft); font-size:13px; }
.band { padding:50px 0; color:var(--white); background:linear-gradient(110deg,#0d2c50,#0d5ac7); }
.band-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.band p { color:#dcecff; margin:8px 0 0; }
.page-hero { padding:62px 0 54px; background:linear-gradient(135deg,#0d1b2a,#155ab7); color:var(--white); }
.page-hero .lead { color:#d8e7f8; }
.breadcrumbs { margin-bottom:18px; font-size:13px; color:#9fc0e9; }
.checklist { display:grid; gap:14px; margin:22px 0 0; padding:0; list-style:none; }
.checklist li { position:relative; padding-left:28px; color:var(--ink-soft); }
.checklist li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--blue); font-weight:900; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.product { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--white); }
.product img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#eaf0f6; }
.product .copy { padding:15px; }
.product small { color:#66809b; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step; }
.step { position:relative; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--white); }
.step::before { counter-increment:step; content:counter(step, decimal-leading-zero); display:block; margin-bottom:12px; color:var(--cyan); font-size:25px; font-weight:900; }
.faq { border-top:1px solid var(--line); padding:16px 0; }
.faq summary { cursor:pointer; font-weight:800; }
.faq p { color:var(--ink-soft); margin:8px 0 0; }
.form { display:grid; gap:14px; }
.form label { display:grid; gap:6px; font-weight:700; font-size:14px; }
.form input, .form select, .form textarea { width:100%; border:1px solid #b9c9d9; border-radius:12px; padding:12px 13px; background:var(--white); color:var(--ink); font:inherit; }
.form textarea { min-height:140px; resize:vertical; }
.notice { padding:16px 18px; border-left:4px solid var(--cyan); background:#edf9fb; color:var(--ink-soft); border-radius:10px; }
.footer { padding:44px 0 28px; background:var(--ink); color:#cbdced; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer a { color:#edf6ff; }
.footer p { color:#a9bfd5; }
.footer-bottom { display:flex; justify-content:space-between; gap:18px; border-top:1px solid #30445a; margin-top:34px; padding-top:18px; font-size:12px; color:#91a9c0; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; gap:32px; } .grid-3 { grid-template-columns:repeat(2,1fr); } .product-grid { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:repeat(2,1fr); } .stat-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .container { width:min(100% - 28px, 1160px); } .topbar .container { display:block; } .topbar span:last-child { display:none; } .nav { min-height:68px; } .menu { display:block; } .nav-links { display:none; position:absolute; left:14px; right:14px; top:64px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:4px; } .nav-links.open { display:flex; } .nav-links a { padding:9px 10px; } .nav-cta { text-align:center; } .hero { padding:58px 0 48px; } .section { padding:54px 0; } .section-head, .band-inner { display:block; } .section-head .button, .band-inner .button { margin-top:18px; } .grid-3, .grid-2 { grid-template-columns:1fr; } .steps { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:18px; } .footer-bottom { display:block; } }