html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #060606;
}

/* --- 1. BASE --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Shippori+Mincho:wght@400;500;700&display=swap');
#yukari-fullscreen-root {
  --bg: #060606; --fg: #eaddcf; --accent: #d4af37;
  --bg-light: #f4f0ea; --bg-gray: #141414; --fg-dark: #111111;
  --font-en: "Cormorant Garamond", serif; --font-jp: "Shippori Mincho", serif;
  --hero-pos: 50% 15%; --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important;
  z-index: 2147483647; background: var(--bg); color: var(--fg); font-family: var(--font-jp);
  overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0;
  line-height: 1.8; -webkit-font-smoothing: antialiased;
}
#yukari-fullscreen-root * { box-sizing: border-box; }
#yukari-fullscreen-root img { display: block; width: 100%; height: auto; }
#yukari-fullscreen-root a { color: inherit; text-decoration: none; box-shadow: none; }

/* スマホ表示でのみ有効にする改行クラス (PCでは非表示) */
#yukari-fullscreen-root .sp-br { display: none; }

/* --- 元のUI（復活） --- */
#yukari-fullscreen-root .np-ui {
  position: absolute; top: 0; left: 0; right: 0; padding: 30px; z-index: 1000;
  display: flex; justify-content: space-between; pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease 0.5s;
}
#yukari-fullscreen-root.np-intro-done .np-ui {
  opacity: 1;
}

#yukari-fullscreen-root .np-ui__logo { pointer-events: auto; mix-blend-mode: difference; transition: opacity 0.3s; }
#yukari-fullscreen-root .np-ui__logo:hover { opacity: 0.7; }
#yukari-fullscreen-root .np-ui__cta {
  position: fixed; bottom: 30px; right: 30px; pointer-events: auto; z-index: 1000;
  width: 100px; height: 100px; background: #eaddcf; color: #000;
  border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-family: sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform 0.3s ease; text-decoration: none; line-height: 1.2; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#yukari-fullscreen-root .np-ui__cta:hover { transform: scale(1.1); }

/* --- HERO --- */
#yukari-fullscreen-root .np-hero { height: 100vh; position: relative; overflow: hidden; display: grid; place-items: center; }
#yukari-fullscreen-root .np-hero__bg { position: absolute; inset: 0; }
#yukari-fullscreen-root .np-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-pos); opacity: 0; transition: opacity 0.1s linear;
}
#yukari-fullscreen-root .np-hero__img.is-front { opacity: 1; }
#yukari-fullscreen-root .np-hero__content {
  position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; z-index: 10;
  mix-blend-mode: difference; color: #fff;
}
#yukari-fullscreen-root .np-title { margin: 0; line-height: 0.9; }
#yukari-fullscreen-root .np-title__line { display: block; font-family: var(--font-en); font-size: clamp(60px, 12vw, 160px); font-weight: 300; letter-spacing: -0.02em; }
#yukari-fullscreen-root .np-hero-sub { margin-top: 15px; font-size: 14px; letter-spacing: 0.1em; opacity: 0.9; }
#yukari-fullscreen-root .np-hero-reveal { opacity: 0; transform: translateY(30px); filter: blur(10px); transition: 1s ease; transition-delay: var(--d); }
#yukari-fullscreen-root.np-intro-done .np-hero-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }
#yukari-fullscreen-root.np-intro-running .np-hero__content { display: none; }
#yukari-fullscreen-root .np-shutter {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0; z-index: 5;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
}
/* PCのデフォルトフラッシュアニメーション */
#yukari-fullscreen-root .np-shutter.is-fire { animation: flash 0.1s; }
@keyframes flash { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }

#yukari-fullscreen-root .np-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; }
#yukari-fullscreen-root .np-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* --- OTHER SECTIONS --- */
.np-external-part { display: none; }
#yukari-fullscreen-root .np-section { padding: 160px 0; position: relative; width: 100%; }
#yukari-fullscreen-root .np-inner, 
#yukari-fullscreen-root .np-inner-wide { width: 100%; padding: 0 40px; margin: 0; position: relative; z-index: 2; max-width: none !important; }
#yukari-fullscreen-root .np-label { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 24px; font-family: sans-serif; text-transform: uppercase; }
#yukari-fullscreen-root .np-heading { font-family: var(--font-jp); font-weight: 500; margin: 0 0 40px; color: inherit; }
#yukari-fullscreen-root .np-heading .accent { color: var(--accent); font-family: var(--font-en); font-style: italic; font-weight: 400; padding-right: 0.1em; }
#yukari-fullscreen-root .np-body { font-size: 15px; line-height: 2.1; color: #aaa; text-align: justify; }
#yukari-fullscreen-root .np-body p { margin-bottom: 24px; }
#yukari-fullscreen-root .np-link { display: inline-block; margin-top: 20px; font-family: var(--font-en); font-size: 16px; border-bottom: 1px solid rgba(212, 175, 55, 0.5); padding-bottom: 4px; transition: 0.3s; color: var(--fg); }
#yukari-fullscreen-root .np-link:hover { border-color: var(--accent); opacity: 0.8; }
.np-reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
.np-reveal.is-inview { opacity: 1; transform: translateY(0); }

