:root { --navy:#14294d; --navy-deep:#081f36; --blue:#00a7e0; --blue-deep:#0089c2; --surface:#f3f7fa; --line:#d6e1e8; --ink:#435d6c; --container:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif; line-height:1.85; }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; }
.article-header { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.article-header-inner { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.article-brand { display:flex; align-items:center; gap:10px; color:var(--navy); }
.article-brand img { width:42px; height:42px; object-fit:contain; }
.article-brand strong,.article-brand small { display:block; }
.article-brand strong { font-size:14px; line-height:1.2; }
.article-brand small { margin-top:4px; color:#8293a1; font-size:8px; font-weight:800; letter-spacing:.09em; line-height:1.2; }
.article-nav { display:flex; align-items:center; gap:26px; color:var(--navy); font-size:14px; font-weight:800; }
.article-nav a:hover { color:var(--blue-deep); }
.article-nav .contact-link { padding:10px 16px; border-radius:9px; color:#111; background:#ffd500; }
.article-hero { position:relative; padding:34px 0 72px; background:linear-gradient(135deg,#f8fcff,#e8f7fc); overflow:hidden; }
.article-hero::after { content:"R&D"; position:absolute; right:-10px; bottom:-48px; color:rgba(0,137,194,.055); font-size:180px; font-weight:900; letter-spacing:-.08em; line-height:1; }
.breadcrumb { position:relative; z-index:2; display:flex; gap:10px; color:#617b8b; font-size:14px; font-weight:800; }
.article-hero-copy { position:relative; z-index:2; max-width:880px; padding-top:54px; }
.article-category { margin:0 0 16px; color:var(--blue-deep); font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.article-hero h1 { margin:0; color:var(--navy); font-size:clamp(40px,5.5vw,68px); line-height:1.28; letter-spacing:-.045em; }
.article-lead { max-width:760px; margin:24px 0 0; color:#4f6b7b; font-size:18px; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:28px; color:#668090; font-size:13px; font-weight:700; }
.article-main { padding:76px 0 92px; background:#fff; }
.article-layout { display:grid; grid-template-columns:minmax(0,780px) 250px; justify-content:center; gap:70px; align-items:start; }
.article-content { min-width:0; }
.draft-note { margin:0 0 42px; padding:18px 20px; border-left:4px solid var(--blue); border-radius:0 12px 12px 0; color:#31596e; background:#eef9fd; font-size:14px; font-weight:800; }
.article-content h2 { margin:58px 0 18px; color:var(--navy); font-size:30px; line-height:1.45; letter-spacing:-.03em; }
.article-content h2:first-of-type { margin-top:0; }
.article-content h3 { margin:32px 0 12px; color:var(--navy); font-size:21px; }
.article-content p { margin:0 0 20px; font-size:16px; }
.article-content ul { display:grid; gap:10px; margin:20px 0 28px; padding-left:1.3em; }
.article-content li { padding-left:4px; }
.article-summary { margin-top:48px; padding:30px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.article-summary h2 { margin:0 0 12px; font-size:25px; }
.article-side { position:sticky; top:110px; display:grid; gap:16px; }
.side-card { padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(20,41,77,.07); }
.side-card b { display:block; color:var(--navy); font-size:15px; }
.side-card p { margin:8px 0 16px; font-size:13px; line-height:1.7; }
.side-link { color:var(--blue-deep); font-size:14px; font-weight:900; }
.article-footer { padding:52px 0 24px; color:#a8bdc9; background:var(--navy-deep); }
.article-footer-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; padding-bottom:36px; }
.article-footer h2 { margin:0; color:#fff; font-size:22px; }
.article-footer p { margin:12px 0 0; max-width:520px; font-size:13px; }
.article-footer-links { display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; font-size:13px; }
.article-footer-links a:hover { color:#fff; }
.article-copyright { padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; }
@media (max-width:900px) { .article-nav a:not(.contact-link) { display:none; } .article-layout { grid-template-columns:1fr; gap:42px; } .article-side { position:static; grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .container { width:min(calc(100% - 36px),var(--container)); } .article-header-inner { min-height:68px; } .article-brand img { width:38px; height:38px; } .article-brand strong { font-size:12px; } .article-brand small { font-size:7px; } .article-nav .contact-link { padding:9px 12px; font-size:12px; } .article-hero { padding:24px 0 52px; } .article-hero-copy { padding-top:38px; } .article-hero h1 { font-size:clamp(34px,10vw,45px); } .article-lead { font-size:16px; } .article-main { padding:56px 0 70px; } .article-content h2 { margin-top:46px; font-size:26px; } .article-side,.article-footer-grid { grid-template-columns:1fr; } .article-footer-links { grid-template-columns:1fr; } }