/* =================================================================
   legal.css — privacy / disclaimer 共通
   ----------------------------------------------------------------
   concept-content-panel と完全同等の構造を採用。
   panel--footer は慣性 inner の外にあるため、 本文末端到達時に
   footer 背景がチラつかない (concept ページと同じ仕組み)。
   ================================================================= */

/* ---------- content panel: concept-content-panel と 1:1 ---------- */
.legal-content-panel { overflow: hidden; }
.legal-content-panel::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 46, 56, .28);
  backdrop-filter: blur(2px); opacity: 1; z-index: -1;
}
.legal-content-panel .panel__inner,
.legal-content-panel__inner {
  width: 100% !important; max-width: 100% !important; min-height: 100vh;
  display: flex; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important;
}

.legal-content__viewport {
  width: 100%; height: 100vh; overflow: hidden; position: relative;
}

.legal-content__inner {
  width: 100%; padding: 100px 148px 60px 148px; box-sizing: border-box; will-change: transform;
}

/* ---------- header (タイトル + lead) ---------- */
.legal-content__header {
  width: min(100%, 900px); margin: 0 auto 80px;
  opacity: 0; visibility: hidden;
  text-align: center;
}
body.is-legal-intro-ready .legal-content__header {
  opacity: 1; visibility: visible;
}
.legal-content__title {
  margin: 0;
  color: var(--title-color);
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.055em;
}
.legal-content__lead {
  margin: 18px 0 0;
  color: rgba(208, 216, 226, 0.78);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0;
}

/* ---------- 章ブロック (legalSection) ---------- */
.legalSection {
  width: min(100%, 900px); margin: 0 auto 56px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.legalSection.is-visible { opacity: 1; transform: translateY(0); }

.legalSection__title {
  margin: 0 0 18px;
  color: rgba(214, 224, 234, 0.92);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.legalSection__body {
  margin: 0;
  color: rgba(208, 216, 226, 0.72);
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.legalSection__list {
  margin: 14px 0 0; padding: 0 0 0 1.2em; list-style: disc;
  color: rgba(208, 216, 226, 0.72);
  font-size: 14px; line-height: 2.0; letter-spacing: 0.02em;
}
.legalSection__list li { margin: 0; }
.legalSection__list li::marker { color: rgba(142, 152, 163, 0.55); }

/* dl 形式 (運営事業者) */
.legalInfo {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 12px; row-gap: 10px; align-items: center;
}
.legalInfo dt {
  margin: 0;
  color: rgba(214, 224, 234, 0.50);
  font-size: 11px; letter-spacing: 0.14em; line-height: 1.7; font-weight: 400;
}
.legalInfo dd {
  margin: 0;
  color: rgba(208, 216, 226, 0.78);
  font-size: 13px; line-height: 1.7;
}

/* ---------- SP ---------- */
@media (max-width: 768px) {
  .legal-content__inner { padding: 100px 24px 60px 24px; }
  .legal-content__header { width: 100%; margin-bottom: 56px; }
  .legal-content__title  { font-size: clamp(34px, 9vw, 56px); line-height: 0.96; }
  .legal-content__lead   { font-size: clamp(17px, 4.8vw, 20px); margin-top: 14px; }

  .legalSection         { width: 100%; margin-bottom: 44px; }
  .legalSection__title  { font-size: 15px; margin-bottom: 14px; }
  .legalSection__body   { font-size: 13.5px; line-height: 1.9; }
  .legalSection__list   { font-size: 13.5px; line-height: 1.95; }

  .legalInfo            { column-gap: 10px; row-gap: 8px; }
  .legalInfo dt         { font-size: 10px; }
  .legalInfo dd         { font-size: 12.5px; }
}
/* =================================================================
   legal 専用 footer 慣性スクロール (legal-page スコープ)
   ----------------------------------------------------------------
   info-footer.js / footer.css / site-chrome.js を一切触らず、
   legal.js 側で .footerPanel の中身を以下のように再ラップする:
     .footerPanel
       .footerPanel__viewport   ← 100vh で clip
         .footerPanel__inner    ← transform で慣性駆動
           .footerPanel__head   (元から)
           .siteFooterBlock     (元から)
       .footerPanel__copy       (viewport の外、 fixed)
       .footerPanel__sns        (viewport の外、 fixed)
   既存の他ページ (TOP / concept / structure / plate / membership) は
   再ラップしないので、 このセレクタは body.legal-page 配下のみ適用される。
================================================================= */
body.legal-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.legal-page .footerPanel__inner {
  width: 100%;
  will-change: transform;
  /* 親 .panel__inner--footer 側で左右 padding 148px を持つので、 ここでは
     上下 padding のみ。 (元: padding: 100px 148px 80px 148px、 二重 padding 解消) */
  padding: 100px 0 80px 0;
  box-sizing: border-box;
}

/* SP: 既存 footer.css の親 padding (.panel__inner--footer の padding 120px 20px 0
   と .footerPanel の padding 0 0 72px) を legal-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.legal-page .panel__inner--footer {
    padding: 0;
  }
  body.legal-page .footerPanel {
    padding: 0;
  }
  body.legal-page .footerPanel__inner {
    padding: 100px 24px 80px 24px;
  }
  /* SP のサブリンク (プライバシーポリシー / 免責事項) の上下区切り線を
     footer.css のデフォルト (rgba 208,216,226,0.14) から、 暗いグレー寄りで
     さらに控えめな色 (rgba 142,152,163,0.12) に上書き。 footer.css に勝つため
     body.legal-page #legal-footer で specificity を上げて指定。 */
  body.legal-page #legal-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.legal-page #legal-footer .siteFooterBlock__subLink {
    border-bottom-color: rgba(142, 152, 163, 0.12);
  }
}

/* ── Info footer (中央寄せ) ───────────────────────────────────────
   タイトル / リードは中央寄せ、 リードと siteFooterBlock の内部テキストは
   max-width を保ちながら margin auto で中央配置 (改行時は左寄せ段落として見える) */
/* footer.css の `.panel__inner--footer { display: flex; align-items: center }` を
   block に解除する。 flex のままだと .footerPanel (flex 子) の幅が中身依存に縮み、
   inner 全体が画面の左寄りに固定される (= 中央寄せルールが効かなく見える) ため。
   慣性 transform 構造では .footerPanel__viewport が height: 100vh なので、
   親の垂直中央配置 (align-items: center) は不要になっている。
   panel.css の .panel__inner は左 148px / 右 28px の非対称 padding (左固定ロゴ
   との干渉回避目的)。 footer ではタイトル / リード / info を画面中央に置きたいので
   左右対称になるよう右 padding を 148px に揃える。 */
@media (min-width: 769px) {
  body.legal-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.legal-page #legal-footer .footerPanel__head {
  text-align: center;
}
body.legal-page #legal-footer .footerPanel__head .panel__title,
body.legal-page #legal-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.legal-page #legal-footer .footerPanel__head .textMotion,
body.legal-page #legal-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.legal-page #legal-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.legal-page #legal-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.legal-page #legal-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.legal-page #legal-footer .siteFooterBlock__info {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* サブリンク (プライバシーポリシー / 免責事項) も中身の自然幅で中央配置。
   PC 用の padding-left: 76px (footer.css、 label との揃え目的) は中央配置に
   不要なので 0 に上書き。 */
@media (min-width: 769px) {
  body.legal-page #legal-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}