/* ============================================================
   NECOKOUCAN — MASTER BRAND CSS
   猫・工・艦 & Cats_and_boltaction
   着る、戦術。/ FIELD to STREET.
   Version: 3.0  |  2026-04
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Serif+JP:wght@300;400;600&family=Share+Tech+Mono&family=Oswald:wght@400;600;700&display=swap');

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --nk-ink:      #0a0a08;
  --nk-brass:    #b8922a;
  --nk-rust:     #8b3a1e;
  --nk-paper:    #f4efe7;
  --nk-smoke:    #1c1c19;
  --nk-fog:      #2e2e28;
  --nk-ash:      #6b6b5e;
  --nk-cream:    #e8e1d4;
  --nk-white:    #ffffff;
  --nk-brass-20: rgba(184,146,42,0.20);
  --nk-brass-10: rgba(184,146,42,0.10);
  --nk-ink-80:   rgba(10,10,8,0.80);
  --nk-ink-60:   rgba(10,10,8,0.60);
  --font-display:  'Bebas Neue', sans-serif;
  --font-army:     'Oswald', 'Bebas Neue', sans-serif;
  --font-serif:    'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-jp:       'Noto Serif JP', serif;
  --font-mono:     'Share Tech Mono', monospace;
  --sp-xs:   4px; --sp-sm:   8px; --sp-md:  16px; --sp-lg:  32px;
  --sp-xl:  64px; --sp-2xl: 96px; --sp-3xl: 128px;
  --max-w: 1200px; --max-w-text: 760px;
  --border-thin: 1px solid var(--nk-brass-20);
  --border-gold: 1px solid var(--nk-brass);
  --border-rust: 1px solid var(--nk-rust);
  --radius-sm: 2px; --radius-md: 4px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in:  cubic-bezier(0.4,0,1,1);
  --dur-fast: 180ms; --dur-mid: 360ms; --dur-slow: 600ms;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --glow-brass: 0 0 20px rgba(184,146,42,0.25);
  --z-base: 1; --z-overlay: 10; --z-nav: 100; --z-modal: 200;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; margin-top: 0 !important; }
body { background-color: var(--nk-ink); color: var(--nk-paper); font-family: var(--font-serif); font-weight: 300; line-height: 1.75; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ============================================================
   3. THEME SUPPRESSION（カスタムテーマ用）
   ============================================================ */
/* ページタイトル非表示 */
.entry-title, .page-title, h1.entry-title, h1.page-title,
.entry-header, .page-header, .wp-block-post-title { display: none !important; }

/* コンテンツ余白リセット */
.site-content, #content, #primary, #main,
.entry-content, .page-content, .wp-site-blocks {
  padding-top: 0 !important; margin-top: 0 !important;
}
#primary, .entry-content {
  max-width: 100% !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* ============================================================
   4. NOISE GRAIN OVERLAY
   ============================================================ */
.nk-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px 256px;
}

/* ============================================================
   5. TYPOGRAPHY SYSTEM
   ============================================================ */
.nk-display-xl { font-family: var(--font-display); font-size: clamp(64px,10vw,140px); line-height: 0.92; letter-spacing: 0.04em; text-transform: uppercase; }
.nk-display-lg { font-family: var(--font-display); font-size: clamp(40px,6vw,80px); line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.nk-display-md { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; }
.nk-heading-1  { font-family: var(--font-serif); font-size: clamp(28px,3.5vw,42px); font-weight: 300; line-height: 1.3; letter-spacing: 0.02em; }
.nk-heading-2  { font-family: var(--font-serif); font-size: clamp(20px,2.5vw,28px); font-weight: 400; line-height: 1.4; letter-spacing: 0.03em; }
.nk-body    { font-family: var(--font-serif); font-size: clamp(15px,1.5vw,17px); font-weight: 300; line-height: 1.85; }
.nk-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nk-ash); }
.nk-label   { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.nk-jp      { font-family: var(--font-jp); font-weight: 300; font-feature-settings: 'palt'; }
.nk-gold  { color: var(--nk-brass); }
.nk-rust  { color: var(--nk-rust); }
.nk-paper { color: var(--nk-paper); }
.nk-ash   { color: var(--nk-ash); }
.nk-ink   { color: var(--nk-ink); }

/* ============================================================
   6. LAYOUT UTILITIES
   ============================================================ */
.nk-container      { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-lg); }
.nk-container--text{ max-width: var(--max-w-text); margin-inline: auto; padding-inline: var(--sp-lg); }
.nk-section        { padding-block: var(--sp-3xl); }
.nk-section--sm    { padding-block: var(--sp-2xl); }
.nk-divider        { border: none; border-top: var(--border-thin); margin-block: var(--sp-xl); }
.nk-divider--gold  { border-top: var(--border-gold); }
.nk-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-lg); }
.nk-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
.nk-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-lg); }
@media (max-width:1024px) { .nk-grid-4 { grid-template-columns: repeat(2,1fr); } .nk-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .nk-grid-4, .nk-grid-3, .nk-grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   7. NAVIGATION
   ============================================================ */
.nk-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  background: linear-gradient(to bottom, var(--nk-ink) 0%, transparent 100%);
  backdrop-filter: blur(0px);
  transition: backdrop-filter var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.nk-nav.scrolled { backdrop-filter: blur(12px); background: rgba(10,10,8,0.90); border-bottom: var(--border-thin); }
.nk-nav__logo { font-family: var(--font-display); font-size: 33px; letter-spacing: 0.12em; color: var(--nk-paper); display: flex; align-items: center; gap: 2px; }
.nk-nav__logo .kou { color: var(--nk-brass); }
.nk-nav__links { display: flex; align-items: center; gap: var(--sp-xl); }
.nk-nav__link { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nk-ash); transition: color var(--dur-fast) var(--ease-out); position: relative; }
.nk-nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--nk-brass); transition: width var(--dur-mid) var(--ease-out); }
.nk-nav__link:hover { color: var(--nk-paper); }
.nk-nav__link:hover::after { width: 100%; }
.nk-nav__cta { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-ink); background: var(--nk-brass); padding: 4px 16px; line-height: 1.2; display: inline-flex; align-items: center; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nk-nav__cta:hover { background: #d4a832; transform: translateY(-1px); }
.nk-nav__hamburger { display: none; }
.nk-nav__drawer    { display: none; }
@media (max-width:768px) {
  .nk-nav__logo span:last-child { display: none; }
  .nk-nav__links { display: none; }
  .nk-nav__cta { padding: 5px 14px; font-size: 12px; }
  .nk-nav__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; cursor: pointer; background: none; border: none; flex-shrink: 0; }
  .nk-nav__hamburger span { display: block; width: 100%; height: 1px; background: var(--nk-paper); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
  .nk-nav__hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nk-nav__hamburger.open span:nth-child(2) { opacity: 0; }
  .nk-nav__hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nk-nav__drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; padding: 72px 32px 40px; background: rgba(10,10,8,0.97); border-bottom: 1px solid var(--nk-brass-20); backdrop-filter: blur(12px); z-index: 9998; transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); gap: 0; }
  .nk-nav__drawer.open { transform: translateY(0); }
  .nk-nav__drawer-link { font-family: var(--font-display); font-size: 32px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-ash); padding: 14px 0; border-bottom: 1px solid var(--nk-brass-20); transition: color 0.2s ease; display: block; }
  .nk-nav__drawer-link:last-child { border-bottom: none; }
  .nk-nav__drawer-link:active { color: var(--nk-brass); }
}

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.nk-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: var(--sp-3xl); }
.nk-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.04); transition: transform 8s var(--ease-out); }
.nk-hero__bg.loaded { transform: scale(1); }
.nk-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--nk-ink) 0%, rgba(10,10,8,0.7) 40%, rgba(10,10,8,0.3) 70%, transparent 100%); }
.nk-hero__content { position: relative; z-index: var(--z-overlay); width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-lg); }
.nk-hero__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--nk-brass); margin-bottom: var(--sp-md); opacity: 0; animation: fadeUp 0.8s var(--ease-out) 0.2s forwards; }
.nk-hero__title   { font-family: var(--font-display); font-size: clamp(72px,12vw,160px); line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nk-paper); opacity: 0; animation: fadeUp 0.8s var(--ease-out) 0.4s forwards; }
.nk-hero__concept { font-family: var(--font-jp); font-size: clamp(18px,2.5vw,28px); font-weight: 300; color: var(--nk-brass); letter-spacing: 0.15em; margin-top: var(--sp-md); opacity: 0; animation: fadeUp 0.8s var(--ease-out) 0.6s forwards; }
.nk-hero__sub     { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-ash); margin-top: var(--sp-sm); opacity: 0; animation: fadeUp 0.8s var(--ease-out) 0.8s forwards; }
.nk-hero__reticle { position: absolute; top: 50%; right: 8%; transform: translateY(-50%); width: clamp(200px,25vw,340px); opacity: 0.55; pointer-events: none; animation: reticlePulse 4s ease-in-out infinite; }
@keyframes reticlePulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.70; } }

/* ============================================================
   9. TICKER STRIP
   ============================================================ */
.nk-ticker { overflow: hidden; background: var(--nk-brass); padding-block: 10px; position: relative; z-index: var(--z-overlay); }
.nk-ticker__track { display: flex; gap: 0; white-space: nowrap; animation: tickerScroll 24s linear infinite; }
.nk-ticker__track:hover { animation-play-state: paused; }
.nk-ticker__item { display: inline-flex; align-items: center; gap: var(--sp-md); padding-inline: var(--sp-md); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-ink); }
.nk-ticker__sep { color: var(--nk-ink); opacity: 0.4; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   10. BUTTONS
   ============================================================ */
.nk-btn { display: inline-flex; align-items: center; gap: var(--sp-sm); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 36px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); cursor: pointer; white-space: nowrap; }
.nk-btn--primary { background: var(--nk-brass); color: var(--nk-ink); border: 1px solid var(--nk-brass); }
.nk-btn--primary:hover { background: #d4a832; transform: translateY(-2px); box-shadow: var(--glow-brass); }
.nk-btn--outline { background: transparent; color: var(--nk-paper); border: var(--border-gold); }
.nk-btn--outline:hover { background: var(--nk-brass-10); color: var(--nk-brass); transform: translateY(-2px); }
.nk-btn--ghost   { background: transparent; color: var(--nk-ash); border: var(--border-thin); }
.nk-btn--ghost:hover { color: var(--nk-paper); border-color: var(--nk-paper); }
.nk-btn--sm { font-size: 11px; padding: 10px 24px; }
.nk-btn--lg { font-size: 15px; padding: 18px 48px; }

/* ============================================================
   11. PRODUCT CARD
   ============================================================ */
.nk-card { position: relative; background: var(--nk-smoke); border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.nk-card:hover { transform: translateY(-6px); border-color: var(--nk-brass); box-shadow: var(--shadow-md), var(--glow-brass); }
.nk-card__image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--nk-fog); }
.nk-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.nk-card:hover .nk-card__image img { transform: scale(1.06); }
.nk-card__badge { position: absolute; top: var(--sp-md); left: var(--sp-md); background: var(--nk-ink-80); border: 1px solid var(--nk-brass-20); backdrop-filter: blur(6px); padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-brass); border-radius: var(--radius-sm); }
.nk-card__body { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); }
.nk-card__vessel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-brass); }
.nk-card__name { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nk-paper); line-height: 1.1; }
.nk-card__name-jp { font-family: var(--font-jp); font-size: 13px; font-weight: 300; color: var(--nk-ash); letter-spacing: 0.08em; }
.nk-card__cta { margin-top: var(--sp-sm); align-self: flex-start; }

/* ============================================================
   12. CATEGORY FILTER
   ============================================================ */
.nk-filter { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-xl); }
.nk-filter__btn { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nk-ash); padding: 8px 20px; border: var(--border-thin); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nk-filter__btn:hover { color: var(--nk-paper); border-color: var(--nk-brass-20); }
.nk-filter__btn.active { color: var(--nk-ink); background: var(--nk-brass); border-color: var(--nk-brass); }

