@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Footer Styles
   ファイル: footer.css
   役割: サイトフッター + フッターアニメーション (Phase 3-B)
   ---
   設計思想:
   ガイドラインのブルー(視覚60px)/グリーン(視覚H52)は「視覚的に等間隔」を目指す。
   各SVG・テキストの透明余白/leadingを補正してmargin/paddingに変換。
   ---
   フッターブランドの構成:
   - jomonow-set_4f.svg: JOMONÖW + Imagine the Why 一体 (453.46×214.63、下16px余白)
   - logo.svg: ロゴ (バトンタッチ用)
   ---
   アニメーション (Phase 3-B):
   - スクロール要素 (.opening__jomonow / .opening__logo-continuous) が
     フッター手前80pxから拡大、フッター到達でバトンタッチ
   - フッター内 brand-set は上からスライドイン
   - フッター内 logo はスクロール要素とバトンタッチ (同サイズ・同位置)
   ========================================================================== */

.site-footer {
  position: relative;
  width: 100%;
  /* v16.8: 画面サイズに応じてフッター全体が1画面に収まる設計。
     固定 960px → min-height: 100dvh (動的ビューポート対応)。
     どんなデバイス高さでも、ブランドセット〜コピーライトが
     画面に必ず収まり、ロゴがフッター上端 (= 画面下端から1画面分上)
     に到達できる。
     v44.7: dvh→svh。dvh はバー格納/表示で変動し、footer は通常フロー要素のため
     ページ総高がバー状態に連動 → Brave横向きで「バー格納→総高増→スクロール解釈変化→
     バー再表示→総高減→…」の発振ループ(ブルブル)の主燃料だった。
     svh=バー表示時の高さで固定・格納後も不変=総高が完全静的になる。 */
  min-height: 100vh;   /* svh未対応環境フォールバック */
  min-height: 100svh;
  background-color: var(--color-wine);
  color: var(--color-yellow);
  margin-top: var(--section-gap);
  padding-top: 60px;
  padding-bottom: 60px;
  box-sizing: border-box;
}

/* コンテンツ幅 1024px (区切り線・Contactアイコンの右端基準)
   v15.11: box-sizing を border-box に変更 (content-box だと
   max-width 1024 + padding 40 = 1064px がviewportを超え、
   margin-inline:auto が効かず左寄りになる問題があった)
   v16.8: 内部を縦に伸ばし、justify-content: center で
   コンテンツを画面中央に配置 (天地余白が画面サイズに応じて増減)。
   ブランドセット↔コピーライト の内部レイアウトは変えずそのまま中央寄せ。 */
.site-footer__inner {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: calc(100vh - 120px);   /* svh未対応環境フォールバック */
  min-height: calc(100svh - 120px);  /* v44.7: dvh→svh (発振遮断・上記コメント参照) */
  justify-content: center;
}

/* --------------------------------------------------------------------------
   1. ブランドセット (JOMONÖW + Imagine the Why + ロゴ をまとめたラッパー)
   ---
   フッター到達 (body.jomonow-in-footer) で
   scale 0.9 → 1.0 + opacity 0 → 1 で「ふわっと拡大しながらフェードイン」。
   上スクロールで離脱すると逆再生でフェードアウト。
   ---
   クリックすると scrollY=0 (OP-3) へ早送りスクロール (scroll.js)。
   -------------------------------------------------------------------------- */
.site-footer__brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  /* 初期: やや小さく + 非表示 */
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center top;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  cursor: pointer;
}

body.jomonow-in-footer .site-footer__brand-wrap {
  opacity: 1;
  transform: scale(1);
}

/* クリック時のフェードアウト (scroll.js が .is-leaving を付与) */
.site-footer__brand-wrap.is-leaving {
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.35s var(--ease-out);
}

/* ブランドセットSVG (JOMONÖW + Imagine the Why 一体)
   jomonow-set_4f.svg: viewBox 453.46×214.63、実描画 0〜198.6 (下16px透明余白) */
.site-footer__brand-set {
  width: 453.46px;
  height: auto;
  display: block;
  max-width: 100%;
  /* 視覚60px (セット↔ロゴ) - SVG下16px透明余白 = 44px */
  margin-bottom: 44px;
}

/* ロゴ (ブランドセットラッパー内、一緒に拡大) */
.site-footer__logo {
  /* v10.13: width/height は .site-footer__logo-stack で決まる
     stack 内で 100% 表示。margin-bottom は stack 側に移動 */
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   3. SNSアイコン (v12.2: SVGアイコン原寸)
   各SVGはそれぞれ異なるviewBoxサイズ。原寸 = viewBoxサイズで表示。
   -------------------------------------------------------------------------- */
.site-footer__sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 34px 0 34px;
}

