/* =============================================
   NAGASOU HEADER — 共通ヘッダー CSS
   株式会社永惣 / Kabushiki Kaisha Nagasou
   Version: 1.0.0

   ─── TABLE OF CONTENTS ───
   1. DESIGN TOKENS
   2. BASE HEADER LAYOUT
   3. EMBLEM COMPONENT
   4. LOGO
   5. DESKTOP NAVIGATION
   6. CTA BUTTON
   7. HAMBURGER BUTTON
   8. MOBILE MENU OVERLAY
   9. SCROLL PROGRESS BAR
   10. BODY OFFSET / COCOON OVERRIDES
   11. RESPONSIVE
   12. ACCESSIBILITY
   13. PRINT
============================================= */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* ブランドカラー */
  --nh-sky:          #5AAFE0;
  --nh-sky-light:    #A8D8F0;
  --nh-sky-deep:     #2A7CAD;
  --nh-gold:         #C9A84C;
  --nh-gold-light:   #E8CF80;
  --nh-gold-pale:    #FDF6E3;
  --nh-gold-deep:    #8B6C28;
  --nh-olive:        #8BAB6E;
  --nh-ink:          #1E2420;
  --nh-ink-mid:      #3D4A42;
  --nh-ink-light:    #6B7A6F;
  --nh-cream:        #FAFAF7;
  --nh-white:        #FFFFFF;

  /* ヘッダー固有 */
  --nh-height:       72px;
  --nh-height-sm:    60px;
  --nh-z:            9900;
  --nh-z-overlay:    9950;

  /* トランジション */
  --nh-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --nh-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --nh-t-fast:       0.25s;
  --nh-t-base:       0.45s;
  --nh-t-slow:       0.65s;
}


/* ─────────────────────────────────────────────
   2. BASE HEADER LAYOUT
───────────────────────────────────────────── */
.nagasou-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nh-height);
  z-index: var(--nh-z);

  /* 初期状態: 半透明（ダークヒーロー上） */
  background: rgba(20, 28, 22, 0.15);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  /* 下部ゴールドライン（スクロール時に表示） */
  border-bottom: 1px solid rgba(201, 168, 76, 0);

  will-change: transform, background, height;
  transition:
    background    var(--nh-t-base) var(--nh-ease),
    height        var(--nh-t-base) var(--nh-ease),
    border-color  var(--nh-t-base) var(--nh-ease),
    box-shadow    var(--nh-t-base) var(--nh-ease),
    transform     var(--nh-t-base) var(--nh-ease),
    backdrop-filter var(--nh-t-slow) ease;
}

/* スクロール後 */
.nagasou-header.is-scrolled {
  height: var(--nh-height-sm);
  background: rgba(20, 28, 22, 0.95);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-color: rgba(201, 168, 76, 0.28);
  box-shadow:
    0 4px 32px rgba(20, 28, 22, 0.36),
    0 1px 0 rgba(201, 168, 76, 0.18) inset;
}

/* スクロールダウン時に隠す */
.nagasou-header.is-hidden {
  transform: translateY(-100%);
}

/* 明るいページ向けモード（body.nagasou-header-light で有効） */
.nagasou-header.is-light {
  background: rgba(250, 250, 247, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(201, 168, 76, 0.22);
  box-shadow: 0 2px 24px rgba(20, 28, 22, 0.08);
}


/* 内部レイアウト */
.nagasou-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  gap: 1rem;
}


/* ─────────────────────────────────────────────
   3. EMBLEM COMPONENT
   （ヘッダー・フッター・モバイルメニューで共用）
───────────────────────────────────────────── */
.nagasou-emblem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* デフォルトサイズ（ヘッダー用） */
  width: 44px;
  height: 44px;

  transition: transform var(--nh-t-base) var(--nh-ease-spring);
}

.nagasou-emblem:hover {
  transform: scale(1.06) rotate(5deg);
}

/* サイズバリアント */
.nagasou-emblem--header {
  width: 44px;
  height: 44px;
}

.nagasou-emblem--lg {
  width: 80px;
  height: 80px;
}

