/* =================================================================
   lower-page.css — 下層本文ページ汎用テンプレート (about / company / philosophy 等)
   ----------------------------------------------------------------
   concept-content-panel と完全同等の構造を採用。
   panel--footer は慣性 inner の外にあるため、 本文末端到達時に
   footer 背景がチラつかない (concept ページと同じ仕組み)。
   ================================================================= */

/* ---------- content panel: concept-content-panel と 1:1 ---------- */
.lower-content-panel { overflow: hidden; }
.lower-content-panel::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 46, 56, .28);
  backdrop-filter: blur(2px); opacity: 1; z-index: -1;
}
.lower-content-panel .panel__inner,
.lower-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;
}

.lowerContent__viewport {
  width: 100%; height: 100vh; overflow: hidden; position: relative;
}

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

/* ---------- header (タイトル + lead) ---------- */
.lowerContent__header {
  width: min(100%, 900px); margin: 0 auto 80px;
  opacity: 0; visibility: hidden;
  text-align: center;
}
body.is-lower-intro-ready .lowerContent__header {
  opacity: 1; visibility: visible;
}
.lowerContent__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;
}
.lowerContent__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;
}

/* ---------- 章ブロック (lowerSection) ---------- */
.lowerSection {
  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);
}
.lowerSection.is-visible { opacity: 1; transform: translateY(0); }

.lowerSection__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;
}
.lowerSection__body {
  margin: 0;
  color: rgba(208, 216, 226, 0.72);
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.lowerSection__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;
}
.lowerSection__list li { margin: 0; }
.lowerSection__list li::marker { color: rgba(142, 152, 163, 0.55); }

/* コンテンツトップ コピー (各下層ページのコピーと同等の体裁、 中央寄せ、 セリフ体)。
   structure-hero__copyLine 等の HERO コピーをベースに、 about の本文トーンに馴染むよう
   サイズを少しダウン (clamp(28px, 3.6vw, 48px))。 lowerSection--copy で margin / 余白を調整。 */
.lowerSection--copy {
  margin-bottom: 76px;
}
.lowerSection__copy {
  margin: 0;
  text-align: center;
  color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* ページリンク (例: about → membership / reservation の誘導)。
   テキスト + SVG ハープーン矢印、 hover で下から line が左→右に流れるアニメーション。
   静かな読み物トーンに合わせて控えめ、 default は文字色のみで装飾なし。 */
.lowerSection__pageLinkWrap {
  margin: 28px 0 0;
}
.lowerSection__pageLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--title-color);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
}
.lowerSection__pageLinkLabel {
  display: inline-block;
}
/* 細い SVG 矢印 (ハープーン)。 currentColor で文字色 (hover 含む) に追従。 */
.lowerSection__pageLinkArrow {
  display: inline-block;
  flex-shrink: 0;
  color: inherit;
  /* 視覚的中心をテキストの x-height 中央に合わせる微調整 */
  transform: translateY(0.5px);
}
.lowerSection__pageLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  /* アンダーライン色はテキストと同系の薄い青グレー (var(--title-color) #a5b3c2 を
     rgba 化して 0.7 透明度)。 ロゴと同色感で統一。 */
  background: rgba(165, 179, 194, 0.7);
  /* hover IN: 左から右に伸びて出現
     hover OUT: 左から右に抜けて消える
     transform-origin を hover IN / OUT で切り替えることで、
     同じ方向 (左→右) の流れに統一する。
     ・通常時 (= hover OUT 後): origin: right で scaleX(0) → 右起点で縮む = 左→右に抜ける
     ・hover 時 (= hover IN 中): origin: left で scaleX(1) → 左起点で伸びる = 左→右に出現 */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.lowerSection__pageLink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* dl 形式 (会社概要 / 運営事業者)。
   dt と dd の間に "/" をセパレータとして表示する。 既存の grid 2 列構造を保ちつつ、
   dt の右端余白 (column-gap 分) の中に疑似要素で "/" を配置。 */
.lowerInfo {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 18px; row-gap: 10px; align-items: baseline;
}
.lowerInfo dt {
  position: relative;
  margin: 0;
  padding-right: 12px;
  color: rgba(214, 224, 234, 0.50);
  font-size: 13px; letter-spacing: 0.04em; line-height: 1.7; font-weight: 400;
}
.lowerInfo dt::after {
  content: "/";
  position: absolute;
  right: 0;
  top: 0;
  color: rgba(142, 152, 163, 0.45);
  font-size: 13px;
  line-height: 1.7;
  pointer-events: none;
}
.lowerInfo dd {
  margin: 0;
  color: rgba(208, 216, 226, 0.78);
  font-size: 13px; line-height: 1.7;
}
/* dl 内のリンクは about の pageLink と同じ hover MOV 体裁、 但し矢印無し / CTA 感無しの
   「シンプル通常リンク」 として使うため、 .lowerInfo 内の <a> は基本テキストカラーを
   ベースに、 hover 時の下線 MOV だけ流用する。 */
