:root { --navy:#0f2c5c; --blue:#2167c7; --sky:#eaf4ff; --green:#139579; --ink:#172338; --muted:#5c6b80; --line:#dce5ef; --surface:#f6f9fc; --white:#fff; --shadow:0 18px 50px rgba(25,60,105,.11); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--white); font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; line-height:1.85; font-size:15px; } a { color:inherit; } .container { width:min(1120px, calc(100% - 40px)); margin:auto; } .narrow { width:min(760px, 100%); } .skip-link { position:fixed; left:12px; top:-60px; z-index:20; padding:8px 14px; background:var(--navy); color:#fff; border-radius:6px; } .skip-link:focus { top:12px; }
.site-header { height:70px; padding:0 max(20px, calc((100vw - 1120px)/2)); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(220,229,239,.7); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; } .brand { text-decoration:none; font-weight:800; font-size:13px; line-height:1.25; display:flex; align-items:center; gap:8px; color:var(--navy); } .brand-mark { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:white; font-size:15px; } .header-cta { padding:8px 11px; border:1px solid var(--blue); border-radius:6px; color:var(--blue); font-size:12px; font-weight:700; text-decoration:none; }
.hero { overflow:hidden; padding:65px 0 48px; background:linear-gradient(135deg,#f8fbff 0%,#fff 54%,#ecf8f4 100%); } .hero-grid { display:grid; gap:38px; align-items:center; } .eyebrow,.section-label { margin:0 0 12px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.1em; } .eyebrow span { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--green); margin-right:7px; } h1,h2,h3,p { margin-top:0; } h1 { color:var(--navy); font-size:clamp(31px,8vw,47px); line-height:1.48; letter-spacing:-.035em; margin-bottom:19px; } h1 em { font-style:normal; color:var(--blue); } .lead { color:#39485e; font-size:16px; line-height:2; max-width:620px; } .hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:15px; margin:28px 0 14px; } .button { display:inline-flex; gap:9px; align-items:center; justify-content:center; padding:14px 18px; border-radius:8px; text-decoration:none; font-size:14px; font-weight:800; transition:transform .2s, box-shadow .2s; } .button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,44,92,.2); } .button-primary { color:#fff; background:var(--blue); } .text-link { color:var(--navy); font-weight:700; text-underline-offset:4px; font-size:13px; } .microcopy { color:#77859a; font-size:11px; line-height:1.6; }
.connection-visual { position:relative; min-height:342px; max-width:500px; margin:auto; width:100%; background:radial-gradient(circle at center,rgba(33,103,199,.11) 0 33%,transparent 34%); } .visual-card { position:absolute; padding:13px 11px; width:132px; min-height:92px; border-radius:13px; background:#fff; box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column; justify-content:center; border:1px solid rgba(220,229,239,.85); } .visual-card strong { color:var(--navy); font-size:13px; } .visual-card small { color:var(--muted); font-size:9px; line-height:1.45; } .visual-icon,.shield-icon { font-size:22px; line-height:1.1; color:var(--blue); } .building { color:var(--green); } .visual-person { left:0; top:52px; } .visual-company { right:0; top:52px; } .visual-profile { z-index:2; left:50%; top:166px; transform:translateX(-50%); width:158px; background:var(--navy); border:0; } .visual-profile strong,.visual-profile small,.visual-profile .shield-icon { color:#fff; } .visual-profile small { color:#cfdef5; } .visual-arrow { position:absolute; color:var(--blue); font-size:24px; top:106px; } .arrow-left { left:31%; } .arrow-right { right:31%; } .offer-pill { position:absolute; left:50%; top:289px; transform:translateX(-50%); white-space:nowrap; color:var(--green); font-weight:700; font-size:11px; padding:7px 11px; border-radius:100px; background:#ecf8f4; } .visual-orbit { position:absolute; left:50%; transform:translateX(-50%); border:1px dashed rgba(33,103,199,.25); border-radius:50%; } .orbit-one { width:270px; height:270px; top:19px; } .orbit-two { width:340px; height:340px; top:-17px; opacity:.55; }
.section { padding:70px 0; } .section-soft { background:var(--surface); } .intro { font-size:16px; color:#425269; } h2 { color:var(--navy); font-size:clamp(25px,6vw,35px); line-height:1.5; letter-spacing:-.03em; margin-bottom:20px; } .section-heading { margin-bottom:30px; } .section-heading > p:not(.section-label) { margin-bottom:0; color:var(--muted); } .centered { text-align:center; margin-left:auto; margin-right:auto; max-width:730px; } .problem-grid,.value-grid { display:grid; gap:14px; } .problem-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; } .card-number { color:var(--green); font-weight:800; font-size:12px; } h3 { color:var(--navy); font-size:17px; line-height:1.55; margin:10px 0 8px; } .problem-card p,.use-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.flow-list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:25px 15px; padding:0; margin:35px 0 0; } .flow-list li { position:relative; text-align:center; } .step { color:#9babc1; font-size:11px; font-weight:800; } .flow-icon { display:grid; place-items:center; width:55px; height:55px; margin:8px auto 13px; border-radius:50%; background:var(--sky); color:var(--blue); font-size:24px; } .flow-list h3 { font-size:14px; margin:0 0 7px; } .flow-list p { color:var(--muted); font-size:11px; line-height:1.65; margin:0; }
.value-section { background:linear-gradient(120deg,#102c5d,#173f76); color:#fff; } .value-section h2,.value-section h3 { color:white; } .value-section .section-label { color:#70d8bd; } .value-card { padding:25px 21px; border-radius:12px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17); } .value-card.business { background:rgba(19,149,121,.2); } .value-top { display:flex; align-items:center; gap:8px; color:#bcd1ef; font-weight:700; font-size:10px; letter-spacing:.1em; } .value-top p { margin:0; } .value-icon { color:#7fdcc6; font-size:23px; } .value-card ul { padding:0; margin:0; list-style:none; } .value-card li { position:relative; padding:8px 0 8px 18px; color:#e4edf9; font-size:13px; line-height:1.65; border-top:1px solid rgba(255,255,255,.12); } .value-card li::before { content:""; width:5px; height:5px; position:absolute; top:18px; left:2px; border-radius:50%; background:#75d8c0; }
.uses-grid { display:grid; gap:11px; } .use-item { min-height:145px; padding:20px; background:white; border-radius:11px; border:1px solid var(--line); } .use-item > span { color:var(--blue); font-size:25px; } .use-item h3 { margin:8px 0 5px; font-size:14px; }
.safety-grid { display:grid; gap:25px; align-items:center; } .safety-grid > div:first-child > p:not(.section-label) { color:var(--muted); } .safety-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; } .safety-list > div { display:flex; gap:15px; padding:17px; border-bottom:1px solid var(--line); } .safety-list > div:last-child { border:0; } .safety-list > div > span { color:var(--green); font-size:12px; font-weight:800; } .safety-list h3 { margin:0 0 4px; font-size:14px; } .safety-list p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.progress-section { padding-top:10px; } .progress-box { padding:28px 22px; border-radius:14px; background:var(--sky); } .progress-box h2 { font-size:24px; margin-bottom:10px; } .progress-box > div:first-child > p:not(.section-label) { color:#4b607e; font-size:13px; } .progress-stages { display:flex; margin-top:25px; } .stage { flex:1; position:relative; text-align:center; color:#7e91ac; font-size:10px; } .stage::before { content:""; height:2px; position:absolute; background:#c4d6ee; top:14px; left:-50%; right:50%; z-index:0; } .stage:first-child::before { display:none; } .stage span { position:relative; z-index:1; display:grid; place-items:center; width:29px; height:29px; margin:auto; border-radius:50%; background:#c4d6ee; color:#fff; font-weight:800; } .stage p { margin:7px 0 0; line-height:1.3; } .stage.done,.stage.current { color:var(--navy); font-weight:700; } .stage.done span { background:var(--navy); } .stage.current span { background:var(--green); } .stage.current::before,.stage.done + .stage::before { background:var(--navy); }
.notify-section { padding:26px 0 70px; } .notify-box { text-align:center; padding:48px 20px; border-radius:15px; color:#fff; background:linear-gradient(125deg,#0e2c5c,#126a91); } .notify-box h2 { color:#fff; font-size:27px; } .notify-box > p:not(.section-label):not(.microcopy) { color:#d9e9fb; font-size:13px; max-width:550px; margin:0 auto 24px; } .notify-box .section-label { color:#91e3cb; } .button-light { background:#fff; color:var(--navy); } .microcopy.light { color:#bcd3e9; margin:14px 0 0; }
.faq-section { padding-top:15px; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); } summary { cursor:pointer; list-style:none; padding:18px 28px 18px 2px; color:var(--navy); font-weight:700; font-size:13px; position:relative; } summary::-webkit-details-marker { display:none; } summary::after { content:"+"; position:absolute; right:4px; font-size:20px; font-weight:400; color:var(--blue); } details[open] summary::after { content:"−"; } details p { margin:0; padding:0 5px 18px; color:var(--muted); font-size:13px; line-height:1.8; }.site-footer { background:#0b213f; color:#b9c9dc; padding:25px 0; font-size:10px; } .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:15px; } .footer-inner p { margin:0; } .footer-brand { color:#fff; font-size:11px; } .footer-brand .brand-mark { background:var(--green); }
@media (min-width:700px) { body { font-size:16px; } .site-header { height:78px; } .brand { font-size:15px; } .brand-break { display:none; } .header-cta { padding:10px 16px; font-size:13px; } .hero { padding:86px 0 70px; } .hero-grid { grid-template-columns:1.08fr .92fr; gap:35px; } .hero-actions { flex-direction:row; align-items:center; } .section { padding:100px 0; } .problem-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .problem-card { padding:28px; } .flow-list { grid-template-columns:repeat(4,1fr); gap:20px; } .flow-list li:not(:last-child)::after { content:""; position:absolute; width:34%; top:46px; right:-25%; border-top:1px dashed #aac1df; } .value-grid { grid-template-columns:repeat(2,1fr); gap:20px; } .value-card { padding:31px; } .uses-grid { grid-template-columns:repeat(5,1fr); } .use-item { padding:17px; } .safety-grid { grid-template-columns:1fr 1fr; gap:70px; } .progress-box { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:50px; padding:43px 48px; } .progress-stages { margin:0; } .notify-section { padding-bottom:100px; } .notify-box { padding:64px 25px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }