/* =============================================
   NAGASOU FOOTER — 共通フッター CSS
   株式会社永惣 / Kabushiki Kaisha Nagasou
   Version: 1.0.0

   ─── TABLE OF CONTENTS ───
   1. BASE FOOTER
   2. ATMOSPHERE & GRAIN
   3. TOP ORNAMENT LINE
   4. INNER LAYOUT
   5. BRAND AREA
   6. NAVIGATION
   7. BACK TO TOP BUTTON
   8. ORNAMENT DIVIDER
   9. BOTTOM BAR / COPYRIGHT
   10. BOTTOM ACCENT LINE
   11. RESPONSIVE
   12. ACCESSIBILITY
   13. PRINT
============================================= */

/* ─── CSS Variables は nagasou-header.css の :root を継承 ─── */
/* ヘッダーCSSと同一ファイルを読み込む構成の場合は重複を避けてください */


/* ─────────────────────────────────────────────
   1. BASE FOOTER
───────────────────────────────────────────── */
.nagasou-footer {
  position: relative;
  background: var(--nh-ink, #1E2420);
  color: var(--nh-white, #FFFFFF);
  overflow: hidden;
  padding-top: 1px; /* グレイン等が上端に被らないよう */
}


/* ─────────────────────────────────────────────
   2. ATMOSPHERE & GRAIN
───────────────────────────────────────────── */
.nagasou-footer__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nagasou-footer__atm-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.nagasou-footer__atm-circle--1 {
  width: 700px; height: 700px;
  top: -250px; right: -200px;
  background: radial-gradient(circle, rgba(90, 175, 224, 0.06) 0%, transparent 70%);
  animation: footerAtm1 20s ease-in-out infinite;
}

.nagasou-footer__atm-circle--2 {
  width: 500px; height: 500px;
  bottom: -100px; left: -150px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 70%);
  animation: footerAtm2 16s ease-in-out infinite;
}

.nagasou-footer__atm-circle--3 {
  width: 400px; height: 400px;
  top: 30%; left: 40%;
  background: radial-gradient(circle, rgba(139, 171, 110, 0.05) 0%, transparent 70%);
  animation: footerAtm1 24s ease-in-out infinite reverse;
}

@keyframes footerAtm1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(20px, -15px); }
}
@keyframes footerAtm2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-18px, 12px); }
}

.nagasou-footer__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.45;
  pointer-events: none;
}


/* ─────────────────────────────────────────────
   3. TOP ORNAMENT LINE
───────────────────────────────────────────── */
.nagasou-footer__topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 3.5rem;
  padding-bottom: 0;
  margin-bottom: -0.5rem;
}

.nagasou-footer__topline-line {
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35));
  display: block;
}

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

/* 最後の line は右向きグラデーション */
.nagasou-footer__topline-line:last-child {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.35), transparent);
}

.nagasou-footer__topline-gem {
  width: 4px;
  height: 4px;
  background: rgba(201, 168, 76, 0.55);
  transform: rotate(45deg);
  display: block;
  flex-shrink: 0;
}

.nagasou-footer__topline-gem--lg {
  width: 6px;
  height: 6px;
  background: var(--nh-gold, #C9A84C);
  opacity: 0.8;
}


/* ─────────────────────────────────────────────
   4. INNER LAYOUT
───────────────────────────────────────────── */
.nagasou-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 3.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand nav";
  gap: 3rem;
	align-items: start;
}


/* ─────────────────────────────────────────────
   5. BRAND AREA
───────────────────────────────────────────── */
.nagasou-footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.nagasou-footer__brand-sub {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--nh-gold-light, #E8CF80);
  opacity: 0.8;
  line-height: 1.3;
  margin-bottom: 3px;  /* ← この1行を追加 */
}

.nagasou-footer__brand-sub {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--nh-gold-light, #E8CF80);
  opacity: 0.8;
  line-height: 1.3;
}

/* PCのみ：「ながそう」を右へ移動 */
@media (min-width: 769px) {
  .nagasou-footer__brand-sub {
    margin-left: 103px;
  }
}

