/* index.html と統一するレイアウト・ヘッダー・フッター用 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:0 0% 100%;--fg:224 71% 4%;
  --card:0 0% 100%;--card-fg:224 71% 4%;
  --popover:0 0% 100%;--popover-fg:224 71% 4%;
  --primary:221 83% 53%;--primary-fg:0 0% 100%;
  --secondary:220 14% 96%;--secondary-fg:224 71% 4%;
  --muted:220 14% 96%;--muted-fg:220 9% 46%;
  --accent:262 83% 58%;--accent-fg:0 0% 100%;
  --border:220 13% 91%;
  --radius:0.75rem;
  --glow:221 83% 53%;
}
.dark{
  --bg:224 71% 4%;--fg:210 20% 98%;
  --card:224 50% 8%;--card-fg:210 20% 98%;
  --popover:224 50% 8%;--primary:221 83% 53%;--primary-fg:0 0% 100%;
  --secondary:215 28% 12%;--muted:215 28% 12%;--muted-fg:218 11% 55%;
  --border:215 28% 16%;--glow:221 83% 60%;
}
body{font-family:'Inter','Noto Sans JP',system-ui,sans-serif;background:hsl(var(--bg));color:hsl(var(--fg));-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:inherit;text-decoration:none}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}

.page{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(hsl(var(--border)/.5) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--border)/.5) 1px,transparent 1px);background-size:64px 64px;}
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px circle at 50% 0%,hsl(var(--glow)/.12),transparent 70%);}

.header{position:fixed;top:0;left:0;right:0;z-index:50;background:hsl(var(--card)/.7);backdrop-filter:blur(16px);border-bottom:1px solid hsl(var(--border)/.5);}
.header-inner{max-width:72rem;margin:0 auto;padding:0 1.5rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.logo-icon{height:2rem;width:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));}
.logo-icon svg{color:hsl(var(--primary-fg))}
.logo-text{font-size:1rem;font-weight:700;letter-spacing:-.02em;color:hsl(var(--fg))}
.nav-desktop{display:flex;align-items:center;gap:1.25rem}
.nav-link{font-size:.875rem;font-weight:500;color:hsl(var(--muted-fg));transition:color .2s}
.nav-link:hover{color:hsl(var(--fg))}
.nav-link svg{vertical-align:middle}
.dropdown{position:relative}
.dropdown-btn{display:flex;align-items:center;gap:.25rem}
.dropdown-btn .chevron{transition:transform .2s}
.dropdown.open .chevron{transform:rotate(180deg)}
.dropdown-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:.5rem;width:18rem;}
.dropdown.open .dropdown-panel{display:block}
.dropdown-inner{border-radius:.75rem;border:1px solid hsl(var(--border));background:hsl(var(--popover));box-shadow:0 10px 40px -10px rgba(0,0,0,.15);padding:.5rem;}
.dropdown-cat{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-fg))}
.dropdown-cat .soon{margin-left:.375rem;font-size:.625rem;font-weight:500;color:hsl(var(--accent));text-transform:none;letter-spacing:0}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:hsl(var(--fg));transition:background .2s;}
.dropdown-item:hover{background:hsl(var(--muted))}
.dropdown-icon{height:1.75rem;width:1.75rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dropdown-icon svg{color:hsl(var(--primary-fg))}
.theme-btn{padding:.5rem;border-radius:.5rem;color:hsl(var(--muted-fg));transition:color .2s,background .2s}
.theme-btn:hover{color:hsl(var(--fg));background:hsl(var(--muted))}
.mobile-btns{display:none;align-items:center;gap:.25rem}
.mobile-menu{display:none;border-top:1px solid hsl(var(--border));background:hsl(var(--popover)/.95);backdrop-filter:blur(16px);}
.mobile-menu.open{display:block}
.mobile-menu-inner{max-width:72rem;margin:0 auto;padding:1rem 1.5rem}
.mobile-menu-inner .dropdown-cat{padding:.25rem 0}
.mobile-menu-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:hsl(var(--fg));transition:background .2s;}
.mobile-menu-item:hover{background:hsl(var(--muted))}
.mobile-divider{border-top:1px solid hsl(var(--border));margin-top:.75rem;padding-top:.75rem}
@media(max-width:767px){.nav-desktop{display:none}.mobile-btns{display:flex}}

.footer{position:relative;border-top:1px solid hsl(var(--border));background:hsl(var(--card)/.5)}
.footer-upper{max-width:72rem;margin:0 auto;padding:3rem 1.5rem}
.footer-grid{display:grid;gap:2.5rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-brand{font-size:.75rem;color:hsl(var(--muted-fg));line-height:1.7;margin-top:.75rem}
.footer-heading{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-fg));margin-bottom:.75rem}
.footer-heading .soon{margin-left:.375rem;font-size:.625rem;font-weight:500;color:hsl(var(--accent));text-transform:none;letter-spacing:0}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-links a{font-size:.875rem;color:hsl(var(--muted-fg));transition:color .2s}
.footer-links a:hover{color:hsl(var(--fg))}
.footer-bottom{border-top:1px solid hsl(var(--border))}
.footer-bottom-inner{max-width:72rem;margin:0 auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;color:hsl(var(--muted-fg));}
@media(min-width:640px){.footer-bottom-inner{flex-direction:row}}

.grad-1{background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)))}
.grad-2{background:linear-gradient(135deg,hsl(var(--accent)),hsl(var(--primary)))}
.grad-3{background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)),hsl(var(--primary)))}

/* ツールページ用: メインコンテンツに上部余白 */
.tool-page-main{position:relative;flex:1;padding:6rem 0 4rem;}