.nagasou-emblem--footer {
  width: 68px;
  height: 68px;
}

.nagasou-header.is-scrolled .nagasou-emblem--header {
  width: 38px;
  height: 38px;
  transition: width var(--nh-t-base) var(--nh-ease), height var(--nh-t-base) var(--nh-ease), transform var(--nh-t-base) var(--nh-ease-spring);
}

/* 外側グロー */
.nagasou-emblem__glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, transparent 70%);
  animation: emblemGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes emblemGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* ─── 外リング（SVG Stroke Draw） ─── */
.nagasou-emblem__ring-outer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/*
 * stroke-dasharray の計算根拠：
 * viewBox座標系での円周 = 2π × r = 2 × 3.14159 × 21.25 ≈ 133.5
 * stroke-dashoffset: 133.5 → 全非表示
 * stroke-dashoffset: 0     → 全描画
 */
.nagasou-emblem__ring-path {
  stroke:           var(--nh-gold);
  stroke-width:     1.5px;
  fill:             none;
  stroke-dasharray: 133.5;
  stroke-dashoffset: 133.5;

  /* strokeDraw完了後にemblemRingPulseを開始 */
  animation:
    strokeDraw      1.0s  cubic-bezier(0.16, 1, 0.3, 1) 0.3s  forwards,
    emblemRingPulse 4.0s  ease-in-out                   1.35s infinite;

  transform-origin: center;
  transform-box:    fill-box;
}

@keyframes strokeDraw {
  to { stroke-dashoffset: 0; }
}

/* border-color → stroke-opacity に変更 */
@keyframes emblemRingPulse {
  0%, 100% { stroke-opacity: 1;   }
  50%       { stroke-opacity: 0.6; }
}

/* 内リング */
.nagasou-emblem__ring-inner {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 0.5px solid rgba(201, 168, 76, 0.35);
}

.nagasou-emblem--lg .nagasou-emblem__ring-inner {
  inset: 8px;
}

.nagasou-emblem--footer .nagasou-emblem__ring-inner {
  inset: 7px;
}

/* 塗りつぶし */
.nagasou-emblem__fill {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1E2C24 0%, #2A3B30 50%, #1A2420 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nagasou-emblem--lg .nagasou-emblem__fill {
  inset: 3px;
}

/* 光沢レイヤー */
.nagasou-emblem__fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}

/* 漢字 */
.nagasou-emblem__kanji {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--nh-gold-light);
  letter-spacing: -0.01em;
  line-height: 1;
  user-select: none;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px rgba(201, 168, 76, 0.3);
}

.nagasou-emblem--lg .nagasou-emblem__kanji {
  font-size: 24px;
  letter-spacing: 0.02em;
}

.nagasou-emblem--footer .nagasou-emblem__kanji {
  font-size: 20px;
}

/* 装飾ダイヤモンド */
.nagasou-emblem__gem {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 4px;
  height: 4px;
  background: var(--nh-gold);
  opacity: 0.75;
}

.nagasou-emblem__gem--top    { top: -2px;    }
.nagasou-emblem__gem--bottom { bottom: -2px; }

.nagasou-emblem--lg .nagasou-emblem__gem {
  width: 6px;
  height: 6px;
}

.nagasou-emblem--lg .nagasou-emblem__gem--top    { top:    -3px; }
.nagasou-emblem--lg .nagasou-emblem__gem--bottom { bottom: -3px; }


/* ─────────────────────────────────────────────
   4. LOGO
───────────────────────────────────────────── */
.nagasou-header__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--nh-t-fast);
}

.nagasou-header__logo:hover {
  opacity: 0.88;
  text-decoration: none;
}

.nagasou-header__logo-text {
  display:       flex;
  flex-direction: column;
  gap:           1px;

  /*
   * Clip-path Text Reveal
   * inset(上 右 下 左)
   * 初期: 右端から100%クリップ → テキスト不可視
   * 終了: 右端クリップ0% → テキスト完全表示
   *
   * タイミング設計：
   * strokeDraw: delay 0.3s + duration 1.0s = 完了 1.3s
   * logoReveal: delay 0.65s + duration 0.75s = 完了 1.4s
   * → リングが半分描かれた頃にテキストが現れ始める自然な連携
   */
  clip-path: inset(0 100% 0 0);
  animation: logoReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

@keyframes logoReveal {
  to { clip-path: inset(0 0% 0 0); }
}

.nagasou-header__logo-sub {
  font-family: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--nh-gold-light);
  line-height: 1.2;
  opacity: 0.88;
  transition: color var(--nh-t-base);
}

.nagasou-header.is-light .nagasou-header__logo-sub {
  color: var(--nh-gold-deep);
}

.nagasou-header__logo-main {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--nh-white);
  line-height: 1.2;
  transition:
    color     var(--nh-t-base),
    font-size var(--nh-t-base) var(--nh-ease);
}

/* ロゴ振り仮名スタイル */
.nagasou-header__logo-main rt {
  font-size: 0.55em;     /* ふりがな文字サイズ */
  font-weight: 300;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.nagasou-header.is-light .nagasou-header__logo-main {
  color: var(--nh-ink);
}

.nagasou-header.is-scrolled .nagasou-header__logo-main {
  font-size: 17px;
}

/* ─────────────────────────────────────────────
   5. DESKTOP NAVIGATION
───────────────────────────────────────────── */
.nagasou-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Cocoon が ul に margin/padding を付ける場合のリセット */
.nagasou-header__nav-list,
.nagasou-header__nav .menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.nagasou-header__nav-list li,
.nagasou-header__nav .menu > li {
  position: relative;
}

.nagasou-header__nav-list a,
.nagasou-header__nav .menu > li > a {
  display: flex;
  align-items: center;
  padding: 0.35rem 1.05rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.87);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--nh-t-fast);
}

/* ゴールドアンダーライン */
.nagasou-header__nav-list a > span,
.nagasou-header__nav .menu > li > a > span {
  position: relative;
}

/* ─── SVG Underline Path Draw ─── */

/* span の position: relative は不要になるが既存のまま無害のため温存 */

/* JS injection される SVG 本体 */
.nagasou-nav-underline {
  position:       absolute;
  bottom:         -3px;
  left:           0;
  width:          100%;
  height:         3px;     /* タップ領域を考慮した高さ */
  overflow:       visible;
  pointer-events: none;
}

/*
 * viewBox="0 0 100 2" のライン全長 = 100 user units
 * preserveAspectRatio="none" によりリンク幅に合わせてストレッチ
 * stroke-dasharray: 100  → 全長1本のダッシュ
 * stroke-dashoffset: 100 → 右端まで押し出されて不可視
 * stroke-dashoffset: 0   → 左端から右端まで描画完了
 */
.nagasou-nav-underline__path {
  stroke:            var(--nh-gold);
  stroke-width:      1px;
  fill:              none;
  stroke-dasharray:  100;
  stroke-dashoffset: 100;

  /* Enter: 左から右へ描かれる */
  transition:
    stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    stroke-opacity    0.3s ease;
}

/* ─── Hover / Active / Current: 描画 ─── */
.nagasou-header__nav-list a:hover            .nagasou-nav-underline__path,
.nagasou-header__nav-list a.is-active        .nagasou-nav-underline__path,
.nagasou-header__nav-list li.current-menu-item > a .nagasou-nav-underline__path,
.nagasou-header__nav .menu > li > a:hover    .nagasou-nav-underline__path,
.nagasou-header__nav .menu > li.current-menu-item > a .nagasou-nav-underline__path {
  stroke-dashoffset: 0;
}

/* ─── Hover Exit: 右から左へ消える（描画と逆方向） ─── */
.nagasou-header__nav-list a:not(:hover):not(.is-active)
  .nagasou-nav-underline__path,
.nagasou-header__nav .menu > li:not(:hover) > a:not(:hover)
  .nagasou-nav-underline__path {
  stroke-dashoffset: -100;    /* 右端に抜けて消える */
  transition:
    stroke-dashoffset 0.38s cubic-bezier(0.4, 0, 1, 1),
    stroke-opacity    0.3s ease;
}