/* ABOUT */
#yukari-fullscreen-root .np-split { display: grid; grid-template-columns: 0.9fr 1fr; gap: 80px; align-items: center; width: 100%; }
#yukari-fullscreen-root .np-img-frame { position: relative; overflow: hidden; border-radius: 2px; width: 100%; }
#yukari-fullscreen-root .np-img-frame img { width: 100%; height: auto; transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), filter 1.2s; filter: grayscale(100%) contrast(1.1); }
#yukari-fullscreen-root .np-img-frame:hover img { filter: grayscale(0%) contrast(1); transform: scale(1.03); }

/* === CONCEPT === */
#yukari-fullscreen-root .np-light-theme { background: var(--bg-light); color: var(--fg-dark); }
#yukari-fullscreen-root .np-light-theme .np-body { color: #555; }
#yukari-fullscreen-root .np-bg-text { position: absolute; top: 15%; left: -5%; font-family: var(--font-en); font-size: 20vw; font-weight: 700; color: rgba(0,0,0,0.02); line-height: 1; pointer-events: none; white-space: nowrap; z-index: 0; }

#yukari-fullscreen-root .concept-collage { 
  position: relative; height: 700px; width: 100%; 
  display: flex; align-items: center; justify-content: center;
}
#yukari-fullscreen-root .collage-container { overflow: hidden; }
#yukari-fullscreen-root .collage-container.main { 
  position: relative; width: 60%; z-index: 0; box-shadow: 20px 20px 60px rgba(0,0,0,0.1); aspect-ratio: 4/5;
}
#yukari-fullscreen-root .collage-container.sub { 
  position: absolute; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 4px solid #fff; aspect-ratio: 4/5;
}
#yukari-fullscreen-root .collage-container.c1 { top: 0; right: 5%; width: 25%; }
#yukari-fullscreen-root .collage-container.c2 { bottom: 5%; left: 0%; width: 30%; }
#yukari-fullscreen-root .collage-container.c3 { top: 10%; left: 10%; width: 22%; }
#yukari-fullscreen-root .collage-container.c4 { bottom: 10%; right: 0; width: 28%; }
#yukari-fullscreen-root .collage-container img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.5s ease; z-index: 1;
}
#yukari-fullscreen-root .collage-container.sub img { filter: sepia(0.2) contrast(0.9); }
#yukari-fullscreen-root .collage-container img.active { opacity: 1; z-index: 2; }

/* SERVICE */
#yukari-fullscreen-root .np-sticky-wrap { position: relative; width: 100%; }
#yukari-fullscreen-root .np-sticky-row { display: flex; gap: 60px; width: 100%; }
#yukari-fullscreen-root .np-sticky-vis { width: 50%; height: 80vh; position: sticky; top: 10vh; border-radius: 4px; overflow: hidden; }
#yukari-fullscreen-root .np-sticky-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease, transform 1s ease; transform: scale(1.05); }
#yukari-fullscreen-root .np-sticky-vis img.active { opacity: 1; transform: scale(1); }
#yukari-fullscreen-root .np-sticky-content { width: 50%; padding-bottom: 20vh; }
#yukari-fullscreen-root .np-service-item { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(255,255,255,0.1); padding: 40px 0; opacity: 0.3; transition: 0.5s; }
#yukari-fullscreen-root .np-service-item.active-text { opacity: 1; }
#yukari-fullscreen-root .np-service-num { font-family: var(--font-en); font-size: 30px; color: var(--accent); display: block; margin-bottom: 10px; }