/* ============================================================
   13. VESSEL / PRODUCT DETAIL PAGE
   ============================================================ */
.nk-page-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: var(--sp-xl); }
.nk-page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.nk-page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--nk-ink) 0%, rgba(10,10,8,0.6) 50%, rgba(10,10,8,0.2) 100%); }
.nk-page-hero__content { position: relative; z-index: var(--z-overlay); width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-lg); }
.nk-coord-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.nk-coord-photo { aspect-ratio: 3/4; background: var(--nk-fog); border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; position: relative; }
.nk-coord-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width:768px) { .nk-coord-grid { grid-template-columns: 1fr; } }
.nk-narrative p { font-family: var(--font-jp); font-size: clamp(15px,1.5vw,17px); font-weight: 300; line-height: 1.9; color: var(--nk-cream); margin-bottom: var(--sp-lg); }
.nk-design-intent { background: var(--nk-smoke); border-left: 3px solid var(--nk-brass); padding: var(--sp-lg) var(--sp-xl); margin-block: var(--sp-2xl); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.nk-design-intent__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--nk-brass); margin-bottom: var(--sp-md); }
.nk-design-intent__text { font-family: var(--font-jp); font-size: clamp(14px,1.5vw,16px); font-weight: 300; line-height: 1.9; color: var(--nk-cream); font-style: italic; }

/* ============================================================
   14. VESSEL RECORDS TABLE
   ============================================================ */
