/* 全ページ共通の上の帯と足元（2026-10-06）。style.css のページにも載るので、名前は重ならないものにする */
/* 地はオフホワイト。足元は中身が短いページでも画面のいちばん下に置く（浮かせない） */
html, body { background: #FAFAF8; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .hero { width: 100%; }
.top { position: relative; z-index: 20; }
.top-in { display: flex; align-items: center; gap: 28px; height: 76px; max-width: 1600px; margin: 0 auto; padding: 0 3.5%; }
.top-brand { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 22px; letter-spacing: .02em; color: #1f2d3d; text-decoration: none; }
.top-brand img { width: 40px; height: 40px; display: block; }
.top nav { margin-left: auto; display: flex; gap: 36px; font-size: 14px; color: #1f2d3d; letter-spacing: .06em; }
.top nav a { color: inherit; text-decoration: none; }
.top nav a:hover { color: #14285a; text-decoration: underline; text-underline-offset: 6px; }
.pill-dark { background: #0A3057; color: #fff !important; border-radius: 999px; padding: 10px 22px; font-size: 14px; letter-spacing: .06em; white-space: nowrap; text-decoration: none; }
.pill-dark:hover { background: #072442; }
/* 帯の中は折り返さない（iPhone の Chrome で「プロダク／ト」「Trail Line／Logi.」と割れていた） */
.top-brand, .top nav a, .pill-dark { white-space: nowrap; }
.top-brand { flex-shrink: 0; }
@media (max-width: 760px) {
  .top-in { gap: 16px; padding: 0 20px; height: 64px; }
  .top-brand { font-size: 18px; } .top-brand img { width: 32px; height: 32px; }
  .top nav { gap: 16px; } .top nav .wide { display: none; } .pill-dark { display: none; }
}
@media (max-width: 440px) {
  .top-in { gap: 12px; padding: 0 16px; height: 60px; }
  .top-brand { font-size: 16px; gap: 8px; } .top-brand img { width: 28px; height: 28px; }
  .top nav { gap: 14px; font-size: 13px; letter-spacing: .02em; }
}

.foot { flex-shrink: 0; margin-top: 64px; border-top: 1px solid #e8e8e6; padding: 28px 0 48px; font-size: 13px; color: #8a8a8a; }
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: #1f2d3d; }
.foot .copy { margin-left: auto; }
.foot-note { max-width: 1040px; margin: 12px auto 0; padding: 0 20px; }
@media (max-width: 560px) { .foot .copy { margin-left: 0; width: 100%; } }