/* PROJECT (PC) */
#yukari-fullscreen-root .np-gray-theme { background: var(--bg-gray); }
#yukari-fullscreen-root .np-accordion { display: flex; gap: 1px; height: 600px; width: 100%; margin-top: 60px; }
#yukari-fullscreen-root .np-acc-item { flex: 1; position: relative; overflow: hidden; transition: flex 0.6s cubic-bezier(0.2, 1, 0.3, 1); cursor: pointer; border-right: 1px solid rgba(255,255,255,0.05); }
#yukari-fullscreen-root .np-acc-item:hover { flex: 3; }
#yukari-fullscreen-root .np-acc-bg { position: absolute; inset: 0; }
#yukari-fullscreen-root .np-acc-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) grayscale(1); transition: 0.6s; }
#yukari-fullscreen-root .np-acc-item:hover .np-acc-bg img { filter: brightness(0.8) grayscale(0); transform: scale(1.05); }
#yukari-fullscreen-root .np-acc-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
#yukari-fullscreen-root .np-acc-title { font-size: 20px; color: #fff; margin: 0; white-space: nowrap; }

/* GALLERY */
#yukari-fullscreen-root .np-gallery { background: #0c0c0c; padding-top: 100px; padding-bottom: 100px; }
#yukari-fullscreen-root .np-gallery-grid { column-count: 4; column-gap: 20px; width: 100%; }
#yukari-fullscreen-root .np-gallery-item { break-inside: avoid; margin-bottom: 20px; position: relative; overflow: hidden; border-radius: 2px; opacity: 0; transform: translateY(20px); transition: 0.8s cubic-bezier(0.2, 1, 0.3, 1); width: 100%; }
#yukari-fullscreen-root .np-gallery-item.is-inview { opacity: 1; transform: translateY(0); }
#yukari-fullscreen-root .np-gallery-item img { transition: transform 0.5s ease; filter: brightness(0.85); width: 100%; display: block; }
#yukari-fullscreen-root .np-gallery-item:hover img { transform: scale(1.05); filter: brightness(1); }
#yukari-fullscreen-root button.np-gallery-item {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  color: inherit;
}
#yukari-fullscreen-root .np-gallery-page { padding-top: 40px; }

/* GALLERY PAGE HERO */
#yukari-fullscreen-root .np-page-hero {
  position: relative;
  min-height: 48vh;
  display: grid;
  place-items: end center;
  overflow: hidden;
  padding: 120px 24px 64px;
}
#yukari-fullscreen-root .np-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#yukari-fullscreen-root .np-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.55) saturate(0.9);
  transform: scale(1.04);
}
#yukari-fullscreen-root .np-page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.55) 45%, rgba(12,12,12,0.95) 100%);
}
#yukari-fullscreen-root .np-page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
}
#yukari-fullscreen-root .np-page-hero__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(42px, 8vw, 88px);
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #fff;
}
#yukari-fullscreen-root .np-page-hero__lead {
  margin: 18px 0 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(234, 221, 207, 0.78);
}
.np-nav-link.is-current .txt,
.np-m-link.is-current { color: var(--gold, #d4af37); }

/* LIGHTBOX */
.np-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  padding: 24px;
}
.np-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.np-lightbox[hidden] { display: none !important; }
.np-lightbox.is-open[hidden] { display: grid !important; }
.np-lightbox__figure {
  margin: 0;
  max-width: min(92vw, 1200px);
  max-height: 84vh;
}
.np-lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.np-lightbox__close,
.np-lightbox__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.np-lightbox__close {
  top: 18px;
  right: 22px;
  font-size: 42px;
  line-height: 1;
  opacity: 0.8;
}
.np-lightbox__close:hover { opacity: 1; }
.np-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 56px;
  line-height: 1;
  padding: 12px 18px;
  opacity: 0.7;
}
.np-lightbox__nav:hover { opacity: 1; }
.np-lightbox__nav--prev { left: 8px; }
.np-lightbox__nav--next { right: 8px; }
.np-lightbox__counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}
#yukari-fullscreen-root .np-contact { min-height: 100vh; display: grid; place-items: center; position: relative; text-align: center; }
#yukari-fullscreen-root .np-contact__bg { position: absolute; inset: 0; z-index: 0; }
#yukari-fullscreen-root .np-contact__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3); }
#yukari-fullscreen-root .np-contact__content { position: relative; z-index: 10; max-width: 600px; padding: 20px; }
#yukari-fullscreen-root .np-contact h2 { font-family: var(--font-en); font-size: 60px; color: #fff; font-weight: 300; margin-bottom: 20px; line-height: 1.2; }
#yukari-fullscreen-root .np-btn { display: inline-block; padding: 15px 40px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; color: #fff; font-size: 14px; letter-spacing: 0.1em; margin-top: 30px; transition: 0.3s; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); }
#yukari-fullscreen-root .np-btn:hover { background: #fff; color: #000; }