.nagasou-footer__brand-name {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.18em;
  color: var(--nh-white, #FFFFFF);
  line-height: 1.3;
}

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

.nagasou-footer__address {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.9;
  margin-top: 0.2rem;
}

.nagasou-footer__tel {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--nh-gold-light, #E8CF80);
  text-decoration: none;
  transition: color 0.25s, opacity 0.25s;
}

.nagasou-footer__tel:hover {
  color: var(--nh-gold, #C9A84C);
  opacity: 0.9;
  text-decoration: none;
}


/* =========================================
   FOOTER BRAND LINK
========================================= */
.nagasou-footer__brand-link {
  display: flex;
  align-items: center;
  gap: inherit;

  color: inherit;
  text-decoration: none;
}

.nagasou-footer__brand-link:hover {
  text-decoration: none;
}

.nagasou-footer__brand-link:focus-visible {
  outline: 1px solid rgba(255,255,255,0.4);
  outline-offset: 6px;
}


/* ─────────────────────────────────────────────
   6. NAVIGATION
───────────────────────────────────────────── */
.nagasou-footer__nav {
  grid-area: nav;
}

.nagasou-footer__nav-groups {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.nagasou-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nagasou-footer__nav-group-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--nh-gold, #C9A84C);
  opacity: 0.75;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

/* Cocoon が生成する .menu クラスへの対応 */
.nagasou-footer__nav-list,
.nagasou-footer__nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nagasou-footer__nav-list li,
.nagasou-footer__nav .menu > li {
  border-bottom: none;
  padding: 0;
  margin: 0;
}

.nagasou-footer__nav-list a,
.nagasou-footer__nav .menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition:
    color        0.25s,
    gap          0.25s var(--nh-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    padding-left 0.25s var(--nh-ease, cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
  white-space: nowrap;
}

.nagasou-footer__nav-list a::before,
.nagasou-footer__nav .menu > li > a::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--nh-gold, #C9A84C);
  opacity: 0;
  flex-shrink: 0;
  transition:
    opacity 0.25s,
    width   0.25s var(--nh-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.nagasou-footer__nav-list a:hover,
.nagasou-footer__nav .menu > li > a:hover {
  color: var(--nh-gold-light, #E8CF80);
  padding-left: 0.4rem;
  text-decoration: none;
}

.nagasou-footer__nav-list a:hover::before,
.nagasou-footer__nav .menu > li > a:hover::before {
  opacity: 0.7;
}

/* WordPressメニューを使用する場合（グループなしフラットリスト） */
.nagasou-footer__nav > ul.nagasou-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 3rem;
  align-items: start;
}

/* ─────────────────────────────────────────────
   7. ORNAMENT DIVIDER
───────────────────────────────────────────── */
.nagasou-footer__divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.nagasou-footer__divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.2));
  display: block;
}

.nagasou-footer__divider-line + .nagasou-footer__divider-ornament + .nagasou-footer__divider-line {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.2), transparent);
}

.nagasou-footer__divider-ornament {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 1rem;
  flex-shrink: 0;
}

.nagasou-footer__divider-gem {
  display: block;
  background: rgba(201, 168, 76, 0.45);
  transform: rotate(45deg);
}

.nagasou-footer__divider-gem--left,
.nagasou-footer__divider-gem--right {
  width: 4px; height: 4px;
}

