/* ================================================================
   membership.css
   Sections: Hero / Intro / Benefit / Connection / Convergence /
             Tasting / Plate / Barrel / Closing
   構造は structure.css を踏襲。詳細セクションは visualLeft / visualRight
   で左右交互に並ぶ共通レイアウト。
================================================================ */

/* ── Logo (下層ページとして scale(0.7667) に縮小、entry-page と同じ) ──
   共通 ui.css の .siteMark { scale(1) } を上書き。
   is-logo-visible の有無による位置 (translate) は共通 ui.css と揃える。 */
body.membership-page .siteMark {
  transform: translate3d(-8px, -8px, 0) scale(0.7667);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}
body.membership-page:not(.is-logo-visible) .siteMark {
  opacity: 0;
  transform: translate3d(-8px, 8px, 0) scale(0.7667);
}
body.membership-page.is-logo-visible .siteMark {
  opacity: 1;
  transform: translate3d(-8px, -8px, 0) scale(0.7667);
}

/* ── Copyright & SNS (is-logo-visible でフェードイン、他下層ページと揃える)
   PC のみ。 SP では footer.css の @media (max-width: 768px) で
   `.footerPanel__copy { opacity: 0 }` + `body.is-footer-active .footerPanel__copy { opacity: 1 }`
   が効く。 ここを PC 限定で囲わないと SP でも is-logo-visible で常時表示になり、
   HERO 表示中から copy/sns が見えてしまう。 ── */
@media (min-width: 769px) {
  body.membership-page .footerPanel__copy,
  body.membership-page .footerPanel__sns {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  body.membership-page.is-logo-visible .footerPanel__copy,
  body.membership-page.is-logo-visible .footerPanel__sns {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Hero ready ───────────────────────────────────────── */
.js-hero-title,
.js-hero-jp,
.js-schero-copy-line { visibility: hidden; }
body.is-hero-ready .js-hero-title,
body.is-hero-ready .js-hero-jp,
body.is-hero-ready .js-schero-copy-line { visibility: visible; }

/* ── Hero (concept.css のヒーロータイポ設計に完全準拠) ───────────── */
.membership-hero {
  position: relative; z-index: 2; width: 100%; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.membership-hero__inner {
  width: 100%;
  min-height: 100vh;
  padding: 0 148px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.membership-hero__content {
  width: min(100%, 900px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* タイトル (concept と同一) */
.membership-hero__title {
  margin: 0;
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 700;
  color: var(--title-color);
  text-align: center;
  width: 100%;
}
.membership-hero__title .textMotion,
.membership-hero__title .textMotion--hero {
  display: block !important; width: 100% !important; text-align: center !important;
}
.membership-hero__title .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}

/* リード (concept と同一) */
.membership-hero__lead {
  margin: 20px 0 0;
  color: rgba(208, 216, 226, 0.68);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.005em;
  text-align: center;
  width: 100%;
  transform: translateX(10px);
}
.membership-hero__lead .textMotion,
.membership-hero__lead .textMotion--panel {
  display: block !important; width: 100% !important; text-align: center !important;
}
.membership-hero__lead .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}

/* メインコピー (concept と同一) */
.membership-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 52px;
  width: 100%;
  transform: translateX(10px);
}
.membership-hero__copyLine {
  margin: 0;
  color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  font-size: clamp(36px, 4.6vw, 66px);
}
.membership-hero__copyLine + .membership-hero__copyLine { margin-top: 4px; }

.membership-hero__copyLine .textMotion,
.membership-hero__copyLine .textMotion--panel {
  display: block !important; width: 100% !important; text-align: center !important;
}
.membership-hero__copyLine .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}

.membership-hero__copyLine .glyph__char { letter-spacing: 0; }
.membership-hero__lead .glyph__char     { letter-spacing: 0.005em; }

/* 末尾句読点の光学補正 (concept と同一) */
.chero-line--punct-end .textMotion__line { transform: translateX(0.22em); }
.membership-hero__lead.chero-line--punct-end .textMotion__line { transform: translateX(0); }
.membership-hero__copyLine--2.chero-line--punct-end .textMotion__line { transform: translateX(0.12em); }

/* SP: hero lead の <br class="sp-only"> で 2+ 行に分割された場合の縦並び制御。
   PC のインラインスタイル (textMotion__line に display: inline-block) のままだと
   横並びで 1 行表示 → 画面幅を超えてはみ出す。 SP では各 line を block 化して
   縦並びにする。 各 line 内は white-space: nowrap のまま (line 内で勝手に折り返さない、
   改行は <br class="sp-only"> の位置でのみ起きる)。
   max-width: 768px に限定する (中間幅 768-900px は PC 扱いで .sp-only も display:none、
   1 行表示のまま)。 */
@media (max-width: 768px) {
  .membership-hero__lead .textMotion__line {
    display: block !important;
  }
}

/* ── Content panel ──────────────────────────────────── */
.membership-content-panel {
  position: relative; z-index: 2; width: 100%; overflow: hidden; touch-action: none;
}
.membership-content-panel::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 46, 56, 0.28); backdrop-filter: blur(2px);
  opacity: 1; z-index: -1;
}
.membership-content-panel__inner {
  width: 100%; max-width: 100%; min-height: 100vh;
  display: flex; align-items: stretch; justify-content: flex-start; padding: 0;
}
.membership-content__viewport {
  width: 100%; height: 100vh; overflow: hidden; position: relative;
}
.membership-content__inner {
  width: 100%; padding: 120px 148px 160px 148px; box-sizing: border-box; will-change: transform;
}

/* ================================================================
   共通セクション (Intro / Connection / Convergence / Tasting /
                   Plate / Barrel)
================================================================ */
/* セクション全体: 上下に薄い横罫線で静かに区切る。
   Plate ページと同じトーン。罫線は rgba(142,152,163,0.18) 程度で
   粒子背景と馴染むレベルに抑える。
   連続するセクションで下罫線と次の上罫線が重ならないよう、
   上罫線のみを持たせて、最後だけ下罫線を追加する。 */
.membershipSection {
  width: min(100%, 1080px);
  margin: 0 auto;
  /* 上下 padding を 90 → 40 に詰めて、 セクション間の間延びを抑える。
     01 COMMUNITY は別途 .membershipCommunity 側で padding-top をさらに調整 (20px)。 */
  padding: 40px 0;
  border-top: 1px solid rgba(142, 152, 163, 0.18);
}
.membershipSection:last-of-type {
  border-bottom: 1px solid rgba(142, 152, 163, 0.18);
  margin-bottom: 120px;
}
/* 01 COMMUNITY (= .membershipCommunity) は直前のコンテンツとの区切りが
   既にあるため上罫線は不要。 PC/SP 共通で常に非表示。
   親に他の <section> 兄弟があるため :first-of-type は使えず、
   modifier class で specifically 指定する。 多重 !important で固定 (上書き禁止)。
   さらに padding-top も詰める: 直前 (.membershipBenefits) との間に
   既に 30px の余白があり、 ここで 90px 取ると合計 120px の隙間になる。
   余白を詰めて視覚的な接続感を保つ。 */
body.membership-page .membershipSection.membershipCommunity,
.membershipSection.membershipCommunity {
  border-top: 0 none transparent !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  padding-top: 20px !important;
}

.membershipSection__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.membershipSection--visualRight .membershipSection__layout {
  /* 文字 → 視覚、の並び */
}
.membershipSection--visualLeft .membershipSection__layout {
  /* 視覚 → 文字、の並び（HTML側の順序に依存） */
}

/* visual: 枠線・背景を削除。背景の粒子と馴染む透明コンテナに。 */
.membershipSection__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: transparent;
  border: none;
  overflow: visible;
}
.membershipSection__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  display: block;
}