/* ─── is-light モード（明るいページ） ─── */
.nagasou-header.is-light .nagasou-nav-underline__path {
  stroke: var(--nh-gold-deep);
}

.nagasou-header__nav-list a:hover,
.nagasou-header__nav-list li.current-menu-item > a,
.nagasou-header__nav-list a.is-active,
.nagasou-header__nav .menu > li > a:hover,
.nagasou-header__nav .menu > li.current-menu-item > a {
  color: var(--nh-gold-light);
  text-decoration: none;
}

.nagasou-header.is-light .nagasou-header__nav-list a,
.nagasou-header.is-light .nagasou-header__nav .menu > li > a {
  color: var(--nh-ink-mid);
}

.nagasou-header.is-light .nagasou-header__nav-list a:hover,
.nagasou-header.is-light .nagasou-header__nav .menu > li > a:hover {
  color: var(--nh-gold-deep);
}

/* ドロップダウン（2階層メニュー対応） */
.nagasou-header__nav-list .sub-menu,
.nagasou-header__nav .menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  background: rgba(20, 28, 22, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity  0.25s,
    transform 0.25s var(--nh-ease),
    visibility 0s linear 0.25s;
  box-shadow: 0 12px 40px rgba(20, 28, 22, 0.4);
}

.nagasou-header__nav-list li:hover > .sub-menu,
.nagasou-header__nav .menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity  0.25s,
    transform 0.25s var(--nh-ease);
}

.nagasou-header__nav-list .sub-menu li a,
.nagasou-header__nav .menu .sub-menu li a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.06em;
}

.nagasou-header__nav-list .sub-menu li a:hover,
.nagasou-header__nav .menu .sub-menu li a:hover {
  color: var(--nh-gold-light);
  background: rgba(201, 168, 76, 0.07);
}


/* ─────────────────────────────────────────────
   6. CTA BUTTON
───────────────────────────────────────────── */
.nagasou-header__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.nagasou-header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.3rem 0.52rem 1rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #C9A84C 0%, #E8CF80 55%, #C9A84C 100%);
  background-size: 200% 100%;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--nh-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow:
    0 2px 16px rgba(201, 168, 76, 0.4),
    0 1px 0 rgba(255,255,255,0.2) inset;
  transition:
    transform     var(--nh-t-fast) var(--nh-ease-spring),
    box-shadow    var(--nh-t-fast),
    background-position var(--nh-t-base);
}

/* シマーエフェクト */
.nagasou-header__cta-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  animation: ctaShimmer 3.5s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0%   { left: -100%; opacity: 0.6; }
  40%  { left: 140%;  opacity: 0.9; }
  100% { left: 140%;  opacity: 0;   }
}

.nagasou-header__cta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--nh-t-fast) var(--nh-ease-spring);
}

.nagasou-header__cta-text {
  position: relative;
  z-index: 1;
}

.nagasou-header__cta:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 28px rgba(201, 168, 76, 0.55),
    0 1px 0 rgba(255,255,255,0.25) inset;
  background-position: 100% 0;
  text-decoration: none;
  color: var(--nh-ink);
}

.nagasou-header__cta:hover .nagasou-header__cta-icon {
  transform: translateX(1px);
}

.nagasou-header__cta:active {
  transform: translateY(-1px) scale(1.02);
}


/* ─────────────────────────────────────────────
   7. HAMBURGER BUTTON
───────────────────────────────────────────── */
.nagasou-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: calc(var(--nh-z-overlay) + 10);
  gap: 0;
}

.nagasou-hamburger__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--nh-white);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform  0.48s var(--nh-ease),
    opacity    0.28s ease,
    width      0.28s ease,
    background 0.3s;
  margin: 3.5px 0;
}

.nagasou-header.is-light .nagasou-hamburger__bar {
  background: var(--nh-ink);
}

/* モバイルメニューが開いている時はバーを白に固定 */
.nagasou-mobile-menu.is-open + * .nagasou-hamburger__bar,
.nagasou-hamburger.is-open .nagasou-hamburger__bar {
  background: var(--nh-white);
}