.site-footer__sns li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.site-footer__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer__sns a:hover {
  opacity: 0.7;
}

.site-footer__sns img {
  display: block;
}

/* 4. 区切り線 (v12.2: W1024 → W800) */
.site-footer__divider {
  width: 800px;
  max-width: 100%;
  height: 1px;
  background-color: var(--color-yellow);
  opacity: 0.6;
  border: 0;
  margin: 0 auto;
  align-self: center;
}

/* 5. コピーライトテキスト
   視覚H52 (罫線↔見出し) - 見出し上leading9px = 43px (padding-top)
   視覚60px (詳細↔Jomonow.com) - 下leading6.75px = 53px (margin-bottom) */
.site-footer__copyright {
  font-family: var(--font-goudy);
  text-align: center;
  letter-spacing: var(--ls-display);  /* Goudy 共通の字間 */
  color: var(--color-yellow);
  padding-top: 96px;
  margin-top: -44px;
  margin-bottom: 53px;
}

.site-footer__copyright-title {
  font-size: 24px;
  line-height: 1.75;
  display: block;
  margin-bottom: 13px;
}

.site-footer__copyright-detail {
  font-size: 18px;
  line-height: 1.75;
  display: block;
}

/* --------------------------------------------------------------------------
   ABOUT / CONTACT ナビ (v12.3 追加)
   ブランドセット直下に配置、その下に罫線、SNS。間隔は 96px。
   -------------------------------------------------------------------------- */
.site-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 44px 0 52px;
}

.site-footer__nav-link {
  font-family: var(--font-goudy);
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-yellow);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.site-footer__nav-link:hover {
  opacity: 0.7;
}

.site-footer__nav-sep {
  font-family: var(--font-goudy);
  font-size: 28px;
  line-height: 1;
  color: var(--color-yellow);
}

/* --------------------------------------------------------------------------
   フッター到達後のクリック領域について
   ---
   .site-footer__brand-wrap 自体が cursor:pointer のクリック領域。
   フッター未到達時 (opacity:0) はクリックを無効化。
   -------------------------------------------------------------------------- */
.site-footer__brand-wrap {
  pointer-events: none;
}