/* ============================
   GLOBAL TEXT OVERRIDES 
============================ */
#yukari-fullscreen-root .np-heading {
  font-size: clamp(28px, 4.5vw, 70px) !important;
  line-height: 1.3;
  margin-bottom: 40px;
}
#yukari-fullscreen-root .np-service-item h3 { 
  font-size: clamp(22px, 2.5vw, 34px) !important; 
  font-weight: bold; 
  margin-bottom: 20px; 
}
#yukari-fullscreen-root .np-service-item p { 
  font-size: clamp(15px, 1.5vw, 20px) !important; 
  line-height: 1.9; 
}
#yukari-fullscreen-root .np-service-num { 
  font-size: clamp(24px, 2vw, 30px) !important; 
  font-weight: bold; 
  opacity: 0.5; 
}

/* ============================
   RESPONSIVE (SP FIXES)
============================ */
@media (max-width: 900px) {
  /* --- 0. SPでの改行最適化 --- */
  #yukari-fullscreen-root .pc-br { display: none; }
  #yukari-fullscreen-root .sp-br { display: inline; }

  /* --- 1. SP専用ヒーロービュー --- */
  #yukari-fullscreen-root { height: 100dvh !important; }
  #yukari-fullscreen-root .np-hero { height: 100dvh; }

  /* SP用の最終画像の切り取り位置（顔が見切れないように中央上寄り） */
  #yukari-fullscreen-root .np-hero__img {
    object-position: center 30%; 
  }

  /* SP用のフラッシュ軽減（キレはあるが眩しすぎない） */
  #yukari-fullscreen-root .np-shutter.is-fire { animation: flash-sp 0.15s !important; }
  @keyframes flash-sp { 0%{opacity:0} 50%{opacity:0.4} 100%{opacity:0} }

  /* Contactの背景フォーカス */
  #yukari-fullscreen-root .np-contact__bg img { object-position: center 80%; }

  /* タイトルやボタンのサイズ最適化 */
  #yukari-fullscreen-root .np-title__line { font-size: 14vw; }
  #yukari-fullscreen-root .np-hero__content { bottom: 100px; }
  #yukari-fullscreen-root .np-hero-sub { font-size: 12px; }
  #yukari-fullscreen-root .np-ui { padding: 20px 15px; }
  #yukari-fullscreen-root .np-ui__logo svg { width: 120px; }
  #yukari-fullscreen-root .np-ui__cta { width: 65px; height: 65px; font-size: 9px; bottom: 20px; right: 20px; }

  /* --- 2. ProfileセクションのSP最適化（レイアウト崩れ修正） --- */
  #yukari-fullscreen-root .np-pro-container { 
    flex-direction: column; 
    gap: 40px; 
    padding: 0 20px; 
  }
  #yukari-fullscreen-root .np-pro-vis { 
    width: 100%; 
    max-width: 300px; 
    margin: 0 auto; /* 画像を中央配置 */
  }
  #yukari-fullscreen-root .np-pro-vis-inner { 
    height: 400px; 
  }
  #yukari-fullscreen-root .np-pro-vis::before { 
    /* はみ出し防止のため装飾のズレを少し抑える */
    left: -10px; 
    top: -10px; 
  }
  #yukari-fullscreen-root .np-pro-sec.is-inview .np-pro-vis::before { 
    left: 10px; 
    top: 10px; 
  }
  #yukari-fullscreen-root .np-pro-txt { 
    text-align: center; /* SP版はテキスト全体を中央揃えに */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
  }
  #yukari-fullscreen-root .np-pro-bg-name span { 
    font-size: 24vw; 
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05); 
  }
  #yukari-fullscreen-root .np-pro-name-disp { 
    font-size: 42px; 
    margin-bottom: 20px;
    transform: translateX(0); /* SPは横からスライドさせない */
  }
  #yukari-fullscreen-root .np-pro-label { 
    transform: translateX(0); 
    margin-bottom: 20px;
  }
  #yukari-fullscreen-root .np-pro-desc { 
    text-align: left; /* 長文は左揃えの方が見やすいため */
  }

  /* --- 3. ConceptセクションのSP最適化（PCライクなコラージュ復活） --- */
  #yukari-fullscreen-root .concept-collage { 
    height: 110vw; /* 画面幅に応じて高さが可変 */
    max-height: 500px; 
    display: flex; /* 非表示を解除しレイアウトを復活 */
    margin: 20px 0 40px; 
  }
  #yukari-fullscreen-root .collage-container.main { width: 55%; }
  #yukari-fullscreen-root .collage-container.sub { 
    display: block; /* SP版でもサブ画像を表示 */
    border-width: 2px; /* SP用に枠線を少し細く */
  } 
  /* SP向けの細かな位置調整（はみ出さないように） */
  #yukari-fullscreen-root .collage-container.c1 { width: 28%; right: 2%; }
  #yukari-fullscreen-root .collage-container.c2 { width: 32%; left: -2%; }
  #yukari-fullscreen-root .collage-container.c3 { width: 25%; left: 8%; top: 5%; }
  #yukari-fullscreen-root .collage-container.c4 { width: 30%; right: -2%; bottom: 5%; }

  /* --- 4. Service セクションのSP最適化 --- */
  #yukari-fullscreen-root .np-sticky-row { display: block; }
  #yukari-fullscreen-root .np-sticky-vis { 
    position: sticky; top: 10vh; width: 100%; height: 50vh; margin-bottom: 0; z-index: 0; border-radius: 4px;
  }
  #yukari-fullscreen-root .np-sticky-content { 
    width: 100%; position: relative; z-index: 1; margin-top: -10vh; padding-bottom: 10vh;
  }
  #yukari-fullscreen-root .np-service-item { 
    min-height: auto; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(8px);
    padding: 40px 30px; margin: 0 15px 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
    opacity: 0.5; transition: 0.5s;
  }
  #yukari-fullscreen-root .np-service-item.active-text {
    opacity: 1; border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: translateY(-5px);
  }

  /* --- 5. Empowerment Projects のSP最適化 --- */
  #yukari-fullscreen-root .np-proj-lead { font-size: 14px; text-align: center; line-height: 2.2; padding: 0 10px; }
  #yukari-fullscreen-root .np-proj-lead strong { font-size: 18px; text-align: center; margin-bottom: 15px; }
  #yukari-fullscreen-root .np-accordion { flex-direction: column; height: auto; gap: 30px; margin-top: 40px; }
  #yukari-fullscreen-root .np-acc-item { height: 400px; flex: none; border-radius: 12px; border: none; box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
  #yukari-fullscreen-root .np-acc-bg img { filter: brightness(0.65) grayscale(0); }
  #yukari-fullscreen-root .np-acc-content { padding: 30px 25px; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); }
  #yukari-fullscreen-root .np-acc-title { font-size: 26px; margin-bottom: 8px; }
  #yukari-fullscreen-root .np-acc-desc { max-height: 500px; opacity: 1; transform: none; margin-top: 15px; font-size: 14px; line-height: 1.8; }
  #yukari-fullscreen-root .np-heading { font-size: clamp(26px, 7vw, 40px) !important; }

  /* --- 6. その他既存のSPレイアウト調整 --- */
  #yukari-fullscreen-root .np-inner, #yukari-fullscreen-root .np-inner-wide { padding: 0 20px; }
  #yukari-fullscreen-root .np-split { grid-template-columns: 1fr; gap: 40px; }
  #yukari-fullscreen-root .np-gallery-grid { column-count: 2; column-gap: 10px; }
}