/* X字変形 */
.nagasou-hamburger.is-open .nagasou-hamburger__bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.nagasou-hamburger.is-open .nagasou-hamburger__bar:nth-child(2) {
  width: 0;
  opacity: 0;
  transform: scaleX(0);
}

.nagasou-hamburger.is-open .nagasou-hamburger__bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}


/* ─────────────────────────────────────────────
   8. MOBILE MENU OVERLAY
───────────────────────────────────────────── */
.nagasou-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--nh-z-overlay);
  background: var(--nh-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;

  /* 初期状態: 非表示 */
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0% at calc(100% - 50px) 50px);
  transition:
    opacity    0.55s var(--nh-ease),
    clip-path  0.6s  var(--nh-ease),
    visibility 0s    linear 0.6s;
}

.nagasou-mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  clip-path: circle(150% at calc(100% - 50px) 50px);
  transition:
    opacity    0.55s var(--nh-ease),
    clip-path  0.6s  var(--nh-ease),
    visibility 0s    linear 0s;
}

/* 大気効果サークル */
.nagasou-mobile-menu__atmosphere { position: absolute; inset: 0; pointer-events: none; }

.nagasou-mobile-menu__atm-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.07;
  filter: blur(60px);
}

.nagasou-mobile-menu__atm-circle--1 {
  width: 600px; height: 600px;
  top: -150px; left: -150px;
  background: radial-gradient(circle, var(--nh-sky) 0%, transparent 70%);
  animation: atmFloat1 15s ease-in-out infinite;
}

.nagasou-mobile-menu__atm-circle--2 {
  width: 500px; height: 500px;
  bottom: -100px; right: -100px;
  background: radial-gradient(circle, var(--nh-gold) 0%, transparent 70%);
  animation: atmFloat2 18s ease-in-out infinite;
}

.nagasou-mobile-menu__atm-circle--3 {
  width: 400px; height: 400px;
  top: 40%; left: 30%;
  background: radial-gradient(circle, var(--nh-olive) 0%, transparent 70%);
  animation: atmFloat1 12s ease-in-out infinite reverse;
}

@keyframes atmFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(30px, -20px); }
}
@keyframes atmFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-25px, 20px); }
}

/* グレインテクスチャ */
.nagasou-mobile-menu__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)' opacity='0.055'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.5;
  pointer-events: none;
}

/* 内部コンテンツ */
.nagasou-mobile-menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: clamp(5rem, 14vh, 7rem) 2rem clamp(3rem, 8vh, 4rem);
}

/* ブランドエリア */
.nagasou-mobile-menu__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.4rem;

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.5s 0.12s,
    transform 0.5s 0.12s var(--nh-ease);
}

.nagasou-mobile-menu.is-open .nagasou-mobile-menu__brand {
  opacity: 1;
  transform: translateY(0);
}

.nagasou-mobile-menu__brand-name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--nh-white);
  margin-top: 0.8rem;
}

.nagasou-mobile-menu__brand-tagline {
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

/* オーナメント区切り線 */
.nagasou-mobile-menu__ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
  margin-bottom: 2rem;

  opacity: 0;
  transition: opacity 0.4s 0.25s;
}

.nagasou-mobile-menu.is-open .nagasou-mobile-menu__ornament {
  opacity: 1;
}

.nagasou-mobile-menu__ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35));
}

.nagasou-mobile-menu__ornament-line + .nagasou-mobile-menu__ornament-line {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.35), transparent);
}

.nagasou-mobile-menu__ornament-gem {
  width: 5px;
  height: 5px;
  background: var(--nh-gold);
  transform: rotate(45deg);
  opacity: 0.7;
  flex-shrink: 0;
}

/* モバイルナビリスト */
.nagasou-mobile-menu__nav {
  width: 100%;
  max-width: 360px;
}

.nagasou-mobile-menu__nav-list,
.nagasou-mobile-menu__nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nagasou-mobile-menu__nav-list li,
.nagasou-mobile-menu__nav .menu > li {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity    0.45s var(--nh-ease),
    transform  0.45s var(--nh-ease);
}

