/* components.css : Nav / Footer / Pマーク認定枠 共通 */

/* Nav (静的モック由来) */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,0.06); }
.nav .logo img { height: 32px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-family: var(--font-latin); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-decoration: none; color: var(--is-navy); }
.nav-links a:hover { color: var(--is-orange); }
.nav-links a::before { content: '• '; color: var(--is-orange); margin-right: 4px; }
.nav-cta { font-family: var(--font-latin); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; padding: 12px 28px; background: var(--is-navy); color: #fff !important; text-decoration: none; transition: background 200ms ease; }
.nav-cta:hover { background: var(--is-orange); }
.nav-cta.active { background: var(--is-orange); }

.nav-burger { display: none; background: transparent; border: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 8px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--is-navy); transition: transform 200ms ease, opacity 200ms ease; }

.nav-drawer { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; padding: 32px 24px; flex-direction: column; gap: 20px; z-index: 99; }
.nav-drawer.is-open { display: flex; }
.nav-drawer a { font-family: var(--font-jp); font-size: 16px; font-weight: 600; text-decoration: none; color: var(--is-navy); }
.nav-drawer-cta { background: var(--is-navy); color: #fff !important; padding: 16px; text-align: center; margin-top: 16px; }

/* Footer 共通 */
footer { background: var(--is-navy-2, #1A2340); color: rgba(255,255,255,0.7); padding: 80px 0 32px; }
.footer-grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.footer-logo { font-family: var(--font-latin); font-size: 18px; font-weight: 700; letter-spacing: 0.1em; color: #fff; margin-bottom: 24px; }
.footer-address { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.55); white-space: pre-line; margin: 0; background: transparent; }
footer a { color: rgba(255,255,255,0.7); text-decoration: none; display: block; padding: 4px 0; font-size: 13px; }
footer a:hover { color: var(--is-yellow, #F0B53D); }
.footer-bottom { max-width: 1200px; margin: 56px auto 0; padding: 24px 24px 0; border-top: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: space-between; font-family: var(--font-latin); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }

/* Pマーク認定枠 */
.footer-pmark { margin-top: 28px; }
.footer-pmark-link { display: inline-flex; flex-direction: column; gap: 10px; padding: 0; text-decoration: none; color: rgba(255,255,255,0.85); }
.footer-pmark-link:hover { color: #fff; }
.footer-pmark-link:hover .footer-pmark-frame { border-color: #fff; }
.footer-pmark-frame { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; width: fit-content; padding: 8px 14px 8px 10px; border: 1.5px solid rgba(255,255,255,0.85); border-radius: 4px; transition: border-color 0.2s ease; }
.footer-pmark-p { grid-row: 1 / span 2; font-family: var(--font-latin); font-size: 32px; font-weight: 800; line-height: 1; color: #fff; padding-right: 10px; border-right: 1.5px solid rgba(255,255,255,0.85); }
.footer-pmark-label { font-family: var(--font-latin); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #fff; line-height: 1.2; }
.footer-pmark-num { font-family: var(--font-latin); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); line-height: 1.2; }
.footer-pmark-caption { display: block; font-size: 11px; line-height: 1.65; color: rgba(255,255,255,0.55); }

/* SP（個別CSS内に閉じる原則だが、これは共通コンポーネント） */
@media (max-width: 768px) {
  .nav { padding: 12px 16px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-cta:not(.nav-drawer-cta) { display: none; }
  footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}