/* --- PROFILE SECTION --- */
.np-pro-sec {
  position: relative; padding: 150px 0; overflow: hidden; width: 100%;
  background: linear-gradient(to bottom, #060606, #0a0a0a); 
}
.np-pro-bg-name {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; pointer-events: none; z-index: 0; line-height: 0.8;
}
.np-pro-bg-name span {
  display: block; font-family: var(--font-en); font-size: 18vw; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px rgba(212, 175, 55, 0.15); white-space: nowrap;
  opacity: 0; transform: scale(1.1); transition: 1.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.np-pro-sec.is-inview .np-pro-bg-name span { opacity: 1; transform: scale(1); }
.np-pro-container {
  position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: center; gap: 80px;
}
.np-pro-vis { position: relative; width: 400px; flex-shrink: 0; }
.np-pro-vis-inner {
  position: relative; overflow: hidden; width: 100%; height: 550px;
  transform: translateY(50px); opacity: 0; transition: 1.2s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
}
.np-pro-sec.is-inview .np-pro-vis-inner { transform: translateY(0); opacity: 1; }
.np-pro-vis-inner img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.9); transition: 0.8s ease;
}
.np-pro-vis-inner:hover img { filter: grayscale(0%) brightness(1); transform: scale(1.05); }
.np-pro-vis::before {
  content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%;
  border: 1px solid var(--accent); opacity: 0; transition: 1s ease 0.5s; z-index: -1;
}
.np-pro-sec.is-inview .np-pro-vis::before { opacity: 0.5; top: 20px; left: 20px; }
.np-pro-txt { position: relative; max-width: 500px; color: var(--fg); }
.np-pro-label {
  display: block; font-size: 11px; letter-spacing: 0.3em; color: var(--accent);
  margin-bottom: 30px; opacity: 0; transform: translateX(-20px); transition: 0.8s ease 0.4s;
}
.np-pro-sec.is-inview .np-pro-label { opacity: 1; transform: translateX(0); }
.np-pro-name-disp {
  font-family: var(--font-en); font-size: 60px; line-height: 1; margin-bottom: 40px;
  opacity: 0; transform: translateX(-20px); transition: 0.8s ease 0.5s;
}
.np-pro-sec.is-inview .np-pro-name-disp { opacity: 1; transform: translateX(0); }
.np-pro-name-disp span { color: var(--accent); }
.np-pro-desc {
  font-size: 15px; line-height: 2.2; text-align: justify; color: #ccc;
  opacity: 0; transform: translateY(20px); transition: 0.8s ease 0.6s;
}
.np-pro-sec.is-inview .np-pro-desc { opacity: 1; transform: translateY(0); }

