@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap);:root{--navy-deep:#0a0e1a;--navy-main:#0f1525;--navy-card:#141c2e;--navy-light:#1a2340;--cyan:#4cc9f0;--cyan-glow:rgba(76,201,240,.15);--cyan-border:rgba(76,201,240,.3);--white:#fff;--white-80:rgba(255,255,255,.8);--white-60:rgba(255,255,255,.6);--white-40:rgba(255,255,255,.4);--white-15:rgba(255,255,255,.15);--white-08:rgba(255,255,255,.08);--gradient-cyan:linear-gradient(135deg,#4cc9f0,#7b61ff);--max-width:820px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Noto Sans JP',sans-serif;background:var(--navy-deep);color:var(--white-80);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased}.blog-header{background:var(--navy-main);border-bottom:1px solid var(--white-15);padding:16px 24px;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}.blog-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.blog-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}.blog-logo-text{font-size:20px;font-weight:900;letter-spacing:2px}.blog-logo-sub{font-size:11px;color:var(--cyan);letter-spacing:1px}.blog-nav{display:flex;gap:24px}.blog-nav a{color:var(--white-60);text-decoration:none;font-size:14px;transition:color .3s}.blog-nav a:hover{color:var(--cyan)}.article-hero{background:linear-gradient(180deg,var(--navy-main) 0%,var(--navy-deep) 100%);padding:80px 24px 60px;text-align:center}.article-category{display:inline-block;background:var(--cyan-glow);border:1px solid var(--cyan-border);color:var(--cyan);font-size:12px;font-weight:700;padding:4px 16px;border-radius:20px;letter-spacing:1px;margin-bottom:20px}.article-hero h1{font-size:clamp(24px,4vw,36px);font-weight:900;color:var(--white);line-height:1.5;max-width:var(--max-width);margin:0 auto 16px}.article-meta{color:var(--white-40);font-size:13px;display:flex;gap:20px;justify-content:center;align-items:center}.article-meta span{display:flex;align-items:center;gap:6px}.article-body{max-width:var(--max-width);margin:0 auto;padding:48px 24px 80px}.article-body h2{font-size:22px;font-weight:900;color:var(--white);margin:56px 0 20px;padding-left:16px;border-left:4px solid var(--cyan);line-height:1.5}.article-body h3{font-size:18px;font-weight:700;color:var(--white);margin:40px 0 16px;line-height:1.5}.article-body p{margin-bottom:24px;color:var(--white-80)}.article-body ul,.article-body ol{margin:0 0 24px 24px;color:var(--white-80)}.article-body li{margin-bottom:8px}.article-body strong{color:var(--white);font-weight:700}.article-body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}.article-body a:hover{border-bottom-color:var(--cyan)}.callout{background:var(--navy-card);border:1px solid var(--white-15);border-radius:12px;padding:24px 28px;margin:32px 0}.callout.warning{border-left:4px solid #ff6b6b}.callout.info{border-left:4px solid var(--cyan)}.callout.success{border-left:4px solid #51cf66}.callout-title{font-weight:700;color:var(--white);margin-bottom:8px;font-size:15px}.callout p{margin-bottom:0;font-size:14px}.article-body table{width:100%;border-collapse:collapse;margin:24px 0 32px;font-size:14px}.article-body th{background:var(--navy-light);color:var(--cyan);font-weight:700;padding:12px 16px;text-align:left;border:1px solid var(--white-15)}.article-body td{padding:12px 16px;border:1px solid var(--white-15);color:var(--white-80)}.article-body tr:nth-child(even) td {background:var(--white-08)}.article-body blockquote{background:var(--navy-card);border-left:4px solid var(--cyan);padding:20px 24px;margin:24px 0;border-radius:0 8px 8px 0;font-style:italic;color:var(--white-60)}.cta-box{background:linear-gradient(135deg,var(--navy-card),var(--navy-light));border:1px solid var(--cyan-border);border-radius:16px;padding:40px 32px;text-align:center;margin:48px 0}.cta-box h3{font-size:20px;color:var(--white);margin-bottom:12px}.cta-box p{color:var(--white-60);margin-bottom:24px;font-size:14px}.cta-btn{display:inline-block;background:var(--gradient-cyan);color:#fff;font-weight:700;padding:14px 40px;border-radius:50px;text-decoration:none;font-size:15px;transition:transform .3s , box-shadow .3s;text-shadow:0 1px 2px rgba(0,0,0,.2)}.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(76,201,240,.3)}.cta-sub{display:block;margin-top:12px;font-size:12px;color:var(--white-40)}.related-section{max-width:1200px;margin:0 auto;padding:60px 24px 80px;border-top:1px solid var(--white-15)}.related-section h2{font-size:20px;font-weight:700;color:var(--white);margin-bottom:32px;text-align:center}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.related-card{background:var(--navy-card);border:1px solid var(--white-15);border-radius:12px;padding:24px;text-decoration:none;transition:transform .3s , border-color .3s;display:block}.related-card:hover{transform:translateY(-4px);border-color:var(--cyan-border)}.related-card .card-category{font-size:11px;color:var(--cyan);font-weight:700;letter-spacing:1px;margin-bottom:8px}.related-card .card-title{font-size:15px;font-weight:700;color:var(--white);line-height:1.6;margin-bottom:8px}.related-card .card-excerpt{font-size:13px;color:var(--white-40);line-height:1.6}.blog-footer{background:var(--navy-main);border-top:1px solid var(--white-15);padding:40px 24px;text-align:center}.blog-footer p{color:var(--white-40);font-size:13px;margin-bottom:8px}.blog-footer a{color:var(--cyan);text-decoration:none}.blog-index-hero{background:linear-gradient(180deg,var(--navy-main) 0%,var(--navy-deep) 100%);padding:80px 24px 48px;text-align:center}.blog-index-hero h1{font-size:clamp(28px,5vw,42px);font-weight:900;color:var(--white);margin-bottom:12px}.blog-index-hero p{color:var(--white-60);font-size:15px}.category-filter{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:24px;max-width:1200px;margin:0 auto}.category-filter button{background:var(--navy-card);border:1px solid var(--white-15);color:var(--white-60);padding:8px 20px;border-radius:20px;font-size:13px;cursor:pointer;transition:all .3s;font-family:'Noto Sans JP',sans-serif}.category-filter button:hover,.category-filter button.active{background:var(--cyan-glow);border-color:var(--cyan-border);color:var(--cyan)}.articles-grid{max-width:1200px;margin:0 auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}.article-card{background:var(--navy-card);border:1px solid var(--white-15);border-radius:12px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .3s , border-color .3s}.article-card:hover{transform:translateY(-4px);border-color:var(--cyan-border)}.article-card-body{padding:24px;flex:1;display:flex;flex-direction:column}.article-card .card-category{font-size:11px;color:var(--cyan);font-weight:700;letter-spacing:1px;margin-bottom:12px}.article-card .card-title{font-size:17px;font-weight:700;color:var(--white);line-height:1.6;margin-bottom:12px}.article-card .card-excerpt{font-size:13px;color:var(--white-40);line-height:1.7;flex:1}.article-card .card-meta{font-size:12px;color:var(--white-40);margin-top:16px;padding-top:16px;border-top:1px solid var(--white-08)}.num-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--gradient-cyan);color:var(--navy-deep);font-weight:900;font-size:14px;border-radius:50%;margin-right:8px;flex-shrink:0}.numbered-list{list-style:none;margin-left:0;counter-reset:none}.numbered-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:16px;background:var(--navy-card);border-radius:8px;border:1px solid var(--white-08)}.toc{background:var(--navy-card);border:1px solid var(--white-15);border-radius:12px;padding:24px 28px;margin:0 0 40px}.toc-title{font-size:14px;font-weight:700;color:var(--white);margin-bottom:12px}.toc ol{list-style:decimal;margin:0 0 0 20px}.toc li{margin-bottom:4px}.toc a{color:var(--white-60);text-decoration:none;font-size:14px;transition:color .3s}.toc a:hover{color:var(--cyan)}@media (max-width:768px){.blog-header-inner{flex-direction:column;gap:12px}.blog-nav{gap:16px}.article-hero{padding:60px 16px 40px}.article-body{padding:32px 16px 60px}.cta-box{padding:32px 20px}.articles-grid{grid-template-columns:1fr}.article-meta{flex-direction:column;gap:8px}}