@charset "utf-8";

:root {
  --shell-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; font-family: var(--shell-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.skip-link { position: fixed; z-index: 1000; top: -100px; left: 16px; padding: 10px 14px; background: #111; color: #fff; }
.skip-link:focus { top: 16px; }

.product-nav { position: absolute; z-index: 100; top: 0; right: 0; left: 0; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 28px; padding: 16px clamp(20px, 4vw, 64px); }
.product-brand { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; }
.product-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; background: #111; color: #fff; font-size: 1.05rem; }
.product-brand i { opacity: 0.35; font-style: normal; }
.product-brand strong { font-weight: 700; }
.product-nav nav { display: flex; align-items: center; gap: clamp(17px, 2.6vw, 38px); }
.product-nav nav a { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; }
.product-nav .nav-cta { padding: 10px 14px; border: 1px solid currentColor; }

.product-footer { display: flex; justify-content: space-between; gap: 24px; padding: 26px clamp(20px, 4vw, 64px); background: #0d0e11; color: #87898f; font-size: 0.73rem; letter-spacing: 0.04em; }
.product-footer a:hover { color: #fff; }

@media (max-width: 760px) {
  .product-nav { min-height: 66px; }
  .product-brand i, .product-brand strong, .product-nav nav a:not(.nav-cta) { display: none; }
  .product-brand-mark { width: 34px; height: 34px; }
  .product-nav .nav-cta { padding: 8px 10px; }
  .product-footer { flex-direction: column; }
}