/* --- PROJECT SECTION TEXT STYLES --- */
.np-proj-lead, .np-proj-footer {
  max-width: 800px; margin: 0 auto; text-align: center; color: #ccc; line-height: 2.2; font-weight: 300;
}
.np-proj-lead { margin-bottom: 60px; font-size: 16px; }
.np-proj-lead strong {
  display: block; font-size: 20px; color: #fff; margin-bottom: 20px; font-weight: 500; font-family: var(--font-jp);
}
.np-proj-footer {
  margin-top: 60px; font-size: 18px; font-family: var(--font-jp); color: #fff; letter-spacing: 0.05em;
}
.np-acc-content {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  padding: 40px 30px; transition: 0.5s;
}
.np-acc-desc {
  font-size: 14px; line-height: 1.8; color: #ddd; margin-top: 15px;
  max-height: 0; opacity: 0; overflow: hidden; transition: all 0.6s ease; transform: translateY(10px);
}
.np-acc-item:hover .np-acc-desc { max-height: 200px; opacity: 1; transform: translateY(0); margin-top: 15px; }
.np-acc-title { font-family: var(--font-en); font-size: 28px; margin-bottom: 5px; color: var(--accent); }
.np-acc-sub-jp { display: block; font-size: 13px; color: #fff; margin-bottom: 10px; opacity: 0.8; font-weight: normal; }

/* --- VIEW MORE BUTTON STYLE --- */
.np-gallery-footer { text-align: center; margin-top: 60px; }
.np-view-more-btn {
  display: inline-block; position: relative; padding: 15px 60px; border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff; font-family: var(--font-en); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; transition: all 0.4s ease; overflow: hidden;
}
.np-view-more-btn::before {
  content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
  background-color: #fff; transition: all 0.4s ease; z-index: -1;
}
.np-view-more-btn:hover { color: #000; border-color: #fff; letter-spacing: 0.3em; }
.np-view-more-btn:hover::before { width: 100%; }

/* --- CINEMATIC HEADER CSS 追加分 --- */
#np-cinematic-wrapper {
  --gold: #d4af37;
  --ease-lens: cubic-bezier(0.25, 1, 0.5, 1);
  --font-serif: "Cormorant Garamond", serif;
  --blur-amount: 4px;
}
.np-header {
  position: fixed; top: 0; left: 0; width: 100%;
  padding: 25px 40px;
  z-index: 9999;
  transition: padding 0.5s var(--ease-lens);
  mix-blend-mode: difference;
  color: #fff;
}
.np-header__inner {
  display: flex; justify-content: flex-end; align-items: center; /* space-betweenから右寄せに変更 */
  max-width: 1600px; margin: 0 auto;
  position: relative; z-index: 2;
}
.np-header__bokeh-bg {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity 0.6s ease;
  overflow: hidden; pointer-events: none;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.np-header__bokeh-bg::before,
.np-header__bokeh-bg::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(30px); opacity: 0.3;
}
.np-header__bokeh-bg::before { top: -50%; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, var(--gold), transparent 70%); }
.np-header__bokeh-bg::after { bottom: -50%; right: 20%; width: 200px; height: 200px; background: radial-gradient(circle, #fff, transparent 70%); }

.np-header.is-scrolled { padding: 15px 40px; mix-blend-mode: normal; }
.np-header.is-scrolled .np-header__bokeh-bg { opacity: 1; }
.np-header.is-hidden { transform: translateY(-100%); transition: transform 0.5s var(--ease-lens); }

.nph-blur-target { filter: blur(0); opacity: 1; transition: filter 0.5s var(--ease-lens), opacity 0.5s var(--ease-lens), transform 0.5s var(--ease-lens), color 0.3s; }
.nph-blur-group:hover .nph-blur-target { filter: blur(var(--blur-amount)); opacity: 0.5; }
.nph-blur-group .nph-blur-target:hover { filter: blur(0px) !important; opacity: 1 !important; transform: scale(1.05); }

.np-header__nav { display: flex; align-items: center; }
.np-nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; align-items: center; }
.np-nav-link { text-decoration: none; color: #fff; font-family: var(--font-serif); font-size: 17px; letter-spacing: 0.05em; position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px; }
.focus-dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; margin-top: 4px; opacity: 0; transition: 0.3s; }
.np-nav-link:hover { color: var(--gold); }
.np-nav-link:hover .focus-dot { opacity: 1; }

.np-lens-btn { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.lens-ring { position: absolute; inset: 0; animation: rotateSlow 20s linear infinite; }
.ring-active { transition: stroke-dashoffset 0.6s var(--ease-lens); }
.btn-txt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: sans-serif; }
.np-lens-btn:hover .ring-active { stroke-dashoffset: 0; }
@keyframes rotateSlow { to { transform: rotate(360deg); } }

.np-aperture-burger { display: none; background: none; border: none; cursor: pointer; width: 50px; height: 50px; position: relative; z-index: 10001; color: #fff; padding: 0; }
.aperture-box { width: 30px; height: 30px; position: relative; margin: 10px auto; }
.blade { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: currentColor; margin-top: -1px; margin-left: -10px; transition: 0.5s var(--ease-lens); }
.blade-1 { transform: translateY(-8px) rotate(0deg); }
.blade-2 { transform: translateY(4px) translateX(7px) rotate(120deg); }
.blade-3 { transform: translateY(4px) translateX(-7px) rotate(240deg); }
.np-burger.is-active .blade-1 { transform: translateY(0) rotate(45deg); background: var(--gold); }
.np-burger.is-active .blade-2 { transform: translateY(0) rotate(-45deg); background: var(--gold); opacity: 1; }
.np-burger.is-active .blade-3 { transform: translateY(0) rotate(-45deg); opacity: 0; } 

.np-mobile-menu { position: fixed; inset: 0; z-index: 10000; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.np-mobile-backdrop { position: absolute; inset: 0; background: #080808; opacity: 0; transition: opacity 0.6s ease; }
.np-mobile-menu.is-open { pointer-events: auto; }
.np-mobile-menu.is-open .np-mobile-backdrop { opacity: 1; }
.np-mobile-nav { position: relative; z-index: 2; }
.np-mobile-nav ul { list-style: none; padding: 0; }
.np-mobile-nav li { margin-bottom: 2vh; overflow: hidden; }
.np-m-link { display: block; text-decoration: none; color: #fff; font-family: var(--font-serif); font-size: clamp(36px, 7vw, 50px); transform: translateY(100%); opacity: 0; filter: blur(10px); transition: all 0.8s var(--ease-lens); }
.np-m-link .idx { font-family: sans-serif; font-size: 0.4em; color: var(--gold); margin-right: 15px; vertical-align: middle; letter-spacing: 0.1em; opacity: 0.7; }
.np-mobile-menu.is-open .np-m-link { transform: translateY(0); opacity: 1; filter: blur(0); }

.np-mobile-menu.is-open li:nth-child(1) .np-m-link { transition-delay: 0.1s; }
.np-mobile-menu.is-open li:nth-child(2) .np-m-link { transition-delay: 0.15s; }
.np-mobile-menu.is-open li:nth-child(3) .np-m-link { transition-delay: 0.2s; }
.np-mobile-menu.is-open li:nth-child(4) .np-m-link { transition-delay: 0.25s; }
.np-mobile-menu.is-open li:nth-child(5) .np-m-link { transition-delay: 0.3s; }
.np-mobile-menu.is-open li:nth-child(6) .np-m-link { transition-delay: 0.35s; }

@media (max-width: 900px) {
  .np-header { padding: 15px 20px; mix-blend-mode: normal; }
  .np-header.is-scrolled { padding: 10px 20px; }
  .np-header__nav { display: none; }
  .np-aperture-burger { display: block; mix-blend-mode: difference; color: #fff; }
  .np-header__logo { mix-blend-mode: difference; }
  .nph-blur-group:hover .nph-blur-target { filter: blur(0); opacity: 1; }
}

/* --- Contact open triggers (button reset) --- */
#yukari-fullscreen-root button.np-ui__cta,
#yukari-fullscreen-root button.np-lens-btn,
#yukari-fullscreen-root button.np-btn,
#yukari-fullscreen-root button.np-m-link {
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: inherit;
  appearance: none;
  -webkit-appearance: none;
}
#yukari-fullscreen-root button.np-ui__cta {
  background: #eaddcf;
  color: #000;
}
#yukari-fullscreen-root button.np-btn {
  background: rgba(255,255,255,0.05);
}
#yukari-fullscreen-root button.np-m-link {
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0;
}

/* --- Contact Modal --- */
.np-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.np-contact-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}
.np-contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.2, 1, 0.3, 1);
  cursor: pointer;
}
.np-contact-modal.is-open .np-contact-modal__backdrop { opacity: 1; }