body.jomonow-in-footer .site-footer__brand-wrap {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-footer__sns a,
  .site-footer__nav-link,
  .site-footer__brand-wrap {
    transition: none;
  }
  .site-footer__brand-wrap {
    transform: none;
  }
  .site-footer__brand-wrap.is-leaving {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   フッターロゴ Lottie モーションコンテナ (v10.12)
   ---
   .site-footer__logo を .site-footer__logo-stack で囲み、
   その中で Lottie コンテナを absolute 配置で確実に重ねる。
   JS の getBoundingClientRect 計算による位置ズレを回避。
   ---
   ホバーでモーション再生、完了でフェードアウト。
   .is-leaving のフェードと一緒に消えるのは自然な挙動 (クリック後はロゴ全体が消える)。
   ---
   サイズ: フッターロゴ 76px に対して Lottie 有効図像 740/1000 = 74%
          → コンテナサイズ = 76 / 0.74 ≈ 103px (CSS で固定)
          → SVG ロゴ中心 = Lottie コンテナ中心 になるよう配置
   -------------------------------------------------------------------------- */
.site-footer__logo-stack {
  position: relative;
  /* SVG ロゴ (.site-footer__logo) と同サイズ枠で、その上に Lottie を重ねる */
  width: 76px;
  height: 76px;
  /* 視覚60px (ロゴ↔SNS実描画) - SNS上leading9px = 51px */
  margin-bottom: 51px;
}

.site-footer__logo-motion {
  position: absolute;
  /* v10.14: Lottie 図像 (中央 740/1000) が SVG ロゴ (76px) と同サイズに
     なるよう、コンテナを 76 × 1000/740 ≈ 102.7px に。
     stack (76×76) の中心とコンテナ中心を合わせるため、
     stack より (102.7-76)/2 = 13.35px ずつはみ出す配置にする。
     transform を使わずに top/left のマイナス値で確実に中央配置。 */
  top: -13.35px;
  left: -13.35px;
  width: 102.7px;
  height: 102.7px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.site-footer__logo-motion.is-active {
  opacity: 1;
}

/* ==========================================================================
   Footer レスポンシブ改行制御
   ---
   PC      (W ≥ 701)  : 改行なし (自然折り返し)
   タブレット (482-700) : br-tab + br-tab-sp 有効
   SP      (W ≤ 481)  : br-sp + br-tab-sp 有効
   ---
   br-tab    : タブレットのみ (reproduction, 後)
   br-tab-sp : タブレット+SP共通 (iiYÖU INC. 後)
   br-sp     : SPのみ (YöuGu™ 後、artworks 後、adaptation, 後)
   ========================================================================== */
.br-tab,
.br-tab-sp,
.br-sp {
  display: none;
}

/* タブレット帯: 481px超〜700px以下 */
@media (max-width: 700px) and (min-width: 482px) {
  .br-tab,
  .br-tab-sp {
    display: inline;
  }
}

/* ==========================================================================
   SP (≤481px) — Footer
   ---
   余白 (CD実数指示):
     Box上端 ↔ JOMONÖW上端   = 42px (site-footer padding-top)
     ロゴ ↔ ABOUT/CONTACT   = 46px (logo-stack margin-bottom)
     ABOUT/CONTACT ↔ 罫線①  = 36px (nav margin-bottom)
     罫線① ↔ SNS ↔ 罫線②   = 96px (SNS外枠 = 罫線間距離)
     罫線② ↔ Copyright    = 36px (copyright padding-top)
     Copyright末尾 ↔ Box下端 = 46px (site-footer padding-bottom)
   ========================================================================== */
@media (max-width: 481px) {
  .br-sp,
  .br-tab-sp {
    display: inline;
  }

  /* SP は v16.8 で .site-footer の min-height: 100dvh + 内部 space-between
     で自動的に画面いっぱいに収まるため、固定サイズ・aspect-ratio は不要。
     SVG/フォント等のサイズのみ縮める。 */

  .site-footer__brand-wrap {
    margin-top: 0;
  }

  /* ブランドセット (JOMONÖW + Imagine the Why) W225.7408px */
  .site-footer__brand-set {
    width: 225.7408px;
    margin-bottom: 26px;
  }

  .site-footer__logo-stack {
    width: 48px;
    height: 48px;
    /* ロゴ ↔ ABOUT/CONTACT = 46px */
    margin-bottom: 46px;
  }

  /* Lottieコンテナ: 48 × 1000/740 ≒ 64.86px、stack中心と一致 */
  .site-footer__logo-motion {
    width: 64.86px;
    height: 64.86px;
    top: calc((48px - 64.86px) / 2);
    left: calc((48px - 64.86px) / 2);
  }

  /* ABOUT / CONTACT: 21px、下に36pxアキ */
  .site-footer__nav {
    margin: 0 0 36px;
  }
  .site-footer__nav-link,
  .site-footer__nav-sep {
    font-size: 21px;
  }

  /* 罫線: W340 × 1px */
  .site-footer__divider {
    width: 340px;
  }

  /* SNS: 罫線間距離が96px。SNS高さ22pxなので上下 (96-22)/2 = 37px */
  .site-footer__sns {
    margin: 37px 0;
  }

  /* Copyright: 罫線② から36pxアキ。PC側の padding-top:96 / margin-top:-44 を上書き */
  .site-footer__copyright {
    padding-top: 36px;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Copyright タイトル: 17px / 行送り 29.75px (1.75) */
  .site-footer__copyright-title {
    font-size: 17px;
    line-height: 1.75;
  }

  /* Copyright 詳細: 14px / 行送り 24.5px (1.75) */
  .site-footer__copyright-detail {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* ============================================================
   v66.5 フッターSNSをアイコンからテキストへ（CD指示・Goudy 24px）
   note・Instagram とも、ブランドガイドラインがロゴの色変更を禁じている。
   本サイトはイエロー(#e1b41f)地の上で使うため、ロゴを載せると必ず改変になる。
   サービス名をテキストで表記すればその問題が消え、サイトの書体とも揃う。
   ============================================================ */
.site-footer__sns li { height: auto; }
.site-footer__sns-label {
  /* v67.11: Homeのフッターは継承色が白(#f7f6f6)。アイコン時代は SVG の色が固定だったため
     表に出なかったが、テキスト化で白く出てしまった。他のフッター要素と同じイエローに固定する。 */
  color: var(--color-yellow);
  font-family: var(--font-goudy);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  display: block;
}
@media (max-width: 767px) {
  .site-footer__sns-label { font-size: 20px; }
  .site-footer__sns { gap: 22px; }
}

/* v66.5: SNSがテキストになり、当たり判定が字面の高さ(約24px)しかなくなった。
   見た目を変えずに当たり判定だけ広げる（padding で広げ、同値の負マージンで打ち消す）。
   PC 44px / SP 44px を確保（タップ目標の推奨サイズ）。 */
.site-footer__sns a {
  padding: 10px 12px;
  margin: -10px -12px;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .site-footer__sns a { padding: 12px 12px; margin: -12px -12px; }
  /* v66.5: SPは項目間22pxに対し左右padding12pxで当たり判定が2px重なっていた。
     30pxに広げて隣接判定を6px離す（誤タップ防止）。見た目の字間も少し開く。 */
  .site-footer__sns { gap: 30px; }
}