/* 各項目のstagger */
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(1),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(1) { opacity:1; transform:translateX(0); transition-delay: 0.18s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(2),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(2) { opacity:1; transform:translateX(0); transition-delay: 0.23s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(3),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(3) { opacity:1; transform:translateX(0); transition-delay: 0.28s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(4),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(4) { opacity:1; transform:translateX(0); transition-delay: 0.33s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(5),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(5) { opacity:1; transform:translateX(0); transition-delay: 0.38s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(6),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(6) { opacity:1; transform:translateX(0); transition-delay: 0.43s; }
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav-list li:nth-child(7),
.nagasou-mobile-menu.is-open .nagasou-mobile-menu__nav .menu > li:nth-child(7) { opacity:1; transform:translateX(0); transition-delay: 0.48s; }

.nagasou-mobile-menu__nav-list a,
.nagasou-mobile-menu__nav .menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  transition:
    color        0.25s,
    padding-left 0.25s var(--nh-ease),
    border-color 0.25s;
}

.nagasou-mobile-menu__nav-list a::after,
.nagasou-mobile-menu__nav .menu > li > a::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--nh-gold);
  opacity: 0.55;
  flex-shrink: 0;
  transition: width 0.25s var(--nh-ease), opacity 0.25s;
}

.nagasou-mobile-menu__nav-list a:hover,
.nagasou-mobile-menu__nav .menu > li > a:hover {
  color: var(--nh-gold-light);
  padding-left: 0.75rem;
  border-color: rgba(201, 168, 76, 0.25);
  text-decoration: none;
}

.nagasou-mobile-menu__nav-list a:hover::after,
.nagasou-mobile-menu__nav .menu > li > a:hover::after {
  width: 28px;
  opacity: 0.9;
}

/* モバイルCTA */
.nagasou-mobile-menu__cta-wrap {
  width: 100%;
  max-width: 360px;
  margin-top: 2.2rem;

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.45s 0.5s,
    transform 0.45s 0.5s var(--nh-ease);
}

.nagasou-mobile-menu.is-open .nagasou-mobile-menu__cta-wrap {
  opacity: 1;
  transform: translateY(0);
}

.nagasou-mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--nh-gold) 0%, var(--nh-gold-light) 100%);
  border-radius: 50px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--nh-ink);
  text-decoration: none;
  box-shadow: 0 4px 28px rgba(201, 168, 76, 0.45);
  transition:
    transform  0.3s var(--nh-ease-spring),
    box-shadow 0.3s;
}

.nagasou-mobile-menu__cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nagasou-mobile-menu__cta:hover {
  transform: scale(1.025);
  box-shadow: 0 8px 36px rgba(201, 168, 76, 0.6);
  text-decoration: none;
  color: var(--nh-ink);
}

/* 住所 */
.nagasou-mobile-menu__address {
  margin-top: 1.8rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  line-height: 1.9;
  font-style: normal;

  opacity: 0;
  transition: opacity 0.4s 0.6s;
}

.nagasou-mobile-menu.is-open .nagasou-mobile-menu__address {
  opacity: 1;
}

/* ─── モバイルメニュー 閉じる × ボタン ─── */
.nagasou-mobile-menu__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  width: 44px;   /* WCAG 2.1 タップ領域 44px 以上 */
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  gap: 0;

  /* オーバーレイと同タイミングで表示 */
  opacity: 0;
  transform: rotate(-45deg) scale(0.75);
  transition:
    opacity   0.4s 0.15s var(--nh-ease),
    transform 0.4s 0.15s var(--nh-ease-spring);
  z-index: 10;
}

.nagasou-mobile-menu.is-open .nagasou-mobile-menu__close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.nagasou-mobile-menu__close:hover {
  background: rgba(201,168,76,.2);
  border-color: rgba(201,168,76,.5);
}

.nagasou-mobile-menu__close:focus-visible {
  outline: 2px solid var(--nh-gold);
  outline-offset: 3px;
}