.np-contact-modal__panel {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  max-height: min(92vh, 880px);
  overflow: auto;
  margin: 0;
  padding: 40px 32px 36px;
  background: linear-gradient(180deg, #14110e 0%, #0a0908 100%);
  color: #eaddcf;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(110%);
  opacity: 0.85;
  transition:
    transform 0.55s cubic-bezier(0.2, 1, 0.3, 1),
    opacity 0.4s ease;
  font-family: "Shippori Mincho", serif;
}
.np-contact-modal.is-open .np-contact-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

.np-contact-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: transparent;
  color: #eaddcf;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.np-contact-modal__close:hover {
  transform: rotate(90deg);
  border-color: #d4af37;
  color: #d4af37;
}

.np-contact-modal__head {
  text-align: center;
  margin-bottom: 28px;
  padding-right: 24px;
}
.np-contact-modal__head .np-label {
  display: block;
  font-family: sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #d4af37;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.np-contact-modal__head h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(36px, 8vw, 52px);
  color: #fff;
  letter-spacing: 0.02em;
}
.np-contact-modal__head p {
  margin: 0;
  font-size: 14px;
  color: rgba(234, 221, 207, 0.7);
  line-height: 1.8;
}

.np-contact-form { display: grid; gap: 16px; }
.np-contact-form__field { display: grid; gap: 8px; text-align: left; }
.np-contact-form__field > span {
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(234, 221, 207, 0.75);
  text-transform: uppercase;
}
.np-contact-form__field em {
  color: #d4af37;
  font-style: normal;
}
.np-contact-form__field input,
.np-contact-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.np-contact-form__field textarea { resize: vertical; min-height: 120px; }
.np-contact-form__field input::placeholder,
.np-contact-form__field textarea::placeholder {
  color: rgba(255,255,255,0.28);
}
.np-contact-form__field input:focus,
.np-contact-form__field textarea:focus {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.06);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.np-contact-form .np-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.np-contact-form__captcha-row {
  display: grid;
  grid-template-columns: 220px 44px 1fr;
  gap: 10px;
  align-items: center;
}
.np-contact-form__captcha-row img {
  display: block;
  width: 220px;
  height: 64px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  background: #121212;
  object-fit: cover;
}
.np-contact-form__captcha-reload {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  color: #eaddcf;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.np-contact-form__captcha-reload:hover {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.08);
  color: #d4af37;
}
.np-contact-form__hint {
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(234, 221, 207, 0.55);
}
@media (max-width: 560px) {
  .np-contact-form__captcha-row {
    grid-template-columns: 1fr 44px;
    grid-template-areas:
      "img reload"
      "input input";
  }
  .np-contact-form__captcha-row img { grid-area: img; width: 100%; max-width: 220px; }
  .np-contact-form__captcha-reload { grid-area: reload; }
  .np-contact-form__captcha-row input { grid-area: input; }
}

.np-contact-form__status {
  min-height: 1.4em;
  margin: 0;
  font-size: 13px;
  color: #d4af37;
  text-align: center;
}
.np-contact-form__status.is-error { color: #e8a0a0; }
.np-contact-form__status.is-ok { color: #b7d7b0; }

.np-contact-form__submit {
  margin-top: 8px;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.np-contact-form__submit:hover {
  transform: translateY(-2px);
  background: #d4af37;
  border-color: #d4af37;
  color: #111;
}
.np-contact-form__submit:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

@media (min-width: 901px) {
  .np-contact-modal {
    align-items: center;
    padding: 24px;
  }
  .np-contact-modal__panel {
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    transform: translateY(40px) scale(0.96);
    max-height: min(88vh, 820px);
    padding: 48px 44px 40px;
  }
  .np-contact-modal.is-open .np-contact-modal__panel {
    transform: translateY(0) scale(1);
  }
}