/* 04 HOST: canvas を stage より左右に 7% ずつ overflow させる。
   食卓円 (+0.08*minWH) が最外軌道 (0.48*minWH) に乗ると stage 半幅
   (0.5*minWH) を 0.06 分はみ出すので、canvas を広げて吸収する。
   stage 自体の aspect (4:5) は保つのでレイアウト不変。
   JS 側は H*0.8 (= 01-03 と同じ scale) で orbit を描くのでサイズも一致。 */
#membershipCanvasHost {
  left: -7%;
  right: auto;
  width: 114%;
}

.membershipSection__content { padding-top: 8px; }

.membershipSection__eyebrow {
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  /* アンカーで飛んだ時、見出しが上端にべたり付かないよう、
     セクション自体に scroll-margin-top を持たせる設計 (別の箇所で定義)。 */
}
/* ダッシュは非表示 (Concept / Plate と同じ num + en + gap スタイルに統一) */
.membershipSection__eyebrowDash,
.membershipBenefitCard__eyebrowDash { display: none; }
/* 数字: 明るく目立たせる。en は控えめに (1段下げる)。 */
.membershipSection__eyebrowNum,
.membershipBenefitCard__eyebrowNum {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #b4c7dc;
  font-weight: 400;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.membershipSection__eyebrowEn,
.membershipBenefitCard__eyebrowEn {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(214, 224, 234, 0.40);
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.membershipSection__heading {
  margin: 0;
  color: rgba(208, 216, 226, 0.92);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.005em;
}

.membershipSection__body {
  margin: 30px 0 0;
  display: grid;
  gap: 18px;
}
.membershipSection__body p {
  margin: 0;
  color: rgba(208, 216, 226, 0.58);
  font-size: 14px;
  line-height: 2.0;
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* 注記 (本文末尾の補足) は本文より一段控えめに */
.membershipSection__body p.membershipSection__note {
  margin-top: 8px;
  position: relative;
  padding-left: 1em;
  color: rgba(208, 216, 226, 0.42);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.membershipSection__body p.membershipSection__note::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(208, 216, 226, 0.38);
}

/* ================================================================
   01. Intro (コピー + リード)
   concept / structure の .xxxIntro と同一パターン。
   .membershipIntro__statement = 見出し相当のコピー (明朝、大きめ)
   .membershipIntro__lead      = リード文 (小さめ、柔らかい色)
================================================================ */
.membershipIntro {
  width: min(100%, 820px);
  margin: 0 auto 72px;
  text-align: center;
}
.membershipIntro__statement {
  margin: 0 auto;
  color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 3.8vw, 50px);
  line-height: 1.26;
  letter-spacing: 0.005em;
  font-weight: 400;
}
.membershipIntro__lead {
  margin: 32px auto 0;
  max-width: 600px;
  color: rgba(208, 216, 226, 0.60);
  font-size: 14px;
  line-height: 2.1;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: left;
}

/* ================================================================
   Gravity Token 図版 (入れ物)
   実体の Token カードは gravity-token.css / gravity-token.js が担当。
   このブロックはページ内の配置用ラッパのみを管理する。
================================================================ */
.membershipToken {
  width: min(100%, 1080px);
  margin: 0 auto 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.membershipToken__frame {
  position: relative;
  width: min(85%, 620px, calc(100vw - 80px));
  aspect-ratio: 12 / 7;
  flex-shrink: 0;
}

/* ================================================================
   Gravity Token 発行情報ブロック
   "価格訴求" ではなく "発行条件" として読ませる情報設計。
   - 外枠の長い罫線は廃止。中央の短い罫線だけを弱く残す。
   - Gravity Token は明朝で強さを出し、安売り感を排除。
   - 50,000円 はサイズを抑え、書体と余白で重みを作る。
   - 下部情報は "注釈" ではなく "発行情報の記録" として読める濃度。
================================================================ */
.membershipPrice {
  width: min(100%, 620px);
  margin: 0 auto 120px;
  padding: 0;
  border: none;
}

.membershipPrice__inner {
  text-align: center;
  padding: 0 24px;
}

/* ラベル ISSUED VALUE: 現状維持 */
.membershipPrice__eyebrow {
  margin: 0 0 22px;
  color: rgba(214, 224, 234, 0.36);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Gravity Token: 価格ブロック内の主役タイトル。
   明朝で立てて、価格 (50,000円) と書体系統を揃える。 */
.membershipPrice__title {
  margin: 0 0 28px;
  color: rgba(240, 246, 252, 1);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Token 名と価格情報を分ける短い罫線。
   全体をより軽く、書類の区切り線のように。 */
.membershipPrice__divider {
  display: block;
  width: 20px;
  height: 1px;
  margin: 0 auto 26px;
  background: rgba(214, 224, 234, 0.14);
}

/* 主役と下部情報の間の divider。より薄く、さらに短く。 */
.membershipPrice__divider--sub {
  width: 16px;
  margin: 30px auto 24px;
  background: rgba(214, 224, 234, 0.10);
}

/* 前置き文: 本文サンセリフで、通常本文扱い。
   色を少し上げて (0.54 → 0.60) 読めるが控えめに。 */
.membershipPrice__specialLead {
  margin: 0 0 16px;
  color: rgba(208, 216, 226, 0.60);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* 50,000円（税別） コンテナ:
   価格 (50,000円) を **中央に固定** し、(税別) は絶対配置で価格の
   右横に小さく添える。これにより (税別) の幅が中心位置に影響せず、
   価格だけがブロック中央にまっすぐ立つ。 */
.membershipPrice__specialAmount {
  position: relative;
  display: inline-block;
  margin: 0;
  color: rgba(244, 248, 254, 1);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* 数字 50,000 + 円: 明朝、baseline 揃え */
.membershipPrice__specialAmountNum {
  font-size: clamp(28px, 3.4vw, 40px);
  vertical-align: baseline;
}
.membershipPrice__specialAmountUnit {
  margin-left: 3px;
  font-size: clamp(15px, 1.8vw, 20px);
  vertical-align: baseline;
}

/* （税別）: 絶対配置で価格の右側に。
   left: 100% で価格コンテナの右端から開始、margin-left で少し離す。
   top は価格の下端に合わせるように調整。 */
.membershipPrice__specialAmountTax {
  position: absolute;
  left: 100%;
  bottom: 0.18em;
  margin-left: 6px;
  color: rgba(208, 216, 226, 0.36);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 下部: 発行情報 (通常発行価格 / 有効期限) を横並びに。
   中央に縦の細い罫線で 2 項目を区切る。各項目内ではラベルが上、
   値が下の 2 段構成で、横 2 並びの書類的なまとまりを作る。 */
/* 下部: 発行情報 (通常発行価格 / 発行上限 / 有効期限) を横 3 並びに。
   dl の各 dt/dd を grid で 3カラム × 2行に配置。
   2列目・3列目の左側に border-left で縦罫線を引く。
   row-gap は 0 にして、dt の padding-bottom で間隔を確保
   (row-gap を使うと border が途切れるため)。 */
.membershipPrice__terms {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0;
  max-width: 520px;
}

.membershipPrice__termLabel {
  margin: 0;
  padding: 0 14px 10px;
  text-align: center;
  color: rgba(214, 224, 234, 0.52);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.membershipPrice__termValue {
  margin: 0;
  padding: 0 14px;
  text-align: center;
  color: rgba(224, 232, 242, 0.84);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* termValueAmount: 100,000円 を cell 内で中央に立てるためのラッパー。
   relative + inline-block で自身の幅 = 100,000円 の幅とし、
   (税別) は絶対配置で右横に添える。 */
.membershipPrice__termValueAmount {
  position: relative;
  display: inline-block;
}

/* 通常発行価格の (税別) 補足: 50,000円と同じ方式で絶対配置 */
.membershipPrice__termTax {
  position: absolute;
  left: 100%;
  bottom: 0.06em;
  margin-left: 4px;
  color: rgba(208, 216, 226, 0.40);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 1番目 (通常発行価格): 左カラム */
.membershipPrice__termLabel:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.membershipPrice__termValue:nth-of-type(1) { grid-column: 1; grid-row: 2; }

/* 2番目 (発行上限): 中央カラム、左に border */
.membershipPrice__termLabel:nth-of-type(2),
.membershipPrice__termValue:nth-of-type(2) {
  grid-column: 2;
  border-left: 1px solid rgba(214, 224, 234, 0.14);
}
.membershipPrice__termLabel:nth-of-type(2) { grid-row: 1; }
.membershipPrice__termValue:nth-of-type(2) { grid-row: 2; }

/* 3番目 (有効期限): 右カラム、左に border */
.membershipPrice__termLabel:nth-of-type(3),
.membershipPrice__termValue:nth-of-type(3) {
  grid-column: 3;
  border-left: 1px solid rgba(214, 224, 234, 0.14);
}
.membershipPrice__termLabel:nth-of-type(3) { grid-row: 1; }
.membershipPrice__termValue:nth-of-type(3) { grid-row: 2; }

/* 注記ブロック: terms の下に、横罫線 + 左揃え注記テキスト。
   規約感を出しすぎず、静かな補足情報として読ませる。 */
.membershipPrice__notesRule {
  margin: 32px auto 20px;
  width: min(100%, 480px);
  height: 0;
  border: 0;
  border-top: 1px solid rgba(142, 152, 163, 0.18);
}

.membershipPrice__notes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 480px);
  text-align: left;
}

.membershipPrice__notes li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1em;     /* ※ 用のインデント */
  color: rgba(208, 216, 226, 0.42);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 2.0;
}

/* ※ マーク: 箇条書きの記号として静かに配置 */
.membershipPrice__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(208, 216, 226, 0.38);
}

/* SP 調整 */
@media (max-width: 768px) {
  .membershipPrice {
    margin-bottom: 80px;
  }
  .membershipPrice__inner {
    padding: 0 20px;
  }
  .membershipPrice__eyebrow {
    margin-bottom: 18px;
    font-size: 9px;
    letter-spacing: 0.32em;
  }
  .membershipPrice__title {
    font-size: clamp(22px, 6.4vw, 30px);
    margin-bottom: 22px;
  }
  .membershipPrice__divider {
    margin-bottom: 20px;
  }
  .membershipPrice__divider--sub {
    margin: 24px auto 20px;
  }
  .membershipPrice__specialLead {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .membershipPrice__specialAmountNum {
    font-size: clamp(26px, 7.2vw, 34px);
  }
  .membershipPrice__specialAmountUnit {
    font-size: clamp(13px, 3.6vw, 17px);
  }
  .membershipPrice__specialAmountTax {
    margin-left: 5px;
    font-size: 9px;
  }
  /* SP: 3カラム横並びを解除し、ラベル左 / 値右の 2 カラム情報リストに切り替える。
     各項目を 1 行ずつ並べ、行間はごく薄い区切り線で整理する。
     ブロック自体は中央配置のまま、中身だけが左右に整列。 */
  .membershipPrice__terms {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    width: 100%;
    max-width: 480px;
    row-gap: 0;
    column-gap: 20px;
    text-align: initial;
  }
  /* 共通: PC で立てた border-left / 中央寄せ padding を解除し、
     行ごとの上下 padding と border-bottom で行間を作る。 */
  .membershipPrice__termLabel,
  .membershipPrice__termValue {
    border-left: none !important;
    border-bottom: 1px solid rgba(214, 224, 234, 0.08);
    padding: 13px 0;
    margin: 0;
    align-self: center;
    line-height: 1.2;
  }
  .membershipPrice__termLabel {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .membershipPrice__termValue {
    text-align: left;
    font-size: 13px;
  }
  /* (税別) を SP では static にして inline flow に戻す。
     右寄せ cell 内で wrapper 全体が "100,000円(税別)" の幅となり、
     絶対配置による cell からのはみ出しが起きない。 */
  .membershipPrice__termTax {
    position: static;
    margin-left: 4px;
  }
  /* 6 要素を 3 行 × 2 列に再配置 (PC の 3 カラム配置を SP 仕様で上書き) */
  .membershipPrice__termLabel:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .membershipPrice__termValue:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .membershipPrice__termLabel:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .membershipPrice__termValue:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .membershipPrice__termLabel:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .membershipPrice__termValue:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  /* SP: 注記直前の横ラインを非表示 (各行の下線で区切りとして十分なため、軽く見せる)。
     PC 表示には影響しない。 */
  .membershipPrice__notesRule {
    display: none;
  }
  .membershipPrice__notes {
    width: 100%;
    margin-top: 28px;
  }
  .membershipPrice__notes li {
    font-size: 10px;
    line-height: 1.95;
  }
}
.membershipBenefit {
  width: min(100%, 1080px);
  margin: 0 auto 40px;
  /* 左右 padding は持たない (子 grid が box の端からスタート)。
     同じ幅軸の Heading 側で揃えるための基準になる。 */
}

/* ================================================================
   Benefit 9-item grid
   表ではなく「設計図 / 観測図」 として組み上がる演出を取る。

   - グリッド自身は背景・gap・枠線なし (UI カード感を消す)
   - 最外枠 (角丸) と内部区切り線は SVG オーバーレイで描画 (JS が線を走らせる)
   - 各セル背景も初期表示せず、 hover 時のみ ごく薄く明るくする
   - hover 時は線も少しだけ明るくする (CSS 変数で SVG が拾う)
================================================================ */
.membershipBenefit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border: 0;
  position: relative; /* SVG オーバーレイ配置用 */
  isolation: isolate;
}
/* SVG オーバーレイ: グリッド全体に被せて、 外枠 + 内部区切り線を描画 */
.membershipBenefit__gridOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
/* 共通スタイル */
.membershipBenefit__gridOverlay .gridLine,
.membershipBenefit__gridOverlay .gridFrame {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  transition: stroke 0.4s ease, stroke-opacity 0.4s ease;
}
/* 外枠 (角丸の観測フレーム): 内側の線より一段濃く */
.membershipBenefit__gridOverlay .gridFrame {
  stroke: rgba(208, 216, 226, 0.22);
  stroke-width: 1;
}
/* 内部 縦/横 区切り線: 外枠より一段薄く、 階層を作る */
.membershipBenefit__gridOverlay .gridLine {
  stroke: rgba(208, 216, 226, 0.14);
  stroke-width: 1;
}

.membershipBenefit__item {
  position: relative;
  background: transparent;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
  z-index: 2; /* SVG より前に重ねて hover 取れるように */
}
.membershipBenefit__item:hover {
  background: rgba(214, 224, 234, 0.030); /* ごく薄く明るく */
}
/* hover 中のセルがあるとき、 グリッド全体の SVG 線も少し明るくする */
.membershipBenefit__grid:has(.membershipBenefit__item:hover) .membershipBenefit__gridOverlay .gridFrame {
  stroke: rgba(208, 216, 226, 0.36);
}
.membershipBenefit__grid:has(.membershipBenefit__item:hover) .membershipBenefit__gridOverlay .gridLine {
  stroke: rgba(208, 216, 226, 0.22);
}

/* カード全体をアンカーにする。
   ラベル (上) → タイトル → 本文 の 3 層を自然に並べる padding。
   グリッド線 (SVG オーバーレイ) からの距離を整える。 */
.membershipBenefit__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 34px 30px 36px;
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}
.membershipBenefit__link:hover .membershipBenefit__itemTitle {
  color: rgba(220, 230, 240, 1);
}

/* ラベル: concept ページの空気感に寄せる (数字 11px / 英字 10px uppercase 薄く広く) */
.membershipBenefit__itemLabel {
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
/* num / en の見た目は 01-05 詳細セクション (.membershipSection__eyebrow) と統一。
   数字は明るく (0.90)、 en は控えめ (0.40)。 */
.membershipBenefit__itemNo {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #b4c7dc;
  font-weight: 400;
}
.membershipBenefit__itemEn {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(214, 224, 234, 0.40);
  font-weight: 300;
  text-transform: uppercase;
}

.membershipBenefit__itemTitle {
  margin: 0 0 14px;
  color: rgba(214, 224, 234, 0.88);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.4s ease;
}
.membershipBenefit__itemText {
  margin: 0;
  color: rgba(208, 216, 226, 0.56);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* ================================================================
   アンカー基準要素

   各詳細セクションの冒頭 (.membershipSection__eyebrow の直前) に
   配置される不可視の div。id="token-*" はこの要素に付くので、
   アンカー遷移の停止位置が必ず eyebrow + heading の直上になる。

   レイアウトに影響を与えないよう height=0 にし、scroll-margin-top で
   止まる位置を調整する。JS (setupInPageAnchors) はこの要素の
   getBoundingClientRect から正確な位置を計算する。
================================================================ */
.membershipDetail__anchor {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  scroll-margin-top: 120px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .membershipDetail__anchor {
    scroll-margin-top: 80px;
  }
}

/* ================================================================
   Benefits 06-09 (図版なし、テキストカードを 2x2 で並べる)
   ================================================================ */
.membershipBenefits {
  width: min(100%, 1080px);
  margin: 0 auto;
  /* 05 RELEASE 直下の境界として border-top + 90px padding を持っていたが、
     セクションの繋がりを密にするため両方を撤廃。 */
  padding: 0 0 30px;
}
.membershipBenefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.membershipBenefitCard {
  position: relative;
  padding: 44px 40px;
  min-height: 280px;
  border: 1px solid rgba(142, 152, 163, 0.16);
  background: rgba(38, 46, 56, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.membershipBenefitCard::before {
  /* ごく薄い円弧の装飾 (図版の代わりとなる静かなアクセント) */
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(214, 224, 234, 0.05);
  transform: translateY(-50%);
  pointer-events: none;
}
.membershipBenefitCard::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(214, 224, 234, 0.04);
  transform: translateY(-50%);
  pointer-events: none;
}
.membershipBenefitCard__eyebrow {
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.membershipBenefitCard__heading {
  margin: 0;
  color: rgba(208, 216, 226, 0.92);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.membershipBenefitCard__body {
  margin: 22px 0 0;
  display: grid;
  gap: 14px;
}
.membershipBenefitCard__body p {
  margin: 0;
  color: rgba(208, 216, 226, 0.58);
  font-size: 13px;
  line-height: 1.95;
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* 注記: 本文末尾のカード下部に、 控えめに添える補足。 ※ ハンギング。
   本文 (13px / 0.58 / 明朝) と明確に階層を作るため、
   サイズ・濃度・書体を一段ずつ落とす。 */
.membershipBenefitCard__body p.membershipBenefitCard__note {
  margin-top: 18px;
  position: relative;
  padding-left: 1em;
  color: rgba(208, 216, 226, 0.34);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.membershipBenefitCard__body p.membershipBenefitCard__note::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(208, 216, 226, 0.30);
}

@media (max-width: 768px) {
  .membershipBenefits {
    padding: 0 0 20px;
  }
  .membershipBenefits__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .membershipBenefitCard {
    padding: 40px 28px;
    min-height: 180px;
  }
  .membershipBenefitCard::before {
    width: 200px;
    height: 200px;
    right: -100px;
  }
  .membershipBenefitCard::after {
    width: 120px;
    height: 120px;
    right: -50px;
  }
}

/* ================================================================
   Closing
================================================================ */
.membershipClosing {
  width: min(100%, 720px);
  margin: 40px auto 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.membershipClosing__inner {
  width: 100%; margin: 0 auto; padding: 0 28px;
}
.membershipClosing__statement {
  margin: 0 auto;
  color: rgba(208, 216, 226, 0.92);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-weight: 400;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
/* SP 専用改行: PC では非表示 */
.membershipClosing__brSp { display: none; }
@media (max-width: 768px) {
  /* SP では「次の収束へと」 と 「静かに続いていく」 の間で改行 */
  .membershipClosing__brSp { display: inline; }
}
.membershipClosing__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
  min-width: 400px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  overflow: hidden;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.membershipClosing__link:hover {
  color: var(--line-button-text-hover);
  background: transparent;
}
.membershipClosing__link:hover .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

/* ── 初期非表示 (アニメ対象) ─────────────────────── */
.membershipSection__visual,
.membershipSection__eyebrow,
.membershipSection__heading,
.membershipSection__body,
.membershipIntro__statement,
.membershipIntro__lead,
.membershipToken__frame,
.membershipBenefit__item,
.membershipClosing__statement,
.membershipClosing__link {
  opacity: 0; will-change: opacity, transform;
}
.membershipSection__heading,
.membershipIntro__statement,
.membershipClosing__statement {
  transform: translate3d(0, 32px, 0);
}
.membershipSection__visual,
.membershipSection__eyebrow,
.membershipSection__body,
.membershipIntro__lead,
.membershipToken__frame,
.membershipBenefit__item,
.membershipClosing__link {
  transform: translate3d(0, 16px, 0);
}

/* ── 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.membership-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.membership-page #membership-footer .footerPanel__head {
  text-align: center;
}
body.membership-page #membership-footer .footerPanel__head .panel__title,
body.membership-page #membership-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.membership-page #membership-footer .footerPanel__head .textMotion,
body.membership-page #membership-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.membership-page #membership-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.membership-page #membership-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.membership-page #membership-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.membership-page #membership-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.membership-page #membership-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .membership-content__inner { padding: 100px 80px 140px; }
  .membershipSection__layout { gap: 56px; }
}

/* ================================================================
   中間幅 (769px〜1100px): タブレット表示
   GT カード (membershipToken__frame) は PC base で
   width: min(85%, 620px, calc(100vw - 80px)) なので、
   中間幅 (1000px viewport 等) では 85% = 850px 相当となり
   極端に大きく見える。 max-width を抑えてタブレット幅で
   適切なサイズに整える。
   罫線関連 (特典カードの membershipBenefit__gridOverlay) は
   SVG 描画方式の確認後に別途対応する想定で、 今回は触らない。
================================================================ */
/* ================================================================
   GT カード幅 (769〜1300px): 中間幅を 2 段に分割
   PC base の min(85%, 620px, calc(100vw - 80px)) は 1101-1300 の
   "狭めの PC" 帯でも 620px 近い大きさで適用され viewport に対して
   GT が大きく見えるため抑制する。ただし 1300px 境界で大画面 (620px)
   から急激に縮むのを避けるため、 中間幅を 2 段に分けて段階的に縮める。
   - 769-1100px (タブレット〜狭め): min(70%, 480px)
   - 1101-1300px (狭めの PC):       min(75%, 560px)
   既存 (max-width: 900) の SP 用 rule
   (width: calc(100% + 48px); max-width: none; margin: 0 -24px) が
   769-900 帯で source order により後出し勝ちして GT が画面幅いっぱいに
   拡大する問題も回避するため、 !important で確実に上書き。
================================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  .membershipToken__frame {
    width: min(70%, 480px, calc(100vw - 96px)) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .membershipToken__frame {
    width: min(75%, 560px, calc(100vw - 96px)) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* 特典カード横罫線: 各 item に border-bottom で代用 (SVG の h1/h2 は
     2 本固定で 5 行に足りないため JS 側で非表示)。
     最後 1 個 (= 09 RATE) には border-bottom 不要 (枠 frame の下端と
     重複するため)。 */
  body.membership-page .membershipBenefit__grid > .membershipBenefit__item {
    border-bottom: 1px solid rgba(208, 216, 226, 0.14) !important;
  }
  body.membership-page .membershipBenefit__grid > .membershipBenefit__item:last-child {
    border-bottom: none !important;
  }
}

/* 901-1100: 中間幅広め → 2 列 grid。
   gridLine v1 (中央 W/2) は JS が制御して表示、 v2 / h1 / h2 は JS で非表示。 */
@media (min-width: 901px) and (max-width: 1100px) {
  .membershipBenefit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 769-900: 中間幅狭め → 1 列 grid (SP 寄せ)。
   既存 (max-width: 900) の 2 列 rule (line 1197) を上書きして 1 列に。
   既存 rule は同じ specificity だが source order で後出し勝ち。 ただし
   こちらは min-width: 769px で範囲を絞っているため、 後出しの (max-width: 900)
   は 768 以下にも適用される広い範囲、 source order で勝ってしまうため
   !important で確実に上書き。
   gridLine は JS で全部非表示、 横罫線は item の border-bottom で代用。 */
@media (min-width: 769px) and (max-width: 900px) {
  .membershipBenefit__grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 900px) {
  .membership-content__inner { padding: 80px 40px 120px; }
  .membership-hero__inner { padding: 0 80px; }
  .membership-hero__title { font-size: clamp(34px, 9vw, 56px); line-height: .96; }
  .membership-hero__lead  { margin-top: 16px; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.65; }
  /* SP / 中間幅: hero lead の +10px 右シフト (PC でデザイン微調整用) を解除。
     SP / 中間幅では中央揃えしたいので余分なシフトは不要。 */
  .membership-hero__lead { transform: translateX(0); }
  .membership-hero__copy  { margin-top: 40px; }
  .membership-hero__copyLine--1 { font-size: clamp(24px, 7vw, 40px); }
  .membership-hero__copyLine--2 { font-size: clamp(28px, 8.5vw, 48px); }

  /* SP のみ: 赤線 (=.membershipSection の border-top) と中身の間隔を詰める。
     PC は 90px のまま無変更。SP の上 padding を 64 → 20 に。下は 64 維持。 */
  .membershipSection { padding: 20px 0 64px; }
  .membershipSection:last-of-type { margin-bottom: 80px; }
  /* SP: セクション内を「上罫線 → 01 LABEL → 図版 → 見出し → 本文」 の順で
     縦積みする (Concept / Plate と同じ縦リズム)。
     grid-template-areas + .membershipSection__content に display: contents で
     children を直接 grid に参加させる。 */
  .membershipSection__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "anchor"
      "eyebrow"
      "visual"
      "heading"
      "body";
    gap: 0;
  }
  .membershipSection__content { display: contents; }
  /* SP: .membershipDetail__anchor は .membershipSection__content の子要素として
     HTML 内 (eyebrow の直前) に置かれているが、 .membershipSection__content が
     display: contents になると anchor は grid に直接参加することになる。 但し
     grid-area の指定が無いと auto-flow で grid 末尾に配置される (= scrollInnerTo
     の getBoundingClientRect が body の下を返し、 「02 を押すと 03 にいく」
     症状の原因)。 grid-template-areas の先頭に "anchor" を追加し、 ここで
     対応する grid-area を割り当てて、 セクションの先頭に正しく位置させる。 */
  .membershipDetail__anchor { grid-area: anchor; }
  .membershipSection__eyebrow { grid-area: eyebrow; }
  .membershipSection__visual  { grid-area: visual; }
  .membershipSection__heading { grid-area: heading; }
  .membershipSection__body    { grid-area: body; }

  /* SP: visualRight (旧 order 反転) を解除 (grid-areas が順序を決めるため不要) */
  .membershipSection--visualRight .membershipSection__visual,
  .membershipSection--visualRight .membershipSection__content { order: 0; }

  /* SP: 01 LABEL を Concept の __label-num / __label-en と同じ見た目に。
     ダッシュは non-SP のみ表示 (display:none で消し、 gap で間隔)。 */
  /* SP: eyebrow margin を縮める (PC は 22px、SP は label → visual を 6px に)。
     num / en / dash の細かいスタイルは PC default で完結しているため上書き不要。 */
  .membershipSection__eyebrow { margin: 0 0 6px; }

  /* SP: visual サイズを Plate の plateSection__visual と存在感を揃える。
     aspect 4:5 は orbital アニメの H*0.8 スケール基準なので維持。
     visual → 見出し の間隔は Concept の grid gap 20 + content margin-top 8 = 28px と一致させる。 */
  .membershipSection__visual { width: min(100%, 240px); margin: 0 auto 28px; aspect-ratio: 4 / 5; }
  .membershipSection__heading { margin-top: 0; }
  .membershipSection__body { margin-top: 18px; }

  .membershipBenefit { margin-bottom: 32px; }
  .membershipBenefit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membershipBenefit__item { min-height: 200px; }
  .membershipBenefit__link { padding: 30px 24px 34px; }

  .membershipIntro { margin-bottom: 56px; }
  .membershipToken { margin-bottom: 72px; }
  /* SP: GT カードを viewport 幅いっぱいに拡大。
     親 (.membership-content__inner) の左右 24px padding を相殺して
     ちょうど viewport 幅 (393vw端末で 393px)。aspect 12/7 維持で高さ約 229px。 */
  .membershipToken__frame {
    width: calc(100vw * 0.9);
    max-width: none;
    margin: 0 auto;
  }

  .membershipClosing__link { min-width: 0; width: min(100%, 360px); padding: 0 20px; }
}

@media (max-width: 560px) {
  .membership-hero__inner { padding: 0 24px; }
  .membership-content__inner { padding: 64px 24px 100px; }

  .membershipBenefit__grid { grid-template-columns: 1fr; }
  /* SP: 全 item の天地幅を統一。2 行になる item にちょうど収まる高さ。 */
  .membershipBenefit__item { min-height: 180px; }
  .membershipBenefit__link { padding: 28px 22px 32px; }

  /* SP (1カラム時): SVG オーバーレイの内部区切り線 (縦/横) のみ非表示にし、
     大外の角丸フレーム (gridFrame) は残す。代わりに各 item の下に細い横罫線。
     PC (768px / 560px超え) の 2-3カラム + SVG 縦線レイアウトには影響なし。
     selector に body.membership-page を付けて specificity を底上げ、!important で確定。 */
  body.membership-page .membershipBenefit__grid .membershipBenefit__gridOverlay .gridLine {
    display: none !important;
  }
  body.membership-page .membershipBenefit__grid > .membershipBenefit__item {
    border-bottom: 1px solid rgba(208, 216, 226, 0.14) !important;
  }
  body.membership-page .membershipBenefit__grid > .membershipBenefit__item:last-child {
    border-bottom: none !important;
  }

  .membershipSection__heading { font-size: clamp(22px, 6.4vw, 30px); }
  .membershipIntro__statement { font-size: clamp(26px, 3.8vw, 50px); }
  .membershipClosing__statement { font-size: clamp(20px, 6vw, 28px); }
}

/* ── Logo モバイル時のサイズ上書き (entry-page と同一)
   共通 ui.css の @media (max-width: 768px) に合わせ、membership-page でも
   scale(0.5) に縮める。 */
@media (max-width: 768px) {
  body.membership-page .siteMark {
    transform: translate3d(-4px, -4px, 0) scale(0.5);
  }
  body.membership-page:not(.is-logo-visible) .siteMark {
    transform: translate3d(-4px, 8px, 0) scale(0.5);
  }
  body.membership-page.is-logo-visible .siteMark {
    transform: translate3d(-4px, -4px, 0) scale(0.5);
  }
}

/* ================================================================
   Points of Contact 見出し (6 カードを導く中見出し)
   6カードと同じ幅軸 (min(100%, 1080px)) で、padding なし。
   これにより見出しの左端と 6 カードの外枠左端が 1px 単位で揃う。
   ================================================================ */
.membershipHeading {
  /* Benefit と全く同じ幅・margin・padding 構造を採用 */
  width: min(100%, 1080px);
  margin: 0 auto 40px;   /* 下カードとの距離は詰めて自然な一続きに */
  padding: 0;
}

.membershipHeading__inner {
  max-width: 720px;
}

/* eyebrow: 既存 .membershipSection__eyebrow と同じ扱い */
.membershipHeading__eyebrow {
  margin: 0 0 18px;
  color: rgba(208, 216, 226, 0.44);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* タイトル: 既存 .membershipSection__heading と同じ Mincho。
   中見出しなので本文見出しより少し控えめに。 */
.membershipHeading__title {
  margin: 0;
  color: rgba(208, 216, 226, 0.92);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* SP 調整: 左右に 20px の内側余白を確保 (全体レイアウトに合わせる) */
@media (max-width: 768px) {
  .membershipHeading {
    margin-bottom: 28px;
  }
  .membershipHeading__eyebrow {
    margin-bottom: 14px;
  }
  .membershipHeading__title {
    font-size: clamp(19px, 5.6vw, 24px);
  }
}

/* SP: 上部UI（ロゴ / Reservation / ハンバーガー）からコンテンツ冒頭までの距離を確保。
   既存の @media 900 (padding-top:80) / @media 560 (padding-top:64) は変更せず、
   ≤768 でのみ padding-top を 104 に上書き（source order で後勝ち）。 */
@media (max-width: 768px) {
  .membership-content__inner { padding-top: 104px; }
}
/* ================================================================
   背景粒子の強度切り替え (content エリア中は一段引かせる)
   plate ページと同じ挙動: hero ではフル明度、 content に入ると 0.38 + blur(0.8px)
================================================================ */

#bg {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter  0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-membership-content-active #bg {
  opacity: 0.38;
  filter: blur(0.8px);
}
/* =================================================================
   membership 専用 footer 慣性スクロール (membership-page スコープ)
   ----------------------------------------------------------------
   footer.css / info-footer.js / site-chrome.js を一切触らず、
   membership.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) は再ラップされず、
   このセレクタは body.membership-page 配下のみ適用される。
================================================================= */
body.membership-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.membership-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) を membership-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.membership-page .panel__inner--footer {
    padding: 0;
  }
  body.membership-page .footerPanel {
    padding: 0;
  }
  body.membership-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.membership-page #membership-footer で specificity を上げて指定。 */
  body.membership-page #membership-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.membership-page #membership-footer .siteFooterBlock__subLink {
    border-bottom-color: rgba(142, 152, 163, 0.12);
  }
}