.nagasou-footer__divider-gem--center {
  width: 6px; height: 6px;
  background: var(--nh-gold, #C9A84C);
  opacity: 0.75;
}


/* ─────────────────────────────────────────────
   8. BOTTOM BAR / COPYRIGHT
───────────────────────────────────────────── */
.nagasou-footer__bottom {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.nagasou-footer__copy {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1.5;
  text-align: center;
}

.nagasou-footer__copy small {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: inherit;
}

.nagasou-footer__copy-symbol {
  font-size: 11px;
  opacity: 0.8;
}

.nagasou-footer__copy-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: rgba(201, 168, 76, 0.5);
  font-weight: 300;
  letter-spacing: 0.1em;
}

.nagasou-footer__note {
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  line-height: 1.9;
  max-width: 600px;
}

.nagasou-footer__note small {
  font-size: inherit;
}


/* ─────────────────────────────────────────────
   9. BOTTOM ACCENT LINE
───────────────────────────────────────────── */
.nagasou-footer__bottomline {
  position: relative;
  z-index: 1;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--nh-sky-deep, #2A7CAD) 0%,
    var(--nh-sky, #5AAFE0)      25%,
    var(--nh-gold, #C9A84C)     55%,
    var(--nh-gold-light, #E8CF80) 70%,
    var(--nh-olive, #8BAB6E)    90%,
    transparent                  100%
  );
  opacity: 0.7;
}


/* ─────────────────────────────────────────────
   10. RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nagasou-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav";
	gap: 2rem;
  }

  .nagasou-footer__nav-groups {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .nagasou-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .nagasou-footer__brand {
    align-items: center;
    text-align: center;
  }

  .nagasou-footer__address {
    text-align: center;
  }

  .nagasou-footer__nav {
    display: flex;
    justify-content: center;
  }

  .nagasou-footer__nav-groups {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
  }

  .nagasou-footer__nav-group {
    align-items: center;
  }

  .nagasou-footer__nav > ul.nagasou-footer__nav-list {
    grid-template-columns: repeat(2, auto);
    gap: 0 2rem;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nagasou-footer__inner {
    padding-top: 2.5rem;
  }

  .nagasou-footer__nav-groups {
    gap: 1.5rem;
  }

  .nagasou-footer__nav > ul.nagasou-footer__nav-list {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .nagasou-footer__nav-list a,
  .nagasou-footer__nav .menu > li > a {
    justify-content: center;
  }

  .nagasou-footer__copy {
    font-size: 11px;
  }

  .nagasou-footer__copy small {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* kuruma_agemasu7: スティッキーCTAがある場合の位置補正 */
body.page-template-kuruma-agemasu7 .nagasou-page-top,
body.page-template-template-ka7 .nagasou-page-top {
  bottom: calc(60px + 1rem); /* CTAバー高さ + 余白 */
}

/* ─────────────────────────────────────────────
   11. ACCESSIBILITY
───────────────────────────────────────────── */
.nagasou-footer__nav-list a:focus-visible,
.nagasou-footer__nav .menu > li > a:focus-visible,
.nagasou-footer__tel:focus-visible {
  outline: 2px solid var(--nh-gold, #C9A84C);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .nagasou-footer__atm-circle--1,
  .nagasou-footer__atm-circle--2,
  .nagasou-footer__atm-circle--3 {
    animation: none;
  }

}


/* ══════════════════════════════════════════════════════
   SHARED PAGE-TOP BUTTON
   ─ 全ページ共通の固定浮遊 Back to Top ボタン
   ─ フッターが viewport に入ると自動的に非表示 (JS連動)
══════════════════════════════════════════════════════ */

.nagasou-page-top {
  /* 配置 */
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;

  /* サイズ (WCAG 2.1 AA: 44px 以上のタップ領域) */
  width: 52px;
  height: 52px;
  border-radius: 50%;

  /* 外観: Nagasouブランドカラー × グラスモーフィズム */
  background: rgba(10, 14, 20, 0.80);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40),
              0 0 0 0 rgba(201, 168, 76, 0);

  /* レイアウト */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  cursor: pointer;
  color: var(--nh-gold-light, #E8CF80);

  /* 初期状態: 非表示 */
  opacity: 0;
  transform: translateY(16px) scale(0.88);
  pointer-events: none;
  visibility: hidden;

  /* トランジション */
  transition:
    opacity      0.40s ease,
    transform    0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility   0.40s,
    background   0.25s ease,
    border-color 0.25s ease,
    box-shadow   0.25s ease;
}

/* 表示状態 (JS が .is-visible を付与) */
.nagasou-page-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* ホバー: 上に浮くスプリング + ゴールドグロウ */
.nagasou-page-top:hover {
  transform: translateY(-5px) scale(1.07);
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.72);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35),
              0 0 0 4px rgba(201, 168, 76, 0.08);
}

/* アイコン */
.nagasou-page-top__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.nagasou-page-top__icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nagasou-page-top:hover .nagasou-page-top__icon svg {
  transform: translateY(-3px);
}

/* ラベル */
.nagasou-page-top__label {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: var(--nh-gold, #C9A84C);
  opacity: 0.78;
  line-height: 1;
  user-select: none;
}

/* ─── レスポンシブ ─────────────────────── */
@media (max-width: 767px) {
  .nagasou-page-top {
    /* スマホ: スティッキーCTAバーがある場合は上に逃がす */
    width:  44px;
    height: 44px;
    bottom: 1.25rem;
    right:  1.25rem;
  }

  .nagasou-page-top__icon svg {
    width:  15px;
    height: 15px;
  }

  .nagasou-page-top__label {
    font-size: 6.5px;
  }
}

/* ─── アクセシビリティ ─────────────────── */
.nagasou-page-top:focus-visible {
  outline: 2px solid var(--nh-gold, #C9A84C);
  outline-offset: 3px;
}

/* ─── アニメーション低減設定 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nagasou-page-top {
    transition: opacity 0.15s ease, visibility 0.15s, background 0.15s;
    transform: none !important;
  }

  .nagasou-page-top__icon svg {
    transition: none;
  }
}

/* ─── 印刷時は非表示 ─────────────────── */
@media print {
  .nagasou-page-top {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────
   12. PRINT
───────────────────────────────────────────── */
@media print {
  .nagasou-footer {
    background: white !important;
    color: black !important;
  }

  .nagasou-footer__atmosphere,
  .nagasou-footer__grain,
  .nagasou-footer__back-top-wrap,
  .nagasou-footer__bottomline {
    display: none !important;
  }

  .nagasou-footer__brand-name,
  .nagasou-footer__nav-list a {
    color: black !important;
  }

  .nagasou-footer__copy {
    color: #444 !important;
  }
}