.nk-vessel-records { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.nk-vessel-records th { text-align: left; color: var(--nk-brass); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: var(--sp-sm) var(--sp-md); border-bottom: var(--border-gold); }
.nk-vessel-records td { padding: var(--sp-sm) var(--sp-md); color: var(--nk-cream); border-bottom: var(--border-thin); vertical-align: top; }
.nk-vessel-records td:first-child { color: var(--nk-ash); white-space: nowrap; width: 160px; }
.nk-vessel-records tr:last-child td { border-bottom: none; }

/* ============================================================
   15. PHILOSOPHY / MANIFESTO
   ============================================================ */
.nk-manifesto { text-align: center; padding-block: var(--sp-3xl); position: relative; }
.nk-manifesto__border-top, .nk-manifesto__border-bottom { width: 120px; height: 1px; background: linear-gradient(to right, transparent, var(--nk-brass), transparent); margin-inline: auto; }
.nk-manifesto__border-top  { margin-bottom: var(--sp-xl); }
.nk-manifesto__border-bottom { margin-top: var(--sp-xl); }
.nk-manifesto__concept { font-family: var(--font-jp); font-size: clamp(28px,5vw,60px); font-weight: 300; color: var(--nk-brass); letter-spacing: 0.2em; margin-bottom: var(--sp-lg); }
.nk-manifesto__quote { font-family: var(--font-serif); font-size: clamp(15px,2vw,20px); font-weight: 300; font-style: italic; color: var(--nk-cream); line-height: 1.9; max-width: 680px; margin-inline: auto; }

/* ============================================================
   16. FOOTER
   ============================================================ */
.nk-footer { background: var(--nk-smoke); border-top: var(--border-thin); padding-block: var(--sp-3xl) var(--sp-xl); }
.nk-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-xl); padding-bottom: var(--sp-xl); border-bottom: var(--border-thin); margin-bottom: var(--sp-xl); }
.nk-footer__brand-name { font-family: var(--font-serif); font-size: 13px; font-weight: 300; color: var(--nk-ash); margin-top: var(--sp-sm); margin-bottom: var(--sp-md); }
.nk-footer__tagline { font-family: var(--font-jp); font-size: 13px; color: var(--nk-ash); line-height: 1.7; }
.nk-footer__col-title { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nk-brass); margin-bottom: var(--sp-md); }
.nk-footer__link { display: block; font-family: var(--font-serif); font-size: 14px; font-weight: 300; color: var(--nk-ash); padding-block: 4px; transition: color var(--dur-fast) var(--ease-out); }
.nk-footer__link:hover { color: var(--nk-paper); }
.nk-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); }
.nk-footer__copyright { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--nk-ash); }
@media (max-width:1024px) { .nk-footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .nk-footer__grid { grid-template-columns: 1fr; } .nk-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   17. SCROLL-REVEAL
   ============================================================ */
.nk-reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.nk-reveal.visible { opacity: 1; transform: translateY(0); }
.nk-reveal--delay-1 { transition-delay: 0.1s; }
.nk-reveal--delay-2 { transition-delay: 0.2s; }
.nk-reveal--delay-3 { transition-delay: 0.3s; }
.nk-reveal--delay-4 { transition-delay: 0.4s; }

/* ============================================================
   18. KEYFRAMES
   ============================================================ */
@keyframes fadeUp  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   19. UTILITY CLASSES
   ============================================================ */
.nk-text-center  { text-align: center; }
.nk-text-right   { text-align: right; }
.nk-flex         { display: flex; }
.nk-flex-center  { display: flex; align-items: center; justify-content: center; }
.nk-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nk-gap-sm { gap: var(--sp-sm); } .nk-gap-md { gap: var(--sp-md); } .nk-gap-lg { gap: var(--sp-lg); }
.nk-mt-sm { margin-top: var(--sp-sm); } .nk-mt-md { margin-top: var(--sp-md); } .nk-mt-lg { margin-top: var(--sp-lg); } .nk-mt-xl { margin-top: var(--sp-xl); }
.nk-mb-sm { margin-bottom: var(--sp-sm); } .nk-mb-md { margin-bottom: var(--sp-md); } .nk-mb-lg { margin-bottom: var(--sp-lg); } .nk-mb-xl { margin-bottom: var(--sp-xl); }
.nk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ============================================================
   20. COLOR PAGE — FINAL CTA
   ============================================================ */
#nk-story-color .nksc-final-cta { border-top: 0.5px solid #1e1e1a; position: relative; padding: 120px 40px 140px; overflow: hidden; }
#nk-story-color .nksc-final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(184,146,42,0.06) 0%, transparent 70%); pointer-events: none; }
#nk-story-color .nksc-final-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; }
#nk-story-color .nksc-final-cta-code { font-family: 'Share Tech Mono',monospace; font-size: 9px; letter-spacing: 0.35em; color: #3a3930; display: block; margin-bottom: 48px; }
#nk-story-color .nksc-final-cta-headline { font-family: 'Bebas Neue',sans-serif; font-size: clamp(2.8rem,6vw,5rem); line-height: 0.95; letter-spacing: 0.04em; color: #f4efe7; margin-bottom: 32px; }
#nk-story-color .nksc-final-cta-headline em { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-weight: 300; color: #b8922a; }
#nk-story-color .nksc-final-cta-copy { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(1rem,1.8vw,1.2rem); font-weight: 300; font-style: italic; line-height: 2.0; color: #c8c1b4; margin-bottom: 56px; }
#nk-story-color .nksc-final-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#nk-story-color .nksc-btn-primary { font-family: 'Bebas Neue',sans-serif; font-size: 1rem; letter-spacing: 0.25em; color: #0a0a08; background: #b8922a; padding: 18px 56px; text-decoration: none; display: inline-block; transition: background 0.2s; white-space: nowrap; }
#nk-story-color .nksc-btn-primary:hover { background: #f4efe7; }
#nk-story-color .nksc-btn-secondary { font-family: 'Bebas Neue',sans-serif; font-size: 0.9rem; letter-spacing: 0.22em; color: #b8922a; text-decoration: none; border-bottom: 1px solid rgba(184,146,42,0.4); padding-bottom: 3px; white-space: nowrap; display: inline-block; transition: border-color 0.2s, color 0.2s; }
#nk-story-color .nksc-btn-secondary:hover { border-color: #b8922a; color: #f4efe7; }
.nk-story-color-btn:hover { background: rgba(184,146,42,0.15) !important; border-color: #b8922a !important; color: #f4efe7 !important; }

/* ============================================================
   END — necokoucan-master.css v3.0
   © 猫・工・艦 & Cats_and_boltaction. All rights reserved.
   ============================================================ */