.lowerInfo a {
  position: relative;
  display: inline-block;
  color: var(--title-color);
  text-decoration: none;
  padding-bottom: 2px;
}
.lowerInfo a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(165, 179, 194, 0.7);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.lowerInfo a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

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

  .lowerSection         { width: 100%; margin-bottom: 44px; }
  .lowerSection__title  { font-size: 15px; margin-bottom: 14px; }
  .lowerSection__body   { font-size: 13.5px; line-height: 1.9; }
  .lowerSection__list   { font-size: 13.5px; line-height: 1.95; }

  .lowerSection--copy   { margin-bottom: 56px; }
  .lowerSection__copy   { font-size: clamp(18px, 5.4vw, 26px); line-height: 1.55; }

  .lowerSection__pageLinkWrap { margin-top: 22px; }
  .lowerSection__pageLink     { font-size: 13.5px; }

  .lowerInfo            { column-gap: 14px; row-gap: 10px; }
  .lowerInfo dt         { font-size: 12px; padding-right: 10px; }
  .lowerInfo dt::after  { font-size: 12px; }
  .lowerInfo dd         { font-size: 12.5px; }
}
/* =================================================================
   lower-page 専用 footer 慣性スクロール (lower-page スコープ)
   ----------------------------------------------------------------
   info-footer.js / footer.css / site-chrome.js を一切触らず、
   lower-page.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.lower-page 配下のみ適用される。
================================================================= */
body.lower-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.lower-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) を lower-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.lower-page .panel__inner--footer {
    padding: 0;
  }
  body.lower-page .footerPanel {
    padding: 0;
  }
  body.lower-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.lower-page #lower-footer で specificity を上げて指定。 */
  body.lower-page #lower-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.lower-page #lower-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.lower-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.lower-page #lower-footer .footerPanel__head {
  text-align: center;
}
body.lower-page #lower-footer .footerPanel__head .panel__title,
body.lower-page #lower-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.lower-page #lower-footer .footerPanel__head .textMotion,
body.lower-page #lower-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.lower-page #lower-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.lower-page #lower-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.lower-page #lower-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.lower-page #lower-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.lower-page #lower-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}


/* =================================================================
   lower-page 共通の静かな装飾
   ----------------------------------------------------------------
   既存サイトのトーン (粒子、 軌道、 線、 余白、 薄い罫線) に合わせ、 派手に
   ならない範囲で「ただの legal」 とは違う読み物感を出す。 全 lower-page
   (about / company / 将来の philosophy 等) で共通の見た目になる。
   ・section title の左に細い縦線 (1px、 暗いグレー) でテキストにアクセント
   ・section 同士の境界に薄い罫線 (legal よりさらに静か)
   ・lead 文の letter-spacing を少し広めに
   ページ別の差し色 / 個別装飾が必要になったら、 body.lower-page--<type>
   modifier を追加して個別に書き足す方針 (現在は付与されているが装飾は素のまま)。
   ================================================================= */

/* section title の左に細い縦線 (静かな縦アクセント、 太字感を出さない) */
body.lower-page .lowerSection__title {
  position: relative;
  padding-left: 14px;
}
body.lower-page .lowerSection__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 1px;
  background: rgba(142, 152, 163, 0.32);
  pointer-events: none;
}

/* section の上に静かな区切り罫線 (legal よりさらに薄め) */
body.lower-page .lowerSection + .lowerSection {
  position: relative;
}
body.lower-page .lowerSection + .lowerSection::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(208, 216, 226, 0)   0%,
    rgba(208, 216, 226, 0.10) 30%,
    rgba(208, 216, 226, 0.10) 70%,
    rgba(208, 216, 226, 0)   100%
  );
  pointer-events: none;
}

/* lead 文を本文導入として少しだけ控えめに (Gravedencuentro らしい余白感) */
body.lower-page .lowerContent__lead {
  letter-spacing: 0.08em;
}

/* SP 微調整 */
@media (max-width: 768px) {
  body.lower-page .lowerSection__title {
    padding-left: 12px;
  }
  body.lower-page .lowerSection + .lowerSection::before {
    top: -22px;
  }
}