.nagasou-mobile-menu__close-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--nh-gold-light);
  border-radius: 2px;
  transform-origin: center;
}
.nagasou-mobile-menu__close-bar:nth-child(1) {
  transform: translateY(1.5px) rotate(45deg);
}
.nagasou-mobile-menu__close-bar:nth-child(2) {
  transform: translateY(-1.5px) rotate(-45deg);
}

/* ─────────────────────────────────────────────
   9. SCROLL PROGRESS BAR
───────────────────────────────────────────── */
.nagasou-header__progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    var(--nh-sky-deep) 0%,
    var(--nh-sky)      40%,
    var(--nh-gold)     70%,
    var(--nh-gold-light) 100%
  );
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.nagasou-header.is-scrolled .nagasou-header__progress {
  opacity: 1;
}


/* ─────────────────────────────────────────────
   10. BODY OFFSET / COCOON OVERRIDES
───────────────────────────────────────────── */

/* Cocoon の #header を非表示にし、永惣ヘッダーを前面に */
body.nagasou-site #header,
body.nagasou-site .site-header {
  display: none !important;
}

body.nagasou-site #footer,
body.nagasou-site .site-footer {
  display: none !important;
}

/* ヘッダー分のスペースを確保（固定ページ用） */
body.nagasou-site .site-content,
body.nagasou-site #main,
body.nagasou-site .wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cocoon のメインコンテンツ上部余白を上書き */
body.nagasou-site #content {
  padding-top: 0 !important;
}


/* ─────────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────────── */

/* タブレット以下: ナビを非表示、ハンバーガー表示 */
@media (max-width: 1024px) {
  .nagasou-header__nav {
    display: none;
  }

  .nagasou-hamburger {
    display: flex;
  }
}

/* スマートフォン: CTAボタンを非表示（モバイルメニュー内に移動） */
@media (max-width: 640px) {
  .nagasou-header__cta {
    display: none;
  }

  :root {
    --nh-height:    60px;
    --nh-height-sm: 52px;
  }

  .nagasou-mobile-menu__nav-list a,
  .nagasou-mobile-menu__nav .menu > li > a {
    font-size: 15px;
    padding: 0.9rem 0;
  }

  .nagasou-mobile-menu__brand-name {
    font-size: 15px;
  }
}

/* 極小画面 */
@media (max-width: 360px) {
  .nagasou-header__logo-text {
    display: none;
  }
}


/* ─────────────────────────────────────────────
   12. ACCESSIBILITY
───────────────────────────────────────────── */

/* フォーカスリング */
.nagasou-header__logo:focus-visible,
.nagasou-header__cta:focus-visible,
.nagasou-hamburger:focus-visible,
.nagasou-header__nav-list a:focus-visible,
.nagasou-mobile-menu__nav-list a:focus-visible,
.nagasou-mobile-menu__cta:focus-visible {
  outline: 2px solid var(--nh-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* モーション抑制 */
@media (prefers-reduced-motion: reduce) {

  .nagasou-emblem__glow,
  .nagasou-emblem__ring-path,
  .nagasou-mobile-menu__atm-circle--1,
  .nagasou-mobile-menu__atm-circle--2,
  .nagasou-mobile-menu__atm-circle--3,
  .nagasou-header__cta-shimmer {
    animation: none;
  }

  .nagasou-emblem__ring-path {
    stroke-dashoffset: 0;
  }

  .nagasou-mobile-menu__close,
  .nagasou-nav-underline__path {
    transition: none;
  }

  .nagasou-header__logo-text {
    animation: none;
    clip-path: none;
  }

  .nagasou-mobile-menu {
    clip-path: none;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
  }

  .nagasou-mobile-menu.is-open {
    transition: opacity 0.2s, visibility 0s;
  }

  html:focus-within {
    scroll-behavior: auto;
  }
}


/* ─────────────────────────────────────────────
   13. PRINT
───────────────────────────────────────────── */
@media print {
  .nagasou-header,
  .nagasou-mobile-menu {
    display: none !important;
  }
}