/** Shopify CDN: Minification failed

Line 1128:0 Unexpected "}"

**/
/* ==========================================================================
   XEED OFFICIAL FAN CLUB — 共通CSS
   Figma: ファンクラブ Fan Club (FC) PyAGfSKfCR1k9tiI5ljVC4（PC 1440 / 余白80 / 内容幅1280）
   ブレークポイントは 1080px の1点のみ。
   ========================================================================== */
:root {
  --xf-bg: #181818;      /* 2026-08-19 #0E0E0E から引き上げ */
  --xf-fg: #FFFFFF;
  --xf-muted: rgba(255,255,255,.6);
  --xf-faint: rgba(255,255,255,.5);
  --xf-line: rgba(255,255,255,.15);
  --xf-card: rgba(255,255,255,.055);
  --xf-card-solid: #242424;
  --xf-accent: #12B8D9;
  --xf-accent-hover: #0FA3C2;
  --xf-vip-grad: linear-gradient(135deg, #12B8D9 0%, #0A6273 100%);
  --xf-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --xf-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --xf-header-h: 70px;
  --xf-gutter: 80px;
  --xf-max: 1280px;
}
@media (max-width: 1080px) {
  :root { --xf-header-h: 56px; --xf-gutter: 20px; }
}

/* ---- base ---- */
.xf-body {
  margin: 0;
  background: var(--xf-bg);
  color: var(--xf-fg);
  font-family: var(--xf-ja);
  font-feature-settings: "palt";
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
.xf-body *, .xf-body *::before, .xf-body *::after { box-sizing: border-box; }
.xf-body a { color: inherit; text-decoration: none; }
.xf-body img { max-width: 100%; height: auto; display: block; }
/* リセットは :where で詳細度0にする（コンポーネント側の margin/padding 指定が負けないように） */
.xf-body :where(h1, h2, h3, p, dl, dd, ul) { margin: 0; }
.xf-body :where(ul) { padding: 0; list-style: none; }
.xf-en { font-family: var(--xf-en); font-stretch: 125%; font-feature-settings: normal; }
.xf-muted { color: var(--xf-muted); }
.xf-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--xf-accent); color: #0E0E0E; padding: 8px 16px;
}
.xf-skip:focus { left: 8px; }
.xf-main { min-height: 60vh; padding-top: var(--xf-header-h); overflow-x: clip; }
.xf-in { width: min(var(--xf-max), 100% - var(--xf-gutter) * 2); margin-inline: auto; }

/* ---- header (Figma 89:508) ---- */
.xf-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--xf-header-h);
  background: rgba(24,24,24,.95);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.xf-header__in {
  height: 100%;
  padding-inline: var(--xf-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
/* Figma: TOP / NEWS / ⚡ / MEMBERS / CTA が等幅5分割。左右のナビ項目は flex:1 で均等配置 */
.xf-header__nav { display: flex; min-width: 0; gap: 8px; justify-content: space-around; }
.xf-header__nav--l { padding-right: 24px; }
.xf-header__nav > a { flex: 0 1 auto; white-space: nowrap; }
.xf-header__nav--r { flex: 1 1 0; padding: 0 8px 0 24px; }
.xf-header__nav--r > a { text-align: right; }
.xf-header__right { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; }
.xf-header__link {
  font-family: var(--xf-en); font-stretch: 125%; font-weight: 800;
  font-size: 12px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--xf-fg); opacity: .6; padding: 8px 0;
  transition: opacity .2s;
}
.xf-header__link:hover, .xf-header__link:focus-visible, .xf-header__link.is-current { opacity: 1; }
.xf-header__logo { display: grid; place-items: center; width: 40px; height: 40px; color: var(--xf-fg); }
.xf-header__bolt { width: 19px; height: 20px; }
.xf-header__cta { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-left: 24px; }
.xf-header__login {
  font-size: 13px; font-weight: 500; letter-spacing: .05em; color: var(--xf-fg); opacity: .6;
  transition: opacity .2s;
}
.xf-header__login:hover, .xf-header__login:focus-visible { opacity: 1; }
@media (max-width: 1080px) {
  .xf-header__in { grid-template-columns: auto 1fr; gap: 12px; }
  .xf-header__right { justify-content: flex-end; width: 100%; }
  .xf-header__cta { margin-left: 0; }
  .xf-header__nav { display: none; }
  .xf-header__logo { width: 32px; }
  .xf-header__cta { gap: 14px; }
  .xf-header__login { font-size: 12px; }
}

/* ---- buttons ---- */
.xf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  background: var(--xf-accent); color: #0E0E0E;
  font-family: var(--xf-ja); font-size: 14px; font-weight: 500; letter-spacing: .05em; line-height: 1;
  border: 1px solid var(--xf-accent); border-radius: 0; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.xf-btn:hover, .xf-btn:focus-visible { background: var(--xf-accent-hover); border-color: var(--xf-accent-hover); }
.xf-btn--ghost { background: transparent; color: var(--xf-fg); border-color: rgba(255,255,255,.4); }
.xf-btn--ghost:hover, .xf-btn--ghost:focus-visible { background: rgba(255,255,255,.08); border-color: var(--xf-fg); }
.xf-btn--sm { min-height: 30px; padding: 0 16px; font-size: 14px; }
.xf-btn.xf-en { font-family: var(--xf-en); font-weight: 800; font-size: 12px; letter-spacing: .08em; }
.xf-link { color: var(--xf-accent); font-weight: 500; }
.xf-link:hover, .xf-link:focus-visible { color: var(--xf-accent-hover); text-decoration: underline; text-underline-offset: .2em; }
.xf-link--muted { color: var(--xf-muted); font-weight: 400; }
.xf-link--muted:hover { color: var(--xf-fg); }

/* ---- page frame ---- */
.xf-page { position: relative; padding: 96px 0 160px; overflow: clip; }
.xf-page__head { position: relative; margin-bottom: 56px; }
.xf-h1 {
  font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.xf-h2 {
  font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.xf-page__lead { margin-top: 20px; font-size: 18px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; }
.xf-band {
  position: absolute; left: 50%; width: 4400px; height: 320px;
  background: var(--xf-accent);
  transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center;
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
  pointer-events: none; z-index: 0;
}
.xf-band--top { top: -40px; opacity: .9; }
.xf-page > .xf-in { position: relative; z-index: 1; }
@media (max-width: 1080px) {
  .xf-page { padding: 56px 0 96px; }
  .xf-page__head { margin-bottom: 36px; }
  .xf-h1 { font-size: 40px; }
  .xf-h2 { font-size: 28px; }
  .xf-page__lead { font-size: 15px; margin-top: 14px; }
  .xf-band { width: 2400px; height: 20vw; }
  .xf-band--top { top: 0; }
}

/* ---- gate (未ログイン / 本登録前) ---- */
.xf-gate {
  max-width: 720px; margin-inline: auto; padding: 64px 40px; text-align: center;
  background: #222222; border: 1px solid var(--xf-line);
}
.xf-gate__bolt { width: 42px; height: 44px; margin: 0 auto 24px; color: var(--xf-accent); }
.xf-gate .xf-h2 { margin-bottom: 20px; }
.xf-gate__text { font-size: 15px; color: var(--xf-muted); }
.xf-gate__text b { color: var(--xf-fg); font-weight: 700; }
.xf-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.xf-gate__account { margin-top: 28px; font-size: 12px; color: var(--xf-muted); text-align: center; }
.xf-gate__account .xf-link { margin-left: 12px; font-size: 12px; }
/* Shopify 標準ポリシーページ（/policies/*）: layout/theme.liquid の policy 分岐で描画 */
.xf-policy__body { max-width: 860px; margin: 0 auto; padding-bottom: 40px; }
.xf-policy .shopify-policy__container { max-width: none; margin: 0; padding: 0; }
.xf-policy .shopify-policy__title { display: none; }
.xf-policy .shopify-policy__body { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.86); }
.xf-policy .shopify-policy__body h3 { margin: 32px 0 10px; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.xf-policy .shopify-policy__body p { margin: 0 0 10px; }
.xf-policy .shopify-policy__body ol, .xf-policy .shopify-policy__body ul { margin: 0 0 12px; padding-left: 1.4em; }
.xf-policy .shopify-policy__body a { color: var(--xf-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Shopify チャレンジ（hCaptcha）ページ: layout/theme.liquid の /challenge 分岐で描画 */
.xf-challenge .shopify-challenge__container { margin: 0; padding: 0; text-align: center; }
.xf-challenge .shopify-challenge__message { margin: 0; font-size: 14px; line-height: 1.8; color: var(--xf-muted); }
.xf-challenge .g-recaptcha, .xf-challenge .h-captcha { display: flex; justify-content: center; margin: 22px 0; }
.xf-challenge .shopify-challenge__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 240px; margin-top: 8px; padding: 0 28px; background: var(--xf-accent); color: #0E0E0E; border: 0; border-radius: 0; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: opacity .2s; }
.xf-challenge .shopify-challenge__button:hover { opacity: .85; }
.xf-challenge .shopify-challenge__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.xf-challenge .xf-page__head { opacity: 1; transform: none; }
.xf-evinfo { text-align: center; padding: 44px 32px 40px; }
.xf-evinfo__eyebrow { font-weight: 800; font-size: 12px; letter-spacing: .3em; color: var(--xf-accent); }
.xf-evinfo__name { margin-top: 14px; font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: .02em; }
.xf-evinfo__series { margin-top: 8px; font-size: 13px; letter-spacing: .08em; color: var(--xf-muted); }
.xf-evinfo__info { margin-top: 18px; font-size: 14px; line-height: 1.9; }
.xf-evinfo__actions { margin-top: 28px; }
.xf-evinfo__actions .xf-btn { width: 100%; }
.xf-evinfo__pending { padding: 18px 16px; border: 1px dashed rgba(255,255,255,.25); font-size: 13px; line-height: 1.8; color: var(--xf-muted); }
.xf-evinfo__pending + .xf-btn { margin-top: 16px; }
.xf-btn--ext { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.xf-btn--ext .xf-ext { width: 12px; height: 12px; flex: none; margin-top: -1px; shape-rendering: geometricPrecision; transition: transform .25s var(--xf-ease); }
.xf-btn--ext:hover .xf-ext { transform: translate(1px, -1px); }
.xf-evinfo__ext { margin-top: 10px; font-size: 11px; color: var(--xf-faint); }
.xf-evinfo__todo { margin-top: 18px; font-size: 12px; line-height: 1.8; color: var(--xf-muted); }
.xf-evinfo__note { margin-top: 28px; font-size: 13px; line-height: 1.9; color: var(--xf-muted); text-align: center; }
@media (max-width: 1080px) {
  .xf-evinfo { padding: 32px 20px 28px; }
  .xf-evinfo__name { font-size: 30px; }
}
.xf-gate--todo { margin-bottom: 40px; }
.xf-gate--todo .xf-gate__bolt { color: var(--xf-fg); }
@media (max-width: 1080px) {
  .xf-gate { padding: 40px 20px; }
  .xf-gate__actions .xf-btn { width: 100%; }
}

/* ---- my page grid ---- */
.xf-mypage__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.xf-mypage__col { display: grid; gap: 24px; }
.xf-mypage__col--card { position: sticky; top: calc(var(--xf-header-h) + 24px); }
@media (max-width: 1080px) {
  .xf-mypage__grid { grid-template-columns: 1fr; gap: 24px; }
  .xf-mypage__col--card { position: static; }
}

/* ---- member's card ---- */
.xf-card {
  position: relative; aspect-ratio: 1.586; width: 100%;
  padding: 28px 32px;
  background: var(--xf-card-solid);
  border: 1px solid var(--xf-line);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; isolation: isolate;
  container-type: inline-size;
}
.xf-card__band {
  position: absolute; z-index: -1; left: -30%; bottom: -8%; width: 160%; height: 26%;
  background: var(--xf-accent); opacity: .18;
  transform: rotate(-45deg); transform-origin: 50% 50%;
}
/* プラン別の会員証（CRF p10）。アクセントはシアン1色のまま、面の作りで格を変える
   free   … 黒地に薄いバンド
   trial  … バンド1本＋シアンの細い縁（お試し感）
   vip    … シアングラデのバンドが太く走る（月額）
   vipyear… 上下から光が回り込む二重面＋外周のグロー（年額・最上位。会員証実物の箔押しイメージ） */
.xf-card--trial { border-color: rgba(18,184,217,.55); }
.xf-card--trial .xf-card__band { opacity: .45; }
.xf-card--vip .xf-card__band { opacity: 1; background: var(--xf-vip-grad); height: 34%; }
.xf-card--vipyear { border-color: transparent; background:
    linear-gradient(#202020, #202020) padding-box,
    linear-gradient(135deg, #7FE6F7 0%, #12B8D9 34%, #0A6273 62%, #7FE6F7 100%) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 0 1px rgba(18,184,217,.18), 0 18px 50px -24px rgba(18,184,217,.65); }
.xf-card--vipyear .xf-card__band { opacity: 1; height: 42%; bottom: -14%;
  background: linear-gradient(135deg, #7FE6F7 0%, #12B8D9 30%, #0A6273 70%, #12B8D9 100%); }
.xf-card--vipyear::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(200deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.xf-card--vipyear .xf-card__club small { color: rgba(255,255,255,.72); }
.xf-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.xf-card__club { font-weight: 800; font-size: 13px; letter-spacing: .1em; line-height: 1; }
.xf-card__club small { display: block; margin-top: 8px; font-weight: 200; font-size: 9px; letter-spacing: .12em; color: var(--xf-muted); }
.xf-card__name { font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.xf-card__name small { display: block; margin-top: 10px; font-family: var(--xf-ja); font-weight: 500; font-size: 12px; letter-spacing: .05em; color: var(--xf-muted); text-transform: none; }
.xf-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.xf-card__no, .xf-card__since { font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .06em; }
.xf-card__no small, .xf-card__since small { display: block; margin-bottom: 8px; font-weight: 200; font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.8); }
.xf-card__since { text-align: right; }
@container (max-width: 420px) {
  .xf-card { padding: 20px 22px; }
  .xf-card__name { font-size: 22px; }
  .xf-card__no, .xf-card__since { font-size: 14px; }
}
.xf-rank {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  font-weight: 800; font-size: 11px; letter-spacing: .12em; line-height: 1;
  border: 1px solid rgba(255,255,255,.4); color: var(--xf-fg);
}
.xf-rank--trial { background: var(--xf-accent); border-color: var(--xf-accent); color: #0E0E0E; }
.xf-rank--vip { background: var(--xf-vip-grad); border-color: transparent; color: #fff; }
.xf-rank--vipyear { background: linear-gradient(135deg, #7FE6F7, #12B8D9 46%, #0A6273); border-color: transparent; color: #0E0E0E; letter-spacing: .1em; }
.xf-note { font-size: 13px; color: var(--xf-muted); line-height: 1.7; }
.xf-note .xf-link { margin-left: .5em; }

/* ---- boxes / rows ---- */
.xf-box { position: relative; z-index: 1; padding: 32px; background: #222222; border: 1px solid var(--xf-line); } /* 帯が透けないよう不透明 */
.xf-box__title { font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.xf-rows { display: block; }
.xf-row {
  display: grid; grid-template-columns: minmax(140px, 36%) 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--xf-line);
}
.xf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.xf-row dt { font-size: 13px; color: var(--xf-muted); letter-spacing: .03em; }
.xf-row dd { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 1080px) {
  .xf-box { padding: 24px 20px; }
  .xf-box__title { font-size: 18px; }
  .xf-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ---- footer ---- */
.xf-footer { border-top: 1px solid var(--xf-line); padding: 64px 0 40px; }
.xf-footer__in {
  width: min(var(--xf-max), 100% - var(--xf-gutter) * 2); margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; align-items: start;
}
.xf-footer__logo { width: 140px; }
.xf-footer__tag { margin-top: 10px; font-weight: 200; font-size: 10px; letter-spacing: .2em; color: var(--xf-muted); }
.xf-footer__links { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-self: end; }
.xf-footer__links a { font-size: 13px; color: var(--xf-muted); transition: color .2s; }
.xf-footer__links a:hover, .xf-footer__links a:focus-visible { color: var(--xf-fg); }
.xf-footer__copy { grid-column: 1 / -1; margin-top: 24px; font-weight: 300; font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.55); }
@media (max-width: 1080px) {
  .xf-footer { padding: 40px 0 28px; }
  .xf-footer__in { grid-template-columns: 1fr; gap: 20px; }
  .xf-footer__links { justify-self: start; gap: 8px 20px; }
  .xf-footer__logo { width: 110px; }
}

/* ---- register: steps / form ---- */
.xf-register__body { display: grid; gap: 40px; }
.xf-steps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--xf-line); border: 1px solid var(--xf-line);
  counter-reset: none; list-style: none; padding: 0; margin: 0;
}
.xf-steps__item {
  position: relative; z-index: 1; padding: 24px 24px 22px; background: #181818;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: baseline;
  color: var(--xf-muted);
}
.xf-steps__no { grid-row: 1 / 3; font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: .04em; color: var(--xf-faint); }
.xf-steps__label { font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--xf-muted); }
.xf-steps__sub { font-size: 12px; }
.xf-steps__item.is-current { background: #212121; color: var(--xf-fg); }
.xf-steps__item.is-current .xf-steps__no { color: var(--xf-accent); }
.xf-steps__item.is-current .xf-steps__label { color: var(--xf-fg); }
.xf-steps__item.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--xf-accent); }
.xf-steps__item.is-done .xf-steps__no { color: var(--xf-fg); }
.xf-form { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; width: 100%; padding: 48px 40px; background: #222222; border: 1px solid var(--xf-line); }
.xf-form__head { margin-bottom: 28px; }
.xf-form__lead { margin-top: 14px; font-size: 14px; color: var(--xf-muted); overflow-wrap: anywhere; }
.xf-form__note { margin-top: 20px; font-size: 12px; color: var(--xf-muted); line-height: 1.7; }
.xf-form__empty { padding: 24px; border: 1px dashed rgba(255,255,255,.3); color: var(--xf-muted); font-size: 13px; text-align: center; }
/* Shopify Forms（アプリブロック）をXEEDトンマナへ寄せる。アプリ側の生成DOMに依存するため最小限 */
.xf-form__app { --xf-input-bg: rgba(255,255,255,.06); }
.xf-form__app input:not([type="checkbox"]):not([type="radio"]),
.xf-form__app select, .xf-form__app textarea {
  width: 100%; background: var(--xf-input-bg); color: var(--xf-fg);
  border: 1px solid var(--xf-line); border-radius: 0; padding: 12px 14px; font: inherit; font-size: 15px;
}
.xf-form__app input:focus-visible, .xf-form__app select:focus-visible, .xf-form__app textarea:focus-visible { outline: 2px solid var(--xf-accent); outline-offset: 0; border-color: var(--xf-accent); }
.xf-form__app label { font-size: 13px; color: var(--xf-muted); }
.xf-form__app button[type="submit"], .xf-form__app [type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  background: var(--xf-accent); color: #0E0E0E; border: 1px solid var(--xf-accent); border-radius: 0;
  font-family: var(--xf-ja); font-size: 14px; font-weight: 500; letter-spacing: .05em; cursor: pointer;
}
.xf-form__app button[type="submit"]:hover, .xf-form__app [type="submit"]:hover { background: var(--xf-accent-hover); border-color: var(--xf-accent-hover); }
@media (max-width: 1080px) {
  .xf-register__body { gap: 24px; }
  .xf-steps { grid-template-columns: 1fr; }
  .xf-steps__item { padding: 16px 18px; }
  .xf-steps__no { font-size: 24px; }
  .xf-form { padding: 28px 20px; }
}

/* ---- contact ---- */
.xf-contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.xf-contact__side { display: grid; gap: 24px; position: sticky; top: calc(var(--xf-header-h) + 24px); }
.xf-contact__intro { font-size: 15px; color: var(--xf-muted); }
.xf-contact__intro p + p { margin-top: 12px; }
.xf-contact__intro a { color: var(--xf-accent); text-decoration: underline; text-underline-offset: .2em; }
.xf-contact__facts { padding: 8px 24px; background: var(--xf-card); border: 1px solid var(--xf-line); }
.xf-contact__facts .xf-row:last-child { padding-bottom: 16px; }
.xf-contact__form { max-width: none; margin: 0; }
.xf-cf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.xf-field { display: grid; gap: 8px; }
.xf-field--full { grid-column: 1 / -1; }
.xf-field__label { font-size: 13px; color: var(--xf-muted); letter-spacing: .03em; display: flex; align-items: center; gap: 8px; }
.xf-field__req, .xf-field__opt { font-size: 10px; line-height: 1; padding: 3px 6px; letter-spacing: .08em; border: 1px solid currentColor; }
.xf-field__req { color: var(--xf-accent); }
.xf-field__opt { color: var(--xf-faint); }
.xf-field__input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: rgba(255,255,255,.06); color: var(--xf-fg);
  border: 1px solid var(--xf-line); border-radius: 0; font: inherit; font-size: 15px; line-height: 1.5;
  -webkit-appearance: none; appearance: none;
}
textarea.xf-field__input { min-height: 180px; resize: vertical; }
.xf-field__input::placeholder { color: var(--xf-faint); }
.xf-field__input:focus-visible { outline: 2px solid var(--xf-accent); outline-offset: 0; border-color: var(--xf-accent); }
.xf-field__select { position: relative; }
.xf-field__select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--xf-muted); border-bottom: 1.5px solid var(--xf-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.xf-field__select select { padding-right: 40px; }
.xf-field__select option { color: #0E0E0E; background: #fff; }
.xf-cf__actions { margin-top: 28px; }
.xf-cf__actions .xf-btn { min-width: 200px; }
.xf-cf__errors { margin-bottom: 24px; padding: 16px 20px; border: 1px solid #ff6b6b; color: #ffb3b3; font-size: 13px; }
.xf-cf__errors-title { font-weight: 700; margin-bottom: 6px; }
.xf-cf__errors ul { padding-left: 1.2em; list-style: disc; }
.xf-cf__success { text-align: center; padding: 24px 0; }
.xf-cf__success-bolt { width: 30px; height: 32px; margin: 0 auto 20px; color: var(--xf-accent); }
.xf-cf__success p { margin-top: 16px; font-size: 15px; color: var(--xf-muted); }
@media (max-width: 1080px) {
  .xf-contact__grid { grid-template-columns: 1fr; gap: 24px; }
  .xf-contact__side { position: static; }
  .xf-cf__grid { grid-template-columns: 1fr; gap: 16px; }
  .xf-cf__actions .xf-btn { width: 100%; }
}

/* ==========================================================================
   TOP（Figma 89:270）
   ========================================================================== */
.xf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero ---- */
.xf-hero { position: relative; padding: 48px 0 165px; }
.xf-hero__band {
  position: absolute; z-index: 0; left: 50%; top: 530px; width: 4400px; height: 320px;
  background: var(--xf-accent); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none;
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); /* 左下が太く右上へ細く。超ワイド画面でも端が見えない長さ */
  /* Figma Frame 63 実測: 右エッジ x+y=1502 / 左エッジ x+y=1138（ページ座標）→ 中心線 x+y=1320、45°、厚み257 */
}
.xf-hero__in { position: relative; z-index: 1; width: min(1194px, 100%); margin-inline: auto; }
.xf-hero__brand { text-align: center; }
/* ロゴ規定の横置き型（Primary）をそのままの比率で置く。576x230 基準の % 配置 */
.xf-hero__lockup { position: relative; width: min(600px, 86%); aspect-ratio: 576 / 230; margin-inline: auto; }
.xf-hero__lk { position: absolute; height: auto; }
.xf-hero__lk--bolt { left: 0; top: 0; width: 38.28%; height: 100%; object-fit: contain; object-position: left top; }
.xf-hero__lk--wm { left: 43.49%; top: 20.26%; width: 56.50%; }
.xf-hero__sub { margin-top: 30px; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: .4em; text-transform: uppercase; }
.xf-hero__photo { position: relative; margin-top: -5px; aspect-ratio: 1192.67 / 688; }
.xf-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xf-hero__text { position: relative; width: min(981px, 100%); margin: -139px auto 0; text-align: center; }
.xf-hero__date { font-weight: 800; font-size: 160px; line-height: 1; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.4); }
.xf-hero__copy { margin-top: 9px; font-size: 34px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.xf-hero__lead { margin-top: 18px; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.xf-hero__stamp {
  position: absolute; left: 93.05%; top: 128px; transform: translate(-50%, -50%) rotate(-13deg);
  font-family: "Mr Dafoe", "Brush Script MT", cursive; font-weight: 400; font-size: 100px; line-height: 1;
  color: var(--xf-accent); white-space: nowrap; font-feature-settings: "liga" 0; pointer-events: none;
}
@media (max-width: 1080px) {
  .xf-hero { padding: 28px 0 64px; }
  .xf-hero__band { top: 44%; width: 2400px; height: clamp(96px, 30vw, 280px); } /* SPは集合写真の背後を斜めに抜ける（テキスト帯は黒のまま） */
  .xf-hero__lockup { width: min(74vw, 460px); } /* 左右に余白を残す。iPad等のタブレット幅で肥大化しないよう上限 */
  .xf-hero__sub { margin-top: 18px; font-size: 12px; letter-spacing: .38em; }
  .xf-hero__photo { margin-top: 24px; aspect-ratio: 16 / 9; }
  /* SPもPCと同じ構成: 日付の右に Open! が少し重なる／コピーは日付直下／リードはその下 */
  .xf-hero__text { margin-top: -6vw; padding-inline: 20px; } /* PC同様、日付を写真の足元に少し重ねる */
  .xf-hero__date { font-size: 13vw; }
  .xf-hero__copy { font-size: 20px; margin-top: 6px; }
  .xf-hero__lead { font-size: 13px; margin-top: 12px; }
  /* SPは日付(13vw・line-height 1)の右下に重ねる。top=日付下端付近、left は右端で切れない位置。コピー行には掛けない */
  .xf-hero__stamp { font-size: 7.6vw; left: 79%; top: 7vw; transform: translate(-50%, -50%) rotate(-13deg); }
  .xf-js .xf-hero.is-ready .xf-hero__stamp { transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
}

/* ---- contents (coming soon) — bento 510|180|510 ---- */
.xf-coming { position: relative; z-index: 1; padding: 0 0 120px; }
.xf-coming__grid {
  display: grid; grid-template-columns: 510fr 180fr 510fr; grid-template-rows: 420px 208px 460px 240px;
  gap: 40px; align-items: stretch;
}
.xf-coming__card {
  position: relative; overflow: hidden; padding: 40px 20px; background: #252525; /* white5.5% over #181818 を不透明化 */
  border: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; isolation: isolate;
}
.xf-coming__card--movie  { grid-column: 1 / 3; grid-row: 1; }
.xf-coming__card--talk   { grid-column: 3; grid-row: 1 / 3; margin-top: 144px; }
.xf-coming__card--photo  { grid-column: 1; grid-row: 2 / 4; }
.xf-coming__card--goods  { grid-column: 2 / 4; grid-row: 3; }
.xf-coming__card--ticket { grid-column: 1 / 4; grid-row: 4; }
.xf-coming__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; max-width: 100%; }
.xf-coming__title { font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.xf-coming__desc { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.xf-coming__note {
  position: absolute; z-index: 2; right: 20px; top: 24px; font-weight: 200; font-size: 11px; letter-spacing: .2em; color: var(--xf-muted);
}
.xf-coming__card--ticket .xf-coming__text { max-width: 560px; }
/* 空きセル（col2 row2）にさりげなく白いボルト */
.xf-coming__deco { grid-column: 2; grid-row: 2; display: grid; place-items: center; color: rgba(255,255,255,.14); }
.xf-coming__deco-bolt { width: 96px; height: auto; animation: xf-deco 9s ease-in-out infinite; }
@keyframes xf-deco { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@media (max-width: 1080px) {
  .xf-coming { padding-bottom: 96px; }
  .xf-coming__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .xf-coming__card { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; padding: 24px 20px 28px; min-height: 0; }
  .xf-coming__deco { display: none; }
  .xf-coming__note { position: static; order: -1; margin-bottom: 14px; }
  .xf-coming__title { font-size: 36px; }
  .xf-coming__desc { font-size: 14px; letter-spacing: 0; }
}

/* ---- previews (中身の小さなプレビュー。全て transform/opacity のみ) ---- */
.xf-pv { position: absolute; z-index: 1; pointer-events: none; }
[data-pv]:not(.is-inview) .xf-pv *, [data-pv]:not(.is-inview) .xf-pv { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .xf-pv, .xf-pv * { animation: none !important; } }

/* MOVIE: 右下にミニプレイヤー。スチル3枚がクロスフェード、進捗バーとキャプションが同期 */
.xf-pv-movie { left: 20px; right: 20px; bottom: 20px; height: 216px; }
.xf-pv-movie__frame { position: absolute; right: 0; bottom: 0; width: 384px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--xf-line); }
.xf-pv-movie__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: xf-still 15s infinite; transform: scale(1.02); }
.xf-pv-movie__still:nth-child(1) { animation-delay: 0s; }
.xf-pv-movie__still:nth-child(2) { animation-delay: 5s; }
.xf-pv-movie__still:nth-child(3) { animation-delay: 10s; }
@keyframes xf-still { 0% { opacity: 0; transform: scale(1.06); } 5% { opacity: 1; } 33% { opacity: 1; transform: scale(1.0); } 38% { opacity: 0; } 100% { opacity: 0; } }
.xf-pv-movie__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); display: grid; place-items: center; }
.xf-pv-movie__play::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); animation: xf-ring 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.xf-pv-movie__play i { width: 0; height: 0; border-left: 14px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
@keyframes xf-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.xf-pv-movie__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 12px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.xf-pv-movie__caps { position: relative; display: block; height: 12px; margin-bottom: 8px; font-size: 10px; letter-spacing: .12em; }
.xf-pv-movie__caps b { position: absolute; left: 0; top: 0; font-weight: 200; opacity: 0; animation: xf-cap 15s infinite; }
.xf-pv-movie__caps b:nth-child(2) { animation-delay: 5s; }
.xf-pv-movie__caps b:nth-child(3) { animation-delay: 10s; }
@keyframes xf-cap { 0%,3% { opacity: 0; transform: translateY(4px); } 8%,30% { opacity: 1; transform: none; } 34%,100% { opacity: 0; } }
.xf-pv-movie__track { display: block; height: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.xf-pv-movie__track i { display: block; height: 100%; width: 100%; background: var(--xf-accent); transform-origin: left; animation: xf-prog 5s linear infinite; }
@keyframes xf-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* MOVIE: 左下のプレイリスト（スチルの切替と同期してハイライト） */
.xf-pv-movie__list { position: absolute; left: 0; bottom: 6px; width: 250px; display: grid; gap: 0; }
.xf-pv-movie__list li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--xf-line); font-size: 11px; letter-spacing: .1em; color: var(--xf-muted); animation: xf-pl 15s infinite; }
.xf-pv-movie__list li:nth-child(2) { animation-delay: 5s; }
.xf-pv-movie__list li:nth-child(3) { animation-delay: 10s; }
.xf-pv-movie__list li::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 3px; opacity: .6; }
.xf-pv-movie__list b { font-weight: 800; }
.xf-pv-movie__list small { font-weight: 300; font-size: 10px; }
@keyframes xf-pl { 0%,2% { color: var(--xf-muted); } 6%,30% { color: var(--xf-fg); } 36%,100% { color: var(--xf-muted); } }
@media (max-width: 1080px) { .xf-pv-movie__list { display: none; } }

/* TALK ROOM: 下半分にタイムライン。縦マーキー＋末尾は入力中ドット */
.xf-pv-talk { left: 0; right: 0; bottom: 0; height: 236px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 62%, transparent 92%); }
.xf-pv-talk .xf-pv-talk__feed { list-style: none; margin: 0; padding: 0 28px 0 32px; animation: xf-feed 22s linear infinite; } /* .xf-body ul より詳細度を上げる */
@keyframes xf-feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.xf-pv-talk__feed li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--xf-line); align-items: start; }
.xf-pv-talk__feed img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #222; }
.xf-pv-talk__feed b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.xf-pv-talk__feed small { margin-left: 8px; font-weight: 400; font-size: 10px; color: rgba(255,255,255,.78); }
.xf-pv-talk__feed p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.85); }
.xf-pv-talk__feed .is-typing p { display: inline-flex; gap: 4px; padding: 6px 10px; background: rgba(255,255,255,.08); }
.xf-pv-talk__feed .is-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--xf-accent); animation: xf-dot 1.2s ease-in-out infinite; }
.xf-pv-talk__feed .is-typing i:nth-child(2) { animation-delay: .15s; }
.xf-pv-talk__feed .is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes xf-dot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* PHOTO GALLERY: 3列のサムネが速度違いで縦に流れる */
.xf-pv-photo { left: 20px; right: 20px; bottom: 20px; height: 380px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 88%, transparent); }
.xf-pv-photo__col { display: grid; gap: 8px; align-content: start; animation: xf-col 26s linear infinite; }
.xf-pv-photo__col:nth-child(2) { animation-duration: 34s; animation-direction: reverse; }
.xf-pv-photo__col:nth-child(3) { animation-duration: 30s; }
@keyframes xf-col { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.xf-pv-photo__it { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #212121; border: 1px solid rgba(255,255,255,.05); }
.xf-pv-photo__it img { width: 100%; height: 100%; object-fit: cover; }

/* GOODS: Tシャツ(表裏フリップ)・リストバンド(3Dリング回転)・モバイルバッテリー・下端マーキー */
.xf-pv-goods { inset: 0; perspective: 1200px; }
.xf-pv-goods__tee { position: absolute; right: 150px; top: 44px; width: 260px; aspect-ratio: 361 / 309; perspective: 900px; z-index: 1; }
.xf-pv-goods__tee-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: xf-tee-flip 9s cubic-bezier(.7,0,.3,1) infinite; }
.xf-pv-goods__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.xf-pv-goods__face--back { transform: rotateY(180deg); }
@keyframes xf-tee-flip { 0%, 38% { transform: rotateY(0deg) translateY(0); } 50%, 88% { transform: rotateY(180deg) translateY(-6px); } 100% { transform: rotateY(360deg) translateY(0); } }
.xf-pv-goods__shadow { position: absolute; left: 12%; right: 12%; bottom: -26px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); animation: xf-shadow 9s ease-in-out infinite; }
@keyframes xf-shadow { 0%,38%,100% { transform: scale(1); opacity: .9; } 50%,88% { transform: scale(.9); opacity: .6; } }
/* ring: 48枚の帯片を円筒状に。半径 --r、1片の幅 = 2πr/48 */
.xf-pv-goods__band { position: absolute; right: 300px; top: 216px; width: 220px; height: 160px; --r: 100px; --seg: 8.73px; --ov: 2.4px; --bh: 50px; perspective: 1400px; z-index: 2; } /* --seg は必ず 2π·r/72（r=100→8.73） */
/* 横から見る（俯角22°）: 手前の外壁が正面を向くのでプリントがそのまま読め、回転で文字が流れる */
.xf-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(0deg); animation: xf-ring-spin 16s linear infinite; }
@keyframes xf-ring-spin { from { transform: rotateX(-16deg) rotateY(0deg); } to { transform: rotateX(-16deg) rotateY(-360deg); } }
.xf-ring i { position: absolute; left: calc(var(--seg) / -2 - var(--ov) / 2); top: calc(var(--bh) / -2); width: calc(var(--seg) + var(--ov)); height: var(--bh); outline: 1px solid transparent; /* Safariの継ぎ目対策: 各片を --ov 分重ねる */
  background-image: var(--band); background-size: calc(var(--seg) * 72) var(--bh); background-position: calc(var(--i) * var(--seg) * -1) 0; background-repeat: repeat-x;
  transform: rotateY(calc(var(--i) * 5deg)) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
/* 内側は無地（プリントは表面だけ）: 裏返した無地の面を重ねる */
.xf-ring i::before { content: ""; position: absolute; inset: 0 -1px; background: #1AA8C4; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* 片ごとの陰影(::after)は重ね代で二重に乗って縦縞になるため置かない */
.xf-pv-goods__band-shadow { position: absolute; left: 4%; right: 4%; bottom: -14px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.xf-pv-goods__battery { position: absolute; right: 24px; bottom: 60px; width: 210px; height: auto; z-index: 3; animation: xf-float-b 7s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes xf-float-b { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
.xf-pv-goods__marquee { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 0; border-top: 1px solid var(--xf-line); white-space: nowrap; overflow: hidden; display: flex; }
.xf-pv-goods__marquee span { display: inline-block; font-weight: 200; font-size: 12px; letter-spacing: .2em; color: var(--xf-muted); animation: xf-marq 28s linear infinite; }
@keyframes xf-marq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* GOODS カードは中身が多いので少し高く */
.xf-coming__card--goods .xf-coming__text { max-width: 310px; }

/* TICKET: 右にチケット半券。ROUND番号がカウントアップ、バーコードをスキャン光が走る */
.xf-pv-ticket { right: 24px; bottom: 20px; width: 560px; height: 150px; }
.xf-pv-ticket__stub { position: relative; display: grid; grid-template-columns: 1fr 200px; height: 100%; background: #181818; border: 1px solid rgba(255,255,255,.2); }
.xf-pv-ticket__stub::before, .xf-pv-ticket__stub::after { content: ""; position: absolute; left: calc(100% - 200px - 9px); width: 18px; height: 18px; border-radius: 50%; background: #212121; border: 1px solid rgba(255,255,255,.2); }
.xf-pv-ticket__stub::before { top: -10px; clip-path: inset(50% 0 0 0); }
.xf-pv-ticket__stub::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.xf-pv-ticket__l { padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px dashed rgba(255,255,255,.25); }
.xf-pv-ticket__k { font-weight: 200; font-size: 10px; letter-spacing: .2em; color: var(--xf-muted); }
.xf-pv-ticket__v { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: .04em; display: flex; align-items: flex-start; } /* 数字ボックスはoverflow hiddenで基線が底辺になるので、上端揃えで基線を合わせる */
.xf-pv-ticket__num { position: relative; display: inline-block; width: 1.1em; height: 1em; overflow: hidden; color: var(--xf-accent); }
.xf-pv-ticket__num i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; transform: translateY(100%); animation: xf-num 8s cubic-bezier(.16,1,.3,1) infinite; }
.xf-pv-ticket__num i:nth-child(2) { animation-delay: 2s; } .xf-pv-ticket__num i:nth-child(3) { animation-delay: 4s; } .xf-pv-ticket__num i:nth-child(4) { animation-delay: 6s; }
@keyframes xf-num { 0% { opacity: 0; transform: translateY(100%); } 6%,22% { opacity: 1; transform: translateY(0); } 28%,100% { opacity: 0; transform: translateY(-100%); } }
.xf-pv-ticket__r { position: relative; padding: 20px; display: grid; place-items: center; overflow: hidden; }
.xf-pv-ticket__code { display: flex; gap: 3px; height: 64px; align-items: stretch; }
.xf-pv-ticket__code i { width: 2px; background: #fff; }
.xf-pv-ticket__code i:nth-child(3n) { width: 4px; } .xf-pv-ticket__code i:nth-child(5n) { width: 1px; opacity: .7; } .xf-pv-ticket__code i:nth-child(7n) { width: 5px; }
.xf-pv-ticket__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 34px; background: linear-gradient(to right, transparent, rgba(18,184,217,.55), transparent); animation: xf-scan 2.6s ease-in-out infinite; }
@keyframes xf-scan { 0% { transform: translateX(-40px); } 50% { transform: translateX(200px); } 100% { transform: translateX(-40px); } }

@media (max-width: 1080px) {
  .xf-coming__card--movie { min-height: 0; padding-bottom: 20px; }
  .xf-pv-movie { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: auto; margin-top: 24px; }
  .xf-pv-movie__frame { position: relative; width: 100%; }
  .xf-coming__card--talk .xf-coming__text { margin-bottom: 250px; }
  .xf-pv-talk { height: 236px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 74%, transparent 94%); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 74%, transparent 94%); }
  .xf-coming__card--photo .xf-coming__text { margin-bottom: 240px; }
  .xf-pv-photo { height: 240px; }
  .xf-coming__card--goods { padding-bottom: 56px; }
  .xf-coming__card--goods .xf-coming__text { margin-bottom: 260px; max-width: none; }
  .xf-pv-goods__tee { width: 180px; right: 16px; top: auto; bottom: 130px; }
  .xf-pv-goods__band { right: 130px; left: auto; top: auto; bottom: 96px; width: 150px; height: 110px; --r: 68px; --seg: 5.93px; --ov: 1.2px; --bh: 34px; } /* 2π·68/72=5.93 */
  .xf-pv-goods__battery { left: auto; right: 16px; bottom: 56px; width: 140px; }

  .xf-coming__card--ticket .xf-coming__text { margin-bottom: 150px; }
  .xf-pv-ticket { position: absolute; transform: none; top: auto; left: 20px; right: 20px; bottom: 20px; width: auto; height: 130px; overflow: hidden; }
  .xf-pv-ticket__stub { grid-template-columns: minmax(0, 1fr) 104px; }
  .xf-pv-ticket__stub::before, .xf-pv-ticket__stub::after { left: calc(100% - 104px - 9px); }
  .xf-pv-ticket__l { padding: 14px 14px; min-width: 0; }
  .xf-pv-ticket__k { font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
  .xf-pv-ticket__v { font-size: 24px; }
  .xf-pv-ticket__code { height: 44px; gap: 2px; }
  .xf-pv-ticket__code i:nth-child(n+19) { display: none; }
  .xf-pv-ticket__r { padding: 10px; }
}

/* ---- members ---- */
.xf-members { position: relative; overflow: clip; padding: 120px 0 160px; }
.xf-members__band {
  position: absolute; z-index: 0; inset: 0; background: var(--xf-accent); pointer-events: none;
  clip-path: polygon(0 12.92vw, 0 20.83vw, 100% 82.78vw, 100% 66.39vw); /* MEMBERSだけFigmaのくさび形（45°統一の例外） */
}
.xf-members > .xf-in { position: relative; z-index: 1; }
.xf-members__head { text-align: center; }
.xf-members__title {
  font-weight: 800; font-size: 90px; line-height: 1; letter-spacing: .53em; text-indent: .53em; text-transform: uppercase; white-space: nowrap;
}
.xf-members__count { display: flex; justify-content: center; align-items: stretch; gap: 25px; margin-top: 20px; font-size: 16px; line-height: 1; text-transform: uppercase; }
.xf-members__count span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0; }
.xf-members__count b { font-weight: 800; }
.xf-members__count b.light { font-weight: 200; }
.xf-members__count .sep { width: 1px; padding: 0; background: rgba(255,255,255,.4); }
.xf-members__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
.xf-mem {
  position: relative; aspect-ratio: 426.67 / 541.35; overflow: hidden;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(80,152,167,.07));
  border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.xf-mem:nth-child(3n) { border-right: 0; }
.xf-mem:nth-last-child(-n+3) { border-bottom: 0; }
.xf-mem__photo {
  position: absolute; left: var(--pl); top: var(--pt); width: var(--pw); aspect-ratio: var(--pa); overflow: hidden; pointer-events: none;
}
.xf-mem__photo img {
  position: absolute; left: var(--il); top: 0; width: var(--iw); height: var(--ih); max-width: none; object-fit: cover; object-position: top;
}
.xf-mem__sig { position: absolute; top: var(--st); right: var(--sr); bottom: var(--sb); left: var(--sl); pointer-events: none; }
.xf-mem__sig-img {
  position: absolute; left: 50%; top: 50%; width: var(--sw); height: var(--sh); max-width: none;
  transform: translate(-50%, -50%) rotate(var(--srot));
}
.xf-mem__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1080px) {
  .xf-members { padding: 72px 0 80px; }
  .xf-members__band { clip-path: polygon(0 20vw, 0 32vw, 100% 120vw, 100% 96vw); }
  .xf-members__title { font-size: clamp(26px, 8.6vw, 40px); letter-spacing: .26em; text-indent: .26em; }
  .xf-members__count { font-size: 13px; }
  .xf-members__grid { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .xf-mem:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.08); }
  .xf-mem:nth-child(2n) { border-right: 0; }
  .xf-mem:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .xf-mem:nth-last-child(-n+2) { border-bottom: 0; }
  .xf-mem:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; justify-self: start; border-right: 1px solid rgba(255,255,255,.08); }
}

/* ---- cta ---- */
.xf-cta { border-top: 1px solid var(--xf-line); padding: 120px 0; background: radial-gradient(60% 60% at 50% 0%, #202020 0%, #181818 70%); }
.xf-cta__in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.xf-cta__title { font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.xf-cta__copy { margin-top: 28px; font-size: 17px; color: var(--xf-muted); }
.xf-cta__actions { display: grid; gap: 14px; justify-items: end; }
.xf-btn--lg { min-height: 56px; padding: 0 40px; font-size: 15px; }
.xf-cta__login { font-size: 13px; color: var(--xf-muted); }
.xf-cta__login:hover { color: var(--xf-fg); }
@media (max-width: 1080px) {
  .xf-cta { padding: 64px 0; }
  .xf-cta__in { grid-template-columns: 1fr; gap: 24px; }
  .xf-cta__title { font-size: 32px; }
  .xf-cta__copy { font-size: 14px; margin-top: 20px; }
  .xf-cta__actions { justify-items: stretch; }
}

/* ==========================================================================
   Motion（JS有効時のみ: html.xf-js）。イージングは cubic-bezier(.16,1,.3,1) 統一
   ========================================================================== */
:root { --xf-ease: cubic-bezier(.16, 1, .3, 1); --xf-delay: 0ms; }
.xf-js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--xf-ease) var(--xf-delay), transform 1.1s var(--xf-ease) var(--xf-delay); will-change: opacity, transform; }
.xf-js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
.xf-js [data-reveal="fade"] { transform: none; }
/* clip はIOの交差判定に効いてしまう（clip-pathで面積0→交差しない）ので、親でなく子に掛ける */
.xf-js [data-reveal="clip"] { opacity: 1; transform: none; transition: none; }
.xf-js [data-reveal="clip"] > * { opacity: 0; transform: translate3d(0, 12px, 0); clip-path: inset(0 0 100% 0); transition: opacity .9s var(--xf-ease) var(--xf-delay), transform 1.1s var(--xf-ease) var(--xf-delay), clip-path 1.1s var(--xf-ease) var(--xf-delay); }
.xf-js [data-reveal="clip"] > * + * { transition-delay: calc(var(--xf-delay) + .12s); }
.xf-js [data-reveal="clip"].is-in > * { opacity: 1; transform: none; clip-path: inset(-10% 0 -10% 0); }
.xf-js [data-reveal="scale"] { transform: scale(.96); }

/* hero intro */
/* 帯は左下→右上へ描かれる（clip-pathを左端で潰した状態から広げる） */
.xf-js .xf-hero__band { transform: translate3d(-50%, calc(-50% + var(--xf-band-y, 0px)), 0) rotate(-45deg); clip-path: polygon(0 0, 0 40%, 0 60%, 0 100%); transition: clip-path 1.8s cubic-bezier(.16,1,.3,1) .1s; }
.xf-js .xf-hero.is-ready .xf-hero__band { clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }
.xf-js .xf-hero__sub, .xf-js .xf-hero__photo img, .xf-js .xf-hero__date, .xf-js .xf-hero__copy, .xf-js .xf-hero__lead, .xf-js .xf-hero__stamp {
  opacity: 0; transition: opacity 1s var(--xf-ease), transform 1.3s var(--xf-ease), clip-path 1.2s var(--xf-ease);
}
.xf-js .xf-hero__lockup { opacity: 1; transform: none; transition: none; }
.xf-js .xf-hero__lk { opacity: 0; transition: opacity .9s var(--xf-ease), transform 1.3s var(--xf-ease); }
.xf-js .xf-hero__lk--wm { transform: translate3d(40px, 0, 0); transition-delay: .35s; }
.xf-js .xf-hero__lk--bolt { transform: scale(.6) rotate(-25deg); transition-delay: .1s; }
.xf-js .xf-hero.is-ready .xf-hero__lk { opacity: 1; transform: none; }
.xf-js .xf-hero__sub { transform: translate3d(0, 10px, 0); transition-delay: .35s; }
.xf-js .xf-hero__photo img { transform: scale(1.06); transition-delay: .25s; transition-duration: 1s, 2.2s; }
.xf-js .xf-hero__date { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); transition-delay: .7s; }
.xf-js .xf-hero__copy { transform: translate3d(0, 14px, 0); transition-delay: .95s; }
.xf-js .xf-hero__lead { transform: translate3d(0, 10px, 0); transition-delay: 1.05s; }
.xf-js .xf-hero__stamp { transform: translate(-50%, -50%) rotate(-24deg) scale(.85); transition-delay: 1.25s; }
.xf-js .xf-hero.is-ready :is(.xf-hero__sub, .xf-hero__copy, .xf-hero__lead) { opacity: 1; transform: none; }
.xf-js .xf-hero.is-kv .xf-hero__photo img { opacity: 1; transform: scale(1); }
.xf-js .xf-hero.is-ready .xf-hero__date { opacity: 1; clip-path: inset(-25% -12% -25% -12%); transform: none; } /* 影が切れないよう左右にも余白 */
.xf-js .xf-hero.is-ready .xf-hero__stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
/* parallax: JSが --sy を書き、translate で合成する（transformはintroアニメが使うので競合しない）。
   全ブラウザで動作。ポインタ追従の --px/--py とも合成される。 */
.xf-hero__brand, .xf-hero__photo, .xf-hero__text, .xf-hero__stamp {
  translate: var(--px, 0px) calc(var(--py, 0px) + var(--sy, 0px));
}

/* header scrolled */
.xf-header { transition: box-shadow .4s ease; }
.xf-header.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.08); }

/* members: 帯は入場時に左から描画、タイルは stagger、hover で写真がわずかに浮く */
.xf-js .xf-members__band { clip-path: polygon(0 12.92vw, 0 20.83vw, 0 20.83vw, 0 12.92vw); transition: clip-path 1.6s var(--xf-ease) .1s; }
.xf-js .xf-members.is-inview .xf-members__band { clip-path: polygon(0 12.92vw, 0 20.83vw, 100% 82.78vw, 100% 66.39vw); }
@media (max-width: 1080px) {
  .xf-js .xf-members__band { clip-path: polygon(0 20vw, 0 32vw, 0 32vw, 0 20vw); }
  .xf-js .xf-members.is-inview .xf-members__band { clip-path: polygon(0 20vw, 0 32vw, 100% 120vw, 100% 96vw); }
}
.xf-mem__photo, .xf-mem__sig { transition: transform .9s var(--xf-ease); }
@media (hover: hover) {
  .xf-mem:hover .xf-mem__photo { transform: translate3d(0, -6px, 0); }
  .xf-mem:hover .xf-mem__sig { transform: translate3d(0, 4px, 0); }
}

/* ---- SP menu ---- */
.xf-header__menu { display: none; }
.xf-menu { position: fixed; inset: 0; z-index: 49; background: rgba(24,24,24,.98); padding: calc(var(--xf-header-h) + 24px) 20px 40px; opacity: 0; transition: opacity .35s ease; }
.xf-menu.is-open { opacity: 1; }
.xf-menu[hidden] { display: none; }
.xf-menu__nav { display: grid; gap: 4px; }
.xf-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--xf-line); font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--xf-fg); }
.xf-menu__link::after { content: "→"; font-weight: 200; opacity: .5; }
.xf-menu__cta { display: grid; gap: 12px; margin-top: 32px; }
.xf-menu__cta .xf-btn { width: 100%; min-height: 52px; }
.xf-menu__sub { text-align: center; font-size: 13px; color: var(--xf-muted); }
.xf-menu-open body { overflow: hidden; }
@media (max-width: 1080px) {
  .xf-header__menu { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; background: none; border: 0; padding: 0; color: var(--xf-fg); cursor: pointer; }
  .xf-header__menu i { position: relative; display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s var(--xf-ease), background .2s; }
  .xf-header__menu i::before, .xf-header__menu i::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s var(--xf-ease), top .35s var(--xf-ease); }
  .xf-header__menu i::before { top: -6px; } .xf-header__menu i::after { top: 6px; }
  .xf-header__menu[aria-expanded="true"] i { background: transparent; }
  .xf-header__menu[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
  .xf-header__menu[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }
}

/* ---- members: 背番号・ホバー情報・プロフィールモーダル ---- */
.xf-mem__btn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.xf-mem__btn:focus-visible { outline: 2px solid var(--xf-accent); outline-offset: -2px; }
.xf-mem__no { position: absolute; left: 16px; top: 14px; font-weight: 800; font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.55); transition: color .4s ease; }
.xf-mem__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px;
  background: linear-gradient(to top, rgba(24,24,24,.85), rgba(24,24,24,0)); display: grid; gap: 4px;
  opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .5s var(--xf-ease), transform .6s var(--xf-ease);
}
.xf-mem__meta b { font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.xf-mem__meta small { font-weight: 300; font-size: 10px; letter-spacing: .16em; color: rgba(255,255,255,.75); text-transform: uppercase; }
@media (hover: hover) {
  .xf-mem:hover .xf-mem__meta, .xf-mem__btn:focus-visible .xf-mem__meta { opacity: 1; transform: none; }
  .xf-mem:hover .xf-mem__no { color: var(--xf-accent); }
}
@media (max-width: 1080px) {
  .xf-mem__photo { left: var(--pl-sp, var(--pl)); top: var(--pt-sp, var(--pt)); width: var(--pw-sp, var(--pw)); }
  .xf-mem__photo img { left: 0; width: 100%; height: 100%; }
  .xf-mem__no { left: 10px; top: 8px; font-size: 12px; }
  .xf-mem__meta { display: none; }
}
.xf-mdl { position: fixed; inset: 0; z-index: 60; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--xf-fg); display: none; place-items: center; }
.xf-mdl[open] { display: grid; }
.xf-mdl::backdrop { background: rgba(0,0,0,.72); }
.xf-mdl__panel { position: relative; width: min(1180px, 100%, calc((100vh - 48px) * 1.5526)); max-height: min(760px, 100%); display: grid; grid-template-columns: 507fr 493fr; align-items: stretch; background: #222222; border: 1px solid var(--xf-line); overflow: hidden; transform: translate3d(0, 16px, 0); opacity: 0; transition: transform .6s var(--xf-ease), opacity .4s ease; }
.xf-mdl.is-open .xf-mdl__panel { transform: none; opacity: 1; }
.xf-mdl__photo { position: relative; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(80,152,167,.07)), #222222; overflow: hidden; aspect-ratio: 426.67 / 541.35; align-self: center; }
/* 一覧タイルと同じ配置ロジック（--pl/--pw/--pt/--pa/--il/--iw/--ih をJSがタイルから写す） */
.xf-mdl__ph { position: absolute; left: var(--pl); top: var(--pt); width: var(--pw); aspect-ratio: var(--pa); overflow: hidden; }
.xf-mdl__ph img { position: absolute; left: var(--il); top: 0; width: var(--iw); height: var(--ih); max-width: none; object-fit: cover; object-position: top; }
.xf-mdl__body { padding: 40px 88px 36px 40px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.xf-mdl__no { font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--xf-accent); }
.xf-mdl__no span:not(:empty)::before { content: "#"; }
.xf-mdl__name { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.xf-mdl__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xf-mdl__tags span:empty { display: none; }
.xf-mdl__tags span { padding: 5px 10px; border: 1px solid rgba(255,255,255,.3); font-weight: 200; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.xf-mdl__facts { display: flex; gap: 12px; margin: 4px 0 0; font-size: 13px; }
.xf-mdl__facts dt { color: var(--xf-muted); }
.xf-mdl__facts dd { margin: 0; font-weight: 500; }
.xf-mdl__profile { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.85); }
.xf-mdl__sns { display: flex; gap: 20px; margin-top: auto; padding-top: 12px; font-size: 13px; }
.xf-mdl__sns a[hidden] { display: none; }
.xf-mdl__close { position: absolute; right: 12px; top: 12px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(24,24,24,.6); border: 1px solid var(--xf-line); color: var(--xf-fg); cursor: pointer; }
.xf-mdl__close i { position: relative; display: block; width: 18px; height: 1.5px; background: transparent; }
.xf-mdl__close i::before, .xf-mdl__close i::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1.5px; background: currentColor; }
.xf-mdl__close i::before { transform: rotate(45deg); } .xf-mdl__close i::after { transform: rotate(-45deg); }
.xf-mdl__close:hover { border-color: var(--xf-fg); }
/* モーダル前後ナビ */
.xf-mdl__arrow { position: absolute; top: 50%; z-index: 6; width: 48px; height: 64px; margin-top: -32px; display: grid; place-items: center; background: rgba(24,24,24,.6); border: 1px solid var(--xf-line); color: var(--xf-fg); cursor: pointer; transition: border-color .3s, background .3s; }
.xf-mdl__arrow--prev { left: 0; border-left: 0; } .xf-mdl__arrow--next { right: 0; border-right: 0; }
.xf-mdl__arrow span { width: 12px; height: 12px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.xf-mdl__arrow--prev span { transform: rotate(-135deg) translate(-2px, 2px); } .xf-mdl__arrow--next span { transform: rotate(45deg) translate(-2px, 2px); }
.xf-mdl__arrow:hover { background: rgba(18,184,217,.9); border-color: transparent; color: #0E0E0E; }
.xf-mdl__count { position: absolute; left: 20px; bottom: 16px; z-index: 6; font-weight: 800; font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.xf-mdl__photo img, .xf-mdl__body > * { transition: opacity .22s ease, transform .3s var(--xf-ease); }
.xf-mdl.is-out-left .xf-mdl__body > *, .xf-mdl.is-out-left .xf-mdl__photo img { opacity: 0; transform: translate3d(-16px, 0, 0); }
.xf-mdl.is-out-right .xf-mdl__body > *, .xf-mdl.is-out-right .xf-mdl__photo img { opacity: 0; transform: translate3d(16px, 0, 0); }
.xf-mdl.is-in-right .xf-mdl__body > *, .xf-mdl.is-in-right .xf-mdl__photo img { opacity: 0; transform: translate3d(16px, 0, 0); transition: none; }
.xf-mdl.is-in-left .xf-mdl__body > *, .xf-mdl.is-in-left .xf-mdl__photo img { opacity: 0; transform: translate3d(-16px, 0, 0); transition: none; }
@media (max-width: 1080px) {
  .xf-mdl { padding: 0; }
  .xf-mdl__arrow { position: fixed; top: 22vh; width: 40px; height: 56px; margin-top: -28px; }
  .xf-mdl__count { position: fixed; left: 16px; right: auto; top: 22px; bottom: auto; }
  .xf-mdl__close { position: fixed; }
  /* SP: 写真は一覧と同じ比率で全幅、下にテキストが少し覗く。スクロールすると写真は奥へ（縮小+ぼかし+暗く）、
     テキストが写真の上をモーダル全体を使って流れる（--p は JS がスクロール量から 0→1 で更新） */
  .xf-mdl__panel { display: block; width: 100%; height: 100%; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* Safari対策: sticky要素自体には filter/transform を掛けず（レイヤー順が壊れて前面に出る）、内側の写真ボックスに掛ける。本文は独自レイヤーで確実に上へ */
  .xf-mdl__photo { position: sticky; top: 0; z-index: 0; width: 100%; aspect-ratio: 426.67 / 541.35; height: auto; align-self: auto; isolation: isolate; }
  /* モーダルはSPでもPCと同じトリミング（一覧タイルのSP用顔寄せは使わない） */
  .xf-mdl__ph { left: var(--pl); top: var(--pt); width: var(--pw);
    transform: scale(calc(1 - .08 * var(--p, 0))); transform-origin: 50% 35%;
    filter: blur(calc(14px * var(--p, 0))) brightness(calc(1 - .55 * var(--p, 0))); }
  .xf-mdl__ph img { left: var(--il); width: var(--iw); height: var(--ih); }
  .xf-mdl__body { position: relative; z-index: 2; margin-top: -24vh; min-height: 100%; padding: 96px 20px 56px; overflow: visible; transform: translateZ(0);
    background: linear-gradient(to bottom, rgba(34,34,34,0) 0, rgba(34,34,34,.9) 110px, #222222 200px); -webkit-mask-image: none; mask-image: none; }
  .xf-mdl__name { font-size: 30px; }
}

/* ---- NEWS 帯（TOP） ---- */
.xf-news { position: relative; z-index: 1; padding: 0 0 120px; }
.xf-news__in { border-top: 1px solid var(--xf-line); border-bottom: 1px solid var(--xf-line); padding: 40px 0; display: grid; grid-template-columns: 200px 1fr; gap: 24px 40px; align-items: start; }
.xf-news__head { display: flex; flex-direction: column; gap: 14px; }
.xf-news__title { font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .12em; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.xf-news__all { font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--xf-muted); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.xf-news__all:hover { color: var(--xf-fg); }
.xf-news__list { display: grid; }
/* 罫線は項目の“あいだ”だけ（上下の囲みは作らない） */
.xf-news__item + .xf-news__item { border-top: 1px solid var(--xf-line); }
/* 主役はタイトル。日付とタグは添え物として一段落とす */
.xf-news__link { display: grid; grid-template-columns: 88px auto 1fr; gap: 18px; align-items: baseline; padding: 18px 0; transition: color .3s; }
.xf-news__link:hover .xf-news__text { color: var(--xf-accent); }
.xf-news__date { font-weight: 500; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.xf-news__tag { min-width: 58px; text-align: center; padding: 2px 7px; border: 1px solid rgba(255,255,255,.16); font-weight: 300; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.xf-news__text { font-size: 17px; font-weight: 700; line-height: 1.55; letter-spacing: .01em; transition: color .3s; }
@media (max-width: 1080px) {
  .xf-news { padding-bottom: 64px; }
  .xf-news__in { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .xf-news__head { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .xf-news__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 0; }
  .xf-news__date { flex: none; line-height: 1; }
  .xf-news__tag { flex: none; line-height: 1.4; }
  .xf-news__lockico { margin-left: auto; }
  .xf-news__text { flex: 0 0 100%; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: 0; }
}

/* ---- EVENT 事前予約 ---- */
.xf-event { position: relative; overflow: clip; padding: 120px 0; border-top: 1px solid var(--xf-line); border-bottom: 1px solid var(--xf-line); background: radial-gradient(70% 80% at 80% 50%, rgba(18,184,217,.05), transparent 70%), #181818; }
.xf-event__band { position: absolute; z-index: 0; left: calc(50% + 110px); width: 4400px; height: 320px; top: 50%; background: var(--xf-accent); transform: translate(-50%, -50%) rotate(-45deg); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); opacity: 1; pointer-events: none; }
.xf-event__in { position: relative; z-index: 1; display: grid; grid-template-columns: 6.5fr 5.5fr; gap: 72px; align-items: center; }
.xf-event__eyebrow { font-weight: 200; font-size: 12px; letter-spacing: .3em; color: var(--xf-accent); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.xf-event__title { margin-top: 12px; display: flex; align-items: baseline; gap: .12em; font-weight: 800; font-size: clamp(56px, 6.9vw, 100px); line-height: 1; letter-spacing: 0; white-space: nowrap; text-shadow: 0 3px 24px rgba(0,0,0,.6); }
.xf-event__dow { font-family: var(--xf-ja); font-weight: 700; font-size: .22em; letter-spacing: .02em; color: rgba(255,255,255,.6); margin-left: .04em; }
.xf-event__name { margin-top: 26px; font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: .02em; text-shadow: 0 3px 24px rgba(0,0,0,.6); }
.xf-event__series { margin-top: 8px; font-weight: 200; font-size: 16px; letter-spacing: .14em; color: rgba(255,255,255,.85); text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.xf-event__venue { margin-top: 18px; font-weight: 700; font-size: 17px; letter-spacing: .05em; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.xf-event__venue a { color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--xf-accent); text-decoration-thickness: 2px; transition: color .3s var(--xf-ease); }
.xf-event__venue a:hover { color: var(--xf-accent); }
.xf-event__ticket { margin-top: 14px; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.xf-event__tnote { margin-top: 10px; max-width: 520px; font-size: 12px; line-height: 1.8; letter-spacing: .02em; color: rgba(255,255,255,.72); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.xf-event__dnote { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(24,24,24,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; letter-spacing: .03em; color: rgba(255,255,255,.8); }
.xf-event__dnote-i { width: 11px; height: 12px; color: var(--xf-accent); flex: 0 0 auto; }
.xf-event__sub { margin-top: 32px; font-size: 22px; font-weight: 700; letter-spacing: .05em; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.xf-event__copy { margin-top: 16px; max-width: 520px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.9); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.xf-count { display: inline-flex; gap: 32px; margin-top: 36px; padding: 22px 28px; border: 1px solid rgba(255,255,255,.14); background: rgba(24,24,24,.55); }
.xf-count span { display: grid; gap: 4px; }
.xf-count b { font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; min-width: 1.3em; }
.xf-count small { font-weight: 200; font-size: 10px; letter-spacing: .2em; color: var(--xf-muted); }
.xf-event__form { position: relative; padding: 40px; background: #222222; border: 1px solid rgba(255,255,255,.12); font-feature-settings: "palt"; }
.xf-event__form::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--xf-accent); }
.xf-ef__label { font-weight: 800; font-size: 12px; letter-spacing: .2em; color: var(--xf-accent); }
.xf-ef__lead { margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1.45; letter-spacing: .02em; color: #fff; }
@media (max-width: 1080px) { .xf-ef__lead { font-size: 19px; } }
.xf-ef__row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
.xf-ef__input { min-height: 56px; padding: 0 16px; background: rgba(255,255,255,.06); color: var(--xf-fg); border: 1px solid rgba(255,255,255,.18); border-radius: 0; font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; }
.xf-ef__input::placeholder { color: var(--xf-faint); }
.xf-ef__input:focus-visible { outline: 2px solid var(--xf-accent); outline-offset: 0; border-color: var(--xf-accent); }
.xf-ef__btn { width: 100%; min-height: 56px; padding: 0 22px; font-size: 16px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.xf-ef__error { margin-top: 10px; font-size: 12px; color: #ffb3b3; }
.xf-ef__fields { display: grid; gap: 14px; margin-top: 22px; }
.xf-ef__field { display: grid; gap: 6px; }
.xf-ef__flabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--xf-muted); }
.xf-ef__input[readonly] { color: var(--xf-muted); background: rgba(255,255,255,.03); }
/* 同意チェック（行全体がタップ領域・44px以上・カスタムボックス） */
.xf-check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; margin: 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); font-size: 13px; line-height: 1.6; cursor: pointer; transition: border-color .2s, background .2s; }
.xf-check + .xf-check { margin-top: 8px; }
.xf-check:hover { border-color: rgba(255,255,255,.3); }
.xf-check__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xf-check__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid rgba(255,255,255,.45); border-radius: 4px; background: transparent; color: #0E0E0E; transition: background .15s, border-color .15s; }
.xf-check__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.xf-check__input:checked + .xf-check__box { background: var(--xf-accent); border-color: var(--xf-accent); }
.xf-check__input:checked + .xf-check__box svg { opacity: 1; transform: none; }
.xf-check__input:focus-visible + .xf-check__box { outline: 2px solid var(--xf-accent); outline-offset: 2px; }
.xf-check:has(.xf-check__input:checked) { border-color: rgba(18,184,217,.6); background: rgba(18,184,217,.06); }
.xf-check__text { flex: 1; color: var(--xf-fg); }
.xf-check__text .xf-link { text-decoration: underline; text-underline-offset: 3px; }
.xf-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; }
.xf-tag--req { background: #E5484D; color: #fff; }
.xf-tag--opt { background: rgba(255,255,255,.14); color: var(--xf-muted); }
.xf-consent { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.xf-consent__legend { display: block; margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--xf-muted); }
.xf-ef__btn:disabled, .xf-ef__btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.xf-ef__btn:disabled { pointer-events: none; }
.xf-ef__meta { margin-top: 14px; }
.xf-ef__hint { margin: 10px 0 0; font-size: 12px; text-align: center; color: var(--xf-muted); }
.xf-ef__hint[hidden] { display: none; }
.xf-ef__row { margin-top: 18px; }
.xf-ef__alt { margin-top: 14px; font-size: 12px; color: var(--xf-muted); }
.xf-event__times { margin-top: 14px; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--xf-fg); }
.xf-ef__meta { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--xf-muted); text-align: left; }
.xf-ef__meta p { margin: 0; }
.xf-ef__meta p + p { margin-top: 4px; }
.xf-ef__meta .xf-link { font-size: 12px; }
.xf-ef__details { margin-top: 6px; }
.xf-ef__details summary { list-style: none; cursor: pointer; color: var(--xf-muted); }
.xf-ef__details summary::-webkit-details-marker { display: none; }
.xf-ef__details summary::after { content: "＋"; margin-left: 6px; font-size: 10px; }
.xf-ef__details[open] summary::after { content: "－"; }
.xf-ef__details summary:hover { color: var(--xf-fg); }
.xf-ef__details ul { margin-top: 6px; }
a.xf-ef__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.xf-ef__static { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--xf-muted); }
.xf-ef__done-actions { margin-top: 22px; }
.xf-ef__done-actions { display: grid; gap: 10px; }
.xf-ef__done-actions .xf-btn { width: 100%; }
.xf-ef__ext { margin-top: 10px; font-size: 11px; color: var(--xf-faint); }
.xf-ef__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--xf-line); font-size: 11px; line-height: 1.7; color: var(--xf-muted); text-align: left; }
.xf-ef__note p { margin: 0; }
.xf-ef__note p + p { margin-top: 6px; }
.xf-ef__note ul { margin: 2px 0 0; padding-left: 1.2em; }
.xf-ef__done-title { font-weight: 800; font-size: 22px; letter-spacing: .12em; }
@media (max-width: 1080px) {
  .xf-event { padding: 72px 0; }
  .xf-event__band { width: 2400px; height: 20vw; top: 30%; }
  .xf-event__dnote { margin-top: 18px; }
  .xf-event__in { grid-template-columns: 1fr; gap: 32px; }
  .xf-event__title { font-size: clamp(40px, 12.5vw, 56px); margin-top: 14px; }
  .xf-event__name { margin-top: 18px; font-size: clamp(26px, 7.4vw, 34px); }
  .xf-event__series { font-size: 13px; letter-spacing: .1em; }
  .xf-event__venue { font-size: 15px; margin-top: 14px; }
  .xf-event__ticket { font-size: 15px; margin-top: 10px; }
  .xf-event__tnote { font-size: 11px; }
  .xf-event__eyebrow { font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
  .xf-event__sub { font-size: 18px; }
  .xf-event__copy { font-size: 14px; text-wrap: balance; }
  .xf-count { gap: 18px; margin-top: 24px; padding: 16px 18px; }
  .xf-count b { font-size: 40px; }
  .xf-event__form { padding: 28px 20px; background: #1F1F1F; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .xf-ef__row { grid-template-columns: 1fr; }
  .xf-event__title { margin-top: 8px; }
  .xf-event__sub { margin-top: 28px; }
  .xf-event__copy { margin-top: 12px; }
  .xf-event__dnote { margin-top: 32px; }
}

/* ==========================================================================
   Motion layer 2（よりリッチに。全て transform/opacity/clip-path、reduced-motion では無効）
   ========================================================================== */
/* 文字分割の stagger */
.xf-ch { display: inline-block; white-space: pre; }
[data-split] { white-space: nowrap; }
[data-split] .xf-ch:last-child { letter-spacing: 0; }
.xf-js .xf-members__title[data-split] { text-indent: 0; }
.xf-js .xf-hero__date .xf-ch { opacity: 0; transform: translate3d(0, 55%, 0) rotate(3deg); transition: opacity .7s var(--xf-ease), transform 1.1s var(--xf-ease); transition-delay: calc(.75s + var(--i, 0) * 45ms); }
.xf-js .xf-hero.is-ready .xf-hero__date .xf-ch { opacity: 1; transform: none; }
.xf-js [data-reveal] .xf-ch { opacity: 0; transform: translate3d(0, .4em, 0); transition: opacity .6s var(--xf-ease), transform .9s var(--xf-ease); transition-delay: calc(var(--xf-delay) + .1s + var(--i, 0) * 35ms); }
.xf-js [data-reveal].is-in .xf-ch { opacity: 1; transform: none; }

/* ヒーロー: ポインタ追従（JSが --px/--py を書く。translate プロパティなので他の transform と合成される） */
.xf-hero__brand, .xf-hero__photo, .xf-hero__text, .xf-hero__stamp { translate: var(--px, 0px) calc(var(--py, 0px) + var(--sy, 0px)); }
/* ヒーロー: 写真のゆっくりしたドリフト（intro後） */
@keyframes xf-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
.xf-js .xf-hero.is-ready .xf-hero__photo img { animation: xf-drift 22s ease-in-out 2.6s infinite alternate; }
/* ヒーロー: 帯の光沢が流れる */
.xf-hero__band { overflow: hidden; }
.xf-hero__band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; left: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); animation: xf-shimmer 7s cubic-bezier(.4,0,.2,1) 3s infinite; }
@keyframes xf-shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(520%); } }
/* ヒーロー: スタンプの揺れ（intro後） */
@keyframes xf-wobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-13deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.03); } }
@keyframes xf-wobble-sp { 0%, 100% { transform: rotate(-13deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.03); } }
.xf-js .xf-hero.is-ready .xf-hero__stamp { animation: xf-wobble 5s ease-in-out 2.8s infinite; }
/* ヘッダー: ボルトが回りながら現れる、ナビは下線が伸びる */
@keyframes xf-bolt-in { from { transform: rotate(-90deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.xf-js .xf-header__bolt { animation: xf-bolt-in 1.2s var(--xf-ease) .15s both; }
/* ナビの現在地/ホバー: 文字幅だけの短いシアンの線（flex:1 のリンク全幅には引かない） */
.xf-header__link > span { position: relative; display: inline-block; }
.xf-header__link > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--xf-accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--xf-ease); }
.xf-header__link:hover > span::after, .xf-header__link.is-current > span::after { transform: scaleX(1); transform-origin: left; }
/* スクロール進捗 */
.xf-progress { position: fixed; left: 0; top: 0; z-index: 51; width: 100%; height: 2px; background: var(--xf-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* ボタン: 光沢スイープ */
.xf-btn { position: relative; overflow: hidden; }
.xf-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-160%) skewX(-12deg); transition: transform .9s var(--xf-ease); pointer-events: none; }
.xf-btn:hover::after, .xf-btn:focus-visible::after { transform: translateX(340%) skewX(-12deg); }
.xf-btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); }
/* コンテンツカード: ポインタ追従の傾き＋光 */
.xf-js .xf-coming__card.is-in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--xf-ease), border-color .4s ease, opacity 1s var(--xf-ease) var(--xf-delay); transform-style: preserve-3d; }
.xf-coming__card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(18,184,217,.13), transparent 60%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
@media (hover: hover) {
  .xf-coming__card:hover { border-color: rgba(255,255,255,.14); }
  .xf-coming__card:hover::after { opacity: 1; }
  .xf-coming__card:hover .xf-coming__note { color: var(--xf-accent); }
}
/* MEMBERS: 写真がせり上がり、サインが左から書かれる。帯にも光が走る */
.xf-js .xf-mem .xf-mem__photo { transform: translate3d(0, 44px, 0); transition: transform 1.3s var(--xf-ease) var(--xf-delay); }
.xf-js .xf-mem.is-in .xf-mem__photo { transform: none; }
/* サインは左→右のワイプで「書かれる」。transition だとスクロール位置復元付きリロードで is-in が初回描画前に付き再生されないため animation で */
.xf-js .xf-mem .xf-mem__sig { clip-path: inset(0 100% 0 0); transition: transform .9s var(--xf-ease); }
.xf-js .xf-mem.is-in .xf-mem__sig { clip-path: inset(-10% -10% -10% -10%); animation: xf-sig-wipe 1.3s cubic-bezier(.5,0,.2,1) calc(var(--xf-delay) + .5s) both; }
@keyframes xf-sig-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-10% -10% -10% -10%); } }
.xf-js .xf-mem .xf-mem__no { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity .6s ease calc(var(--xf-delay) + .8s), transform .8s var(--xf-ease) calc(var(--xf-delay) + .8s), color .4s ease; }
.xf-js .xf-mem.is-in .xf-mem__no { opacity: 1; transform: none; }
@media (hover: hover) {
  .xf-js .xf-mem.is-in:hover .xf-mem__photo { transform: translate3d(0, -6px, 0) scale(1.02); }
  .xf-js .xf-mem.is-in:hover .xf-mem__sig { transform: translate3d(0, 4px, 0); }
}
.xf-members__band { overflow: hidden; }
.xf-members__band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; left: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-120%); animation: xf-shimmer 9s cubic-bezier(.4,0,.2,1) 4s infinite; }
/* カウントダウンの桁が転がる */
@keyframes xf-tick { from { transform: translateY(14%); opacity: .55; } to { transform: none; opacity: 1; } }
.xf-count b { display: inline-block; }
.xf-count b.is-tick { animation: xf-tick .5s var(--xf-ease); }
/* イベント: 見出しの脇の帯がゆっくり呼吸 */
@keyframes xf-breathe { 0%, 100% { opacity: .10; } 50% { opacity: .18; } }

/* NEWS: 行がホバーで右へ */
.xf-news__link { transition: transform .5s var(--xf-ease); }
@media (hover: hover) { .xf-news__link:hover { transform: translate3d(6px, 0, 0); } }
/* reduced-motion: レイヤー2は全て無効 */
@media (prefers-reduced-motion: reduce) {
  .xf-hero__band::after, .xf-members__band::after, .xf-event__band, .xf-btn::after { animation: none !important; transition: none !important; }
  .xf-progress { display: none; }
}

/* ---- legal pages ---- */
.xf-legal__body { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.xf-legal__side { position: sticky; top: calc(var(--xf-header-h) + 24px); display: grid; gap: 20px; }
.xf-legal__meta { display: grid; gap: 4px; font-size: 13px; }
.xf-legal__meta span { color: var(--xf-muted); font-size: 11px; letter-spacing: .08em; }
.xf-legal__meta b { font-weight: 500; }
.xf-legal__toc { padding-top: 16px; border-top: 1px solid var(--xf-line); }
.xf-legal__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.xf-legal__toc a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 7px 0; font-size: 13px; color: var(--xf-muted); counter-increment: toc; transition: color .3s; }
.xf-legal__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .06em; color: var(--xf-faint); }
.xf-legal__toc a:hover { color: var(--xf-fg); }
.xf-legal__doc { max-width: 760px; }
.xf-legal__article { padding: 28px 0 32px; border-top: 1px solid var(--xf-line); }
.xf-legal__article:first-child { border-top: 0; padding-top: 0; }
.xf-legal__h { font-size: 18px; font-weight: 700; letter-spacing: .04em; margin-bottom: 14px; }
.xf-legal__rte { font-size: 14px; line-height: 2; color: rgba(255,255,255,.86); }
.xf-legal__rte p + p { margin-top: 12px; }
.xf-legal__rte ol, .xf-legal__rte ul { padding-left: 1.6em; margin: 10px 0; }
.xf-legal__rte ol { list-style: decimal; } .xf-legal__rte ul { list-style: disc; }
.xf-legal__rte li + li { margin-top: 6px; }
.xf-legal__rte a { color: var(--xf-accent); text-decoration: underline; text-underline-offset: .2em; }
.xf-legal__table, .xf-legal__rte table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.xf-legal__table th, .xf-legal__table td, .xf-legal__rte th, .xf-legal__rte td { padding: 12px 14px; border: 1px solid var(--xf-line); vertical-align: top; text-align: left; line-height: 1.8; }
.xf-legal__table th, .xf-legal__rte th { width: 32%; color: var(--xf-muted); font-weight: 500; background: rgba(255,255,255,.03); }
.xf-legal__table td p { margin: 0; }
.xf-legal__table td p + p { margin-top: 6px; }
@media (max-width: 1080px) { .xf-legal__table th, .xf-legal__table td { display: block; width: auto; } .xf-legal__table th { border-bottom: 0; padding-bottom: 4px; } }
.xf-legal__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--xf-line); font-size: 12px; color: var(--xf-muted); }
@media (max-width: 1080px) {
  .xf-legal__body { grid-template-columns: 1fr; gap: 28px; }
  .xf-legal__side { position: static; }
  .xf-legal__toc { display: none; }
  .xf-legal__rte { font-size: 14px; }
}

/* ==========================================================================
   Copy guard（JS有効時 html.xf-guard）。テーマエディタ内は付かない
   ========================================================================== */
.xf-guard img, .xf-guard picture, .xf-guard video, .xf-guard svg { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.xf-guard .xf-header__logo svg, .xf-guard button svg, .xf-guard a svg { pointer-events: auto; } /* クリック要素の中はそのまま */
.xf-guard body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xf-guard input, .xf-guard textarea, .xf-guard select, .xf-guard [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* 画像の上に透明レイヤー（長押し/ドラッグの当たりを画像から外す） */
.xf-mem__photo::after, .xf-hero__photo::after, .xf-mdl__photo::after, .xf-pv::after, .xf-pv-movie__frame::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.xf-mdl__photo::after { pointer-events: auto; }
/* 印刷は無効化 */
@media print {
  .xf-body * { visibility: hidden !important; }
  .xf-body::before { content: "このページは印刷できません / Anker XEED OFFICIAL FAN CLUB"; visibility: visible; position: fixed; left: 0; top: 0; padding: 24px; font: 14px sans-serif; color: #000; }
}
.xf-printing .xf-body { visibility: hidden; }

}

/* 斜め帯の登場は左下→右上（描画方向＝帯の向き） */
@keyframes xf-band-draw { from { clip-path: polygon(0 0, 0 40%, 0 60%, 0 100%); } to { clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); } }
.xf-js .xf-band { animation: xf-band-draw 1.8s cubic-bezier(.16,1,.3,1) .1s both; }
.xf-js .xf-event__band { clip-path: polygon(0 0, 0 40%, 0 60%, 0 100%); transition: clip-path 1.8s cubic-bezier(.16,1,.3,1) .1s; }
.xf-js .xf-event.is-in .xf-event__band { clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }

/* 水色ボタンの文字は常に黒（状態を問わず） */
.xf-btn:not(.xf-btn--ghost), .xf-btn:not(.xf-btn--ghost):hover, .xf-btn:not(.xf-btn--ghost):focus-visible, .xf-btn:not(.xf-btn--ghost):active, .xf-btn:not(.xf-btn--ghost):visited,
.xf-ef__btn, .xf-form__app button[type="submit"], .xf-form__app [type="submit"], .xf-mdl__arrow:hover { color: #0E0E0E !important; }

/* ==========================================================================
   Sub pages（NEWS / MEMBERSHIP / TALK ROOM / MOVIE / PHOTO / SCHEDULE）— TOPのトンマナ準拠
   ========================================================================== */
.xf-sec-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 28px; }
.xf-sec-head .xf-h2 { font-size: 32px; }
.xf-sec-head__ja { font-size: 14px; color: var(--xf-muted); }
.xf-empty { padding: 48px 20px; text-align: center; color: var(--xf-muted); border: 1px dashed rgba(255,255,255,.2); }
.xf-rte { font-size: 15px; line-height: 2; }
.xf-rte img { display: block; width: 100%; height: auto; margin: 24px 0; }
.xf-rte h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; }
.xf-rte h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; }
.xf-rte p + p { margin-top: 14px; }
.xf-rte a { color: var(--xf-accent); text-decoration: underline; text-underline-offset: .2em; }
.xf-rte blockquote { margin: 20px 0; padding: 12px 20px; border-left: 2px solid var(--xf-accent); color: rgba(255,255,255,.8); }
.xf-rte iframe, .xf-rte video { max-width: 100%; }
/* lock */
.xf-lock { position: relative; z-index: 2; margin: 24px auto 0; max-width: 720px; padding: 48px 32px; text-align: center; background: #222222; border: 1px solid var(--xf-line); }
.xf-lock::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--xf-accent); }
.xf-lock__bolt { width: 38px; height: 40px; margin: 0 auto 18px; color: var(--xf-accent); }
.xf-lock__eyebrow { font-weight: 800; font-size: 11px; letter-spacing: .24em; color: var(--xf-accent); }
.xf-lock__title { margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.xf-lock__text { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.75); }
.xf-lock__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.is-blur { filter: blur(10px) brightness(.5); pointer-events: none; user-select: none; }
/* tags / pager */
.xf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.xf-tag { padding: 8px 14px; border: 1px solid rgba(255,255,255,.2); font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--xf-muted); transition: color .3s, border-color .3s, background .3s; }
.xf-tag:hover, .xf-tag.is-on { color: #0E0E0E; background: var(--xf-accent); border-color: var(--xf-accent); }
.xf-pager { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 56px; font-weight: 800; font-size: 12px; letter-spacing: .12em; }
.xf-pager a { color: var(--xf-fg); } .xf-pager a:hover { color: var(--xf-accent); } .xf-pager span { color: var(--xf-muted); }
/* NEWS list */
.xf-blog__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.xf-blog__link { display: block; }
.xf-blog__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #212121; border: 1px solid rgba(255,255,255,.06); }
.xf-blog__thumb { background: #000; }
.xf-blog__thumb img { width: 100%; height: 100%; object-fit: contain; background: #000; transition: transform 1s var(--xf-ease); }
.xf-blog__link:hover .xf-blog__thumb img { transform: scale(1.04); }
.xf-blog__noimg { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.14); background: linear-gradient(135deg, #212121, #101010); }
.xf-blog__noimg-bolt { width: 40px; height: auto; }
.xf-blog__lock { position: absolute; left: 12px; top: 12px; padding: 4px 8px; background: rgba(24,24,24,.7); border: 1px solid var(--xf-accent); color: var(--xf-accent); font-weight: 800; font-size: 9px; letter-spacing: .14em; }
.xf-blog__lock--inline { position: static; }
.xf-blog__meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.xf-blog__date { font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.xf-blog__tag { min-width: 56px; text-align: center; padding: 3px 8px; border: 1px solid rgba(255,255,255,.3); font-weight: 200; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.xf-blog__title { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.6; transition: color .3s; }
.xf-blog__link:hover .xf-blog__title { color: var(--xf-accent); }
.xf-blog__excerpt { margin-top: 8px; font-size: 13px; color: var(--xf-muted); }
/* article */
.xf-article__in { max-width: 960px; }
.xf-article__crumb { font-weight: 800; font-size: 11px; letter-spacing: .16em; color: var(--xf-muted); margin-bottom: 20px; }
.xf-article__crumb a:hover { color: var(--xf-fg); }
.xf-article__meta { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.xf-article__title { margin-top: 16px; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.xf-article__hero { margin: 40px 0 0; overflow: hidden; }
.xf-article__hero img { width: 100%; height: auto; }
.xf-article__hero.is-locked img { filter: blur(14px) brightness(.5); transform: scale(1.05); }
.xf-article__body { margin-top: 40px; }
.xf-article__foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--xf-line); display: grid; gap: 20px; }
.xf-article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xf-article__navlink { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--xf-line); font-size: 14px; }
.xf-article__navlink small { font-weight: 800; font-size: 10px; letter-spacing: .16em; color: var(--xf-muted); }
.xf-article__navlink--next { text-align: right; }
.xf-article__navlink:hover { border-color: var(--xf-accent); }
/* video facade */
.xf-video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.xf-video__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.xf-video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1s var(--xf-ease), opacity .4s; }
.xf-video__facade:hover img { transform: scale(1.03); opacity: 1; }
.xf-video__facade .xf-pv-movie__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.xf-video__facade .xf-pv-movie__play i { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
.xf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xf-video__lockmsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 12px; background: rgba(24,24,24,.7); border: 1px solid var(--xf-accent); color: var(--xf-accent); font-weight: 800; font-size: 11px; letter-spacing: .16em; }
.xf-video.is-locked img { filter: blur(10px) brightness(.5); }
/* plans */
.xf-plans__intro { max-width: 640px; margin-bottom: 32px; font-size: 15px; color: rgba(255,255,255,.8); }
.xf-plans__cycle { display: inline-flex; border: 1px solid rgba(255,255,255,.2); margin-bottom: 32px; }
.xf-plans__cycle button { padding: 10px 18px; background: none; border: 0; color: var(--xf-muted); font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .14em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.xf-plans__cycle button span { padding: 2px 6px; background: var(--xf-accent); color: #0E0E0E; font-size: 9px; }
.xf-plans__cycle button.is-on { background: var(--xf-fg); color: #0E0E0E; }
.xf-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.xf-plan { position: relative; display: flex; flex-direction: column; padding: 36px 28px 28px; background: #222222; border: 1px solid var(--xf-line); }
.xf-plan.is-reco { border-color: var(--xf-accent); }
.xf-plan--vip { background: linear-gradient(160deg, #181f21, #1F1F1F); border-color: rgba(18,184,217,.35); }
.xf-plan__reco { position: absolute; left: -1px; top: -1px; padding: 6px 12px; background: var(--xf-accent); color: #0E0E0E; font-weight: 800; font-size: 10px; letter-spacing: .16em; }
.xf-plan__name { font-weight: 800; font-size: 28px; letter-spacing: .08em; }
.xf-plan--vip .xf-plan__name { background: var(--xf-vip-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xf-plan__ja { margin-top: 4px; font-size: 13px; color: var(--xf-muted); }
.xf-plan__price { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.xf-plan__num { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.xf-plan__unit { font-size: 13px; color: var(--xf-muted); }
.xf-plan__note { flex-basis: 100%; font-size: 12px; color: var(--xf-muted); }
.xf-plan__perks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.xf-plan__perks li { position: relative; padding-left: 20px; font-size: 14px; }
.xf-plan__perks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--xf-accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.xf-plan__perks li.is-dis { color: var(--xf-faint); text-decoration: line-through; }
.xf-plan__perks li.is-dis::before { background: rgba(255,255,255,.25); }
.xf-plan__cta { margin-top: auto; padding-top: 28px; }
.xf-plan__cta .xf-btn { width: 100%; }
.xf-btn--vip { background: var(--xf-vip-grad); border-color: transparent; }
.xf-btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
.xf-plan__current { display: block; padding: 14px; text-align: center; border: 1px solid var(--xf-accent); color: var(--xf-accent); font-weight: 800; font-size: 12px; letter-spacing: .14em; }
.xf-plan__safe { margin-top: 12px; font-size: 11px; color: var(--xf-muted); text-align: center; }
.xf-plans__foot { margin-top: 20px; font-size: 12px; color: var(--xf-muted); }
.xf-plans__block { margin-top: 96px; }
.xf-cmp-wrap { overflow-x: auto; }
.xf-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.xf-cmp th, .xf-cmp td { padding: 14px 16px; border-bottom: 1px solid var(--xf-line); text-align: center; vertical-align: middle; }
.xf-cmp thead th { font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--xf-muted); border-bottom-color: rgba(255,255,255,.25); }
.xf-cmp th[scope="row"] { text-align: left; font-weight: 500; }
.xf-cmp th[scope="row"] small { display: block; font-size: 11px; color: var(--xf-muted); font-weight: 400; }
.xf-cmp td.is-ok { color: var(--xf-accent); font-weight: 800; } .xf-cmp td.is-no { color: var(--xf-faint); } .xf-cmp td.is-some { color: rgba(255,255,255,.8); font-size: 13px; }
.xf-cmp .is-vip { background: rgba(18,184,217,.06); }
.xf-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--xf-line); border: 1px solid var(--xf-line); }
.xf-flow li { padding: 28px 24px; background: var(--xf-bg); }
.xf-flow__no { display: block; font-weight: 800; font-size: 28px; color: var(--xf-accent); margin-bottom: 14px; }
.xf-flow h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.xf-flow p { font-size: 13px; color: rgba(255,255,255,.75); }
.xf-plans__pay { margin-top: 24px; padding: 20px 24px; border: 1px solid var(--xf-line); font-size: 13px; color: rgba(255,255,255,.8); }
.xf-faq { border-top: 1px solid var(--xf-line); }
.xf-faq__item { border-bottom: 1px solid var(--xf-line); }
.xf-faq__item summary { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 48px 20px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; }
.xf-faq__item summary::-webkit-details-marker { display: none; }
.xf-faq__q { flex: 0 0 auto; font-family: var(--xf-en); font-stretch: 125%; font-weight: 800; color: var(--xf-accent); }
.xf-faq__q--a { color: var(--xf-fg); }
.xf-faq__item summary i { position: absolute; right: 8px; top: 24px; width: 14px; height: 14px; }
.xf-faq__item summary i::before, .xf-faq__item summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--xf-fg); transition: transform .4s var(--xf-ease); }
.xf-faq__item summary i::after { transform: rotate(90deg); }
.xf-faq__item[open] summary i::after { transform: rotate(0); }
.xf-faq__a { display: flex; gap: 16px; padding: 0 0 22px; font-size: 14px; color: rgba(255,255,255,.8); }
.xf-plans__notes { max-width: 760px; }
/* talk room */
.xf-talk__in { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.xf-talk__feed { border-top: 1px solid var(--xf-line); }
.xf-post { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--xf-line); }
.xf-post.is-pin { background: linear-gradient(90deg, rgba(18,184,217,.06), transparent); }
.xf-post__av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #222; display: grid; place-items: center; }
.xf-post__av img { width: 100%; height: 100%; object-fit: cover; }
.xf-post__head { display: flex; align-items: baseline; gap: 12px; }
.xf-post__head b { font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.xf-post__head time { font-size: 11px; color: var(--xf-muted); }
.xf-post__pin { padding: 2px 6px; border: 1px solid var(--xf-accent); color: var(--xf-accent); font-size: 9px; letter-spacing: .14em; }
.xf-post__text { margin-top: 8px; font-size: 15px; line-height: 1.9; }
.xf-post__text p + p { margin-top: 8px; }
.xf-post__img { display: block; margin-top: 12px; max-width: 520px; overflow: hidden; }
.xf-post__img img { width: 100%; height: auto; }
.xf-talk__side { position: sticky; top: calc(var(--xf-header-h) + 24px); display: grid; gap: 20px; }
.xf-talk__note { font-size: 13px; color: rgba(255,255,255,.75); }
.xf-talk__members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.xf-talk__members li { display: grid; justify-items: center; gap: 6px; font-size: 10px; letter-spacing: .06em; color: var(--xf-muted); }
.xf-talk__members img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.xf-talk__locked { position: relative; }
.xf-talk__peek { max-width: 720px; margin: 0 auto; }
/* movie */
.xf-movie__feature { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; margin-bottom: 72px; }
.xf-movie__label { font-weight: 800; font-size: 11px; letter-spacing: .24em; color: var(--xf-accent); }
.xf-movie__title { margin-top: 12px; font-size: 26px; font-weight: 700; line-height: 1.5; }
.xf-movie__meta { margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: var(--xf-muted); }
.xf-movie__desc { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.8); }
.xf-movie__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.xf-movie__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #212121; }
.xf-movie__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--xf-ease); }
.xf-movie__card a:hover .xf-movie__thumb img { transform: scale(1.04); }
.xf-pv-movie__play--sm { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.xf-movie__cardtitle { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.xf-movie__lockedgrid, .xf-photo__lockedgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: -40px; }
.xf-movie__lockedgrid img, .xf-photo__lockedgrid img { width: 100%; height: 100%; object-fit: cover; }
/* photo */
.xf-albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.xf-album__cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #212121; }
.xf-album__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--xf-ease); }
.xf-album a:hover .xf-album__cover img { transform: scale(1.04); }
.xf-album__title { margin-top: 12px; font-size: 15px; font-weight: 700; }
.xf-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.xf-wall__thumb { aspect-ratio: 3 / 4; overflow: hidden; background: #212121; }
.xf-wall__thumb img { width: 100%; height: 100%; object-fit: cover; }
.xf-wall__label { margin-top: 10px; font-weight: 800; font-size: 11px; letter-spacing: .12em; }
.xf-wall__lock { font-weight: 800; font-size: 10px; letter-spacing: .14em; color: var(--xf-muted); }
/* schedule */
.xf-sched__intro { max-width: 640px; margin-bottom: 40px; font-size: 15px; color: rgba(255,255,255,.8); }
.xf-sched__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--xf-line); }
.xf-sched__item { display: grid; grid-template-columns: 120px 220px 1fr auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--xf-line); }
.xf-sched__item.is-next { background: linear-gradient(90deg, rgba(18,184,217,.08), transparent 60%); }
.xf-sched__item.is-done { opacity: .7; }
.xf-sched__round small { display: block; font-weight: 200; font-size: 10px; letter-spacing: .2em; color: var(--xf-muted); }
.xf-sched__round b { font-weight: 800; font-size: 40px; line-height: 1; }
.xf-sched__date { display: grid; gap: 4px; }
.xf-sched__date time { font-weight: 800; font-size: 18px; letter-spacing: .04em; }
.xf-sched__date span { font-size: 12px; color: var(--xf-muted); }
.xf-sched__venue { font-size: 15px; font-weight: 700; }
.xf-sched__note { margin-top: 4px; font-size: 13px; color: var(--xf-muted); }
.xf-sched__side { display: grid; justify-items: end; gap: 8px; text-align: right; }
.xf-sched__result { font-weight: 800; font-size: 20px; }
.xf-sched__result small { display: block; font-weight: 200; font-size: 10px; letter-spacing: .2em; color: var(--xf-muted); }
.xf-sched__badge { padding: 4px 10px; background: var(--xf-accent); color: #0E0E0E; font-weight: 800; font-size: 10px; letter-spacing: .16em; }
.xf-sched__foot { margin-top: 24px; font-size: 12px; color: var(--xf-muted); }
@media (max-width: 1080px) {
  .xf-sec-head { flex-direction: column; gap: 6px; }
  .xf-sec-head .xf-h2 { font-size: 26px; }
  .xf-blog__list { grid-template-columns: 1fr; gap: 28px; }
  .xf-article__title { font-size: 24px; }
  .xf-article__nav { grid-template-columns: 1fr; }
  .xf-plans__grid { grid-template-columns: 1fr; }
  .xf-plans__block { margin-top: 64px; }
  .xf-flow { grid-template-columns: 1fr; }
  .xf-talk__in { grid-template-columns: 1fr; gap: 32px; }
  .xf-talk__side { position: static; }
  .xf-movie__feature { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .xf-movie__grid, .xf-albums { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .xf-movie__lockedgrid, .xf-photo__lockedgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .xf-wall { grid-template-columns: repeat(2, 1fr); }
  .xf-sched__item { grid-template-columns: 80px 1fr; gap: 8px 16px; }
  .xf-sched__round b { font-size: 30px; }
  .xf-sched__body { grid-column: 2; }
  .xf-sched__side { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .xf-lock { padding: 36px 20px; }
  .xf-lock__actions .xf-btn { width: 100%; }
}

/* ナビの会員限定マーク（小さな鍵） */
.xf-header__lockico { width: 8px; height: 10px; margin-left: 5px; vertical-align: 0; opacity: .7; }
.xf-menu__link .xf-header__lockico { width: 10px; height: 12px; margin-left: 8px; opacity: .6; }

/* マイページ: 未登録(member)状態は案内ボックスとACCOUNTを同じ幅の中央カラムに */
.xf-mypage__narrow { max-width: 720px; margin-inline: auto; display: grid; gap: 24px; }
.xf-mypage__narrow .xf-gate--todo { margin-bottom: 0; }

/* 下層ページ: 斜め帯が見出し/本文リード上を横切っても読めるように、文字側にわずかな影 */
.xf-page__head .xf-h1, .xf-page__head .xf-page__lead,
.xf-article__title, .xf-article__meta, .xf-article__crumb { text-shadow: 0 2px 18px rgba(0,0,0,.75); }
/* 記事ページは本文が上に来るので帯をさらに上へ逃がす */
.xf-article .xf-band--top { top: -180px; }
.xf-blog .xf-band--top { top: -120px; }
@media (max-width: 1080px) {
  .xf-article .xf-band--top { top: -22vw; }
  .xf-blog .xf-band--top { top: -14vw; }
}

/* CONTENTS 見出し（MEMBERSと同じ扱い） */
.xf-coming__head { text-align: center; margin-bottom: 72px; }
.xf-coming__head .xf-members__title { font-size: 90px; }
@media (max-width: 1080px) { .xf-coming__head { margin-bottom: 40px; } .xf-coming__head .xf-members__title { font-size: clamp(26px, 8.6vw, 40px); } }

/* ロックUIはティーザーの中央に */
.xf-talk__locked .xf-lock, .xf-movie .xf-lock, .xf-photo .xf-lock { margin-top: 32px; }
.xf-talk__locked { display: grid; justify-items: center; }
.xf-talk__peek { width: min(720px, 100%); }

/* 公開フェーズ切替（社内確認用パネル）と、8/31プレ時の非表示 */
[data-xf-phase="pre"] .xf-header__link[data-phase="full"],
[data-xf-phase="pre"] .xf-menu__link[data-phase="full"],
[data-xf-phase="full"] .xf-header__link[data-phase="pre"],
[data-xf-phase="full"] .xf-menu__link[data-phase="pre"] { display: none; }
[data-xf-phase="pre"] .xf-header__lockico { display: none; }
/* TALK ROOM: 投稿内画像のサイズ制御 */
.xf-post__text img { max-width: min(420px, 100%); height: auto; display: block; margin: 12px 0 0; }
.xf-post__img { max-width: 420px; }
/* TALK ROOM: メンバー絞り込み */
.xf-post.is-hidden { display: none; }
.xf-talk__filterbar[hidden], .xf-talk__allbtn[hidden] { display: none !important; }
.xf-talk__filterbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--xf-line); font-weight: 800; font-size: 11px; letter-spacing: .14em; color: var(--xf-accent); }
.xf-talk__reset { padding: 6px 10px; background: none; border: 1px solid rgba(255,255,255,.25); color: var(--xf-muted); font: inherit; font-size: 10px; letter-spacing: .14em; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.xf-talk__reset:hover { background: var(--xf-accent); border-color: var(--xf-accent); color: #0E0E0E; }
.xf-box__title .xf-talk__allbtn { float: right; margin-top: -2px; padding: 4px 8px; background: none; border: 1px solid var(--xf-accent); color: var(--xf-accent); font: inherit; font-size: 10px; letter-spacing: .14em; cursor: pointer; }
.xf-box__title .xf-talk__allbtn:hover { background: var(--xf-accent); color: #0E0E0E; }
.xf-talk__mbtn { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0; background: none; border: 0; color: var(--xf-muted); font: inherit; font-size: 10px; letter-spacing: .06em; cursor: pointer; }
.xf-talk__mav { position: relative; display: block; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; transition: transform .5s var(--xf-ease), box-shadow .5s var(--xf-ease); }
.xf-talk__mav img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--xf-ease), filter .5s ease; }
.xf-talk__mav::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--xf-accent); opacity: 0; transform: scale(.82); transition: opacity .45s ease, transform .55s var(--xf-ease); }
.xf-talk__mbtn span.xf-en { transition: color .35s ease, transform .45s var(--xf-ease); }
@media (hover: hover) {
  .xf-talk__mbtn:hover .xf-talk__mav { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.55); }
  .xf-talk__mbtn:hover .xf-talk__mav img { transform: scale(1.12); filter: saturate(1.15); }
  .xf-talk__mbtn:hover .xf-talk__mav::after { opacity: 1; transform: scale(1); }
  .xf-talk__mbtn:hover span.xf-en { color: var(--xf-fg); transform: translateY(1px); }
}
.xf-talk__mbtn:focus-visible .xf-talk__mav::after { opacity: 1; transform: scale(1); }
.xf-talk__mbtn.is-on .xf-talk__mav::after { opacity: 1; transform: scale(1); }
.xf-talk__mbtn.is-on .xf-talk__mav { transform: scale(1.04); }
.xf-talk__mbtn.is-on span.xf-en { color: var(--xf-accent); font-weight: 800; }
.xf-talk__feed.is-filtered .xf-post { animation: xf-post-in .5s var(--xf-ease) both; }
@keyframes xf-post-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Glass surfaces（帯や写真の上でも読める、Apple的なすりガラス面）
   ・backdrop-filter は面の数を絞って使う（低電力端末での負荷対策）
   ・角丸なしのルールは維持
   ========================================================================== */
.xf-talk__feed, .xf-box, .xf-lock, .xf-gate, .xf-form, .xf-event__form, .xf-plan, .xf-legal__table, .xf-plans__pay {
  position: relative;
  background: linear-gradient(180deg, rgba(34,34,34,.74) 0%, rgba(18,18,18,.80) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 64px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
/* ガラス面の上端に細いハイライト（光が乗る質感） */
.xf-talk__feed::before, .xf-box::before, .xf-lock::before, .xf-gate::before, .xf-form::before, .xf-event__form::before, .xf-plan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}
.xf-lock::before { background: var(--xf-accent); }
.xf-event__form::before { background: var(--xf-accent); }
.xf-talk__feed { padding: 4px 28px 8px; border-top: 1px solid rgba(255,255,255,.10); }
.xf-talk__feed .xf-post:last-child { border-bottom: 0; }
.xf-plan.is-reco { border-color: rgba(18,184,217,.55); box-shadow: 0 28px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(18,184,217,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.xf-plan--vip { background: linear-gradient(160deg, rgba(24,40,45,.78), rgba(16,16,16,.82)); }
/* 非対応ブラウザ（Firefox等で無効時）は不透明で担保 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .xf-talk__feed, .xf-box, .xf-lock, .xf-gate, .xf-form, .xf-event__form, .xf-plan, .xf-legal__table, .xf-plans__pay { background: #242424; }
}
@media (max-width: 1080px) {
  .xf-talk__feed { padding: 4px 18px 8px; }
  .xf-talk__feed, .xf-box, .xf-lock, .xf-gate, .xf-form, .xf-event__form, .xf-plan { box-shadow: 0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
}

.xf-post__title { margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: .03em; line-height: 1.6; }
.xf-post__title + .xf-post__text { margin-top: 6px; }

/* SPのイベントフォームはすりガラスを使わず不透明（斜め帯が入力欄を汚さないように）。
   ガラス定義より後に置いて確実に上書きする */
@media (max-width: 1080px) {
  .xf-event__form { background: #1F1F1F; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 16px 36px rgba(0,0,0,.5); }
  .xf-event__band { top: 24%; }
}

/* 途中から見ている場合はヒーローの登場演出を無効化（いきなり動くのを防ぐ） */
.xf-js .xf-hero.xf-no-intro :is(.xf-hero__lk, .xf-hero__sub, .xf-hero__photo img, .xf-hero__date, .xf-hero__date .xf-ch, .xf-hero__copy, .xf-hero__lead, .xf-hero__stamp, .xf-hero__band) { transition: none !important; animation-delay: 0s !important; }

/* ==========================================================================
   ヒーロー登場を transition → animation に変更
   理由: transitionは「初期状態が一度描画されている」ことが前提で、
   ⌘⇧R（キャッシュ無視の再読み込み）のように初回描画前にクラスが付くと再生されない。
   animationは付いた時点から必ず再生される。
   ========================================================================== */
@keyframes xf-in-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes xf-in-left { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes xf-in-right { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes xf-in-bolt { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes xf-kv-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes xf-band-open { from { clip-path: polygon(0 0, 0 40%, 0 60%, 0 100%); } to { clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); } }
@keyframes xf-date-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); } to { opacity: 1; clip-path: inset(-25% -12% -25% -12%); transform: none; } }
@keyframes xf-ch-in { from { opacity: 0; transform: translate3d(0, 55%, 0) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes xf-stamp-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-13deg) scale(1); } }
@keyframes xf-stamp-in-sp { from { opacity: 0; transform: rotate(-24deg) scale(.85); } to { opacity: 1; transform: rotate(-13deg) scale(1); } }

.xf-js .xf-hero :is(.xf-hero__lk, .xf-hero__sub, .xf-hero__copy, .xf-hero__lead, .xf-hero__stamp, .xf-hero__date, .xf-hero__band),
.xf-js .xf-hero .xf-hero__date .xf-ch,
.xf-js .xf-hero .xf-hero__photo img { transition: none !important; }

.xf-js .xf-hero.is-ready .xf-hero__lk--bolt  { animation: xf-in-bolt 1.3s var(--xf-ease) .10s both; }
.xf-js .xf-hero.is-ready .xf-hero__lk--wm    { animation: xf-in-right 1.1s var(--xf-ease) .35s both; }
.xf-js .xf-hero.is-ready .xf-hero__sub  { animation: xf-in-up 1s var(--xf-ease) .55s both; }
.xf-js .xf-hero.is-ready .xf-hero__date { animation: xf-date-in 1.1s var(--xf-ease) .70s both; }
.xf-js .xf-hero.is-ready .xf-hero__date .xf-ch { animation: xf-ch-in 1.1s var(--xf-ease) both; animation-delay: calc(.75s + var(--i, 0) * 45ms); }
.xf-js .xf-hero.is-ready .xf-hero__copy { animation: xf-in-up 1s var(--xf-ease) .95s both; }
.xf-js .xf-hero.is-ready .xf-hero__lead { animation: xf-in-up 1s var(--xf-ease) 1.05s both; }
.xf-js .xf-hero.is-ready .xf-hero__stamp { animation: xf-stamp-in 1.1s var(--xf-ease) 1.25s both, xf-wobble 5s ease-in-out 2.8s infinite; }
.xf-js .xf-hero.is-ready .xf-hero__band { animation: xf-band-open 1.8s cubic-bezier(.16, 1, .3, 1) .1s both; }
.xf-js .xf-hero.is-kv .xf-hero__photo img { animation: xf-kv-in 2.2s var(--xf-ease) both, xf-drift 22s ease-in-out 2.8s infinite alternate; }
@media (max-width: 1080px) {
  .xf-js .xf-hero.is-ready .xf-hero__stamp { animation: xf-stamp-in-sp 1.1s var(--xf-ease) 1.25s both, xf-wobble-sp 5s ease-in-out 2.8s infinite; }
}
/* 途中から見ている / bfcache復帰 は演出しない */
.xf-js .xf-hero.xf-no-intro :is(.xf-hero__lk, .xf-hero__sub, .xf-hero__copy, .xf-hero__lead, .xf-hero__date) ,
.xf-js .xf-hero.xf-no-intro .xf-hero__date .xf-ch { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
/* 帯は transform(45°回転) と clip-path(先細り) が静的な形状そのものなので、上のリセットに含めない（含めると無回転の矩形が右側に露出する） */
.xf-js .xf-hero.xf-no-intro .xf-hero__band { animation: none !important; clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%) !important; }
.xf-js .xf-hero.xf-no-intro .xf-hero__photo img { animation: xf-drift 22s ease-in-out 0s infinite alternate !important; opacity: 1 !important; }
.xf-js .xf-hero.xf-no-intro .xf-hero__stamp { animation: xf-wobble 5s ease-in-out 0s infinite !important; opacity: 1 !important; }

/* NEWS: 行に鍵ラベル、モーダル */
.xf-news__lockico { margin-left: auto; padding: 3px 7px; border: 1px solid var(--xf-accent); color: var(--xf-accent); font-weight: 800; font-size: 9px; letter-spacing: .12em; }
.xf-nmdl__panel { display: block; width: min(880px, 100%); max-height: min(84vh, 100%); overflow: hidden; }
.xf-nmdl__body { max-height: min(84vh, 100%); overflow-y: auto; padding: 56px 72px 40px; }
.xf-nmdl__meta { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.xf-nmdl__meta [data-n="cat"][hidden] { display: none; }
.xf-nmdl__title { margin-top: 14px; font-size: 26px; font-weight: 700; line-height: 1.5; }
.xf-nmdl__img { margin: 28px 0 0; overflow: hidden; }
.xf-nmdl__img img { width: 100%; height: auto; }
.xf-nmdl__content { margin-top: 28px; }
.xf-nmdl__content[hidden] { display: none; }
.xf-nmdl__lock { margin-top: 28px; padding: 32px 24px; text-align: center; border: 1px solid var(--xf-line); background: rgba(255,255,255,.03); }
.xf-nmdl__lock[hidden] { display: none; }
.xf-nmdl__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--xf-line); }
.xf-nmdl__all[hidden] { display: none; }
.xf-nmdl .xf-mdl__arrow { top: 50%; }
.xf-nmdl .xf-mdl__count { left: 24px; bottom: 18px; }
.xf-nmdl.is-out-left .xf-nmdl__body, .xf-nmdl.is-out-right .xf-nmdl__body { opacity: 0; transition: opacity .2s ease, transform .3s var(--xf-ease); }
.xf-nmdl.is-out-left .xf-nmdl__body { transform: translate3d(-16px, 0, 0); }
.xf-nmdl.is-out-right .xf-nmdl__body { transform: translate3d(16px, 0, 0); }
.xf-nmdl.is-in-right .xf-nmdl__body { opacity: 0; transform: translate3d(16px, 0, 0); transition: none; }
.xf-nmdl.is-in-left .xf-nmdl__body { opacity: 0; transform: translate3d(-16px, 0, 0); transition: none; }
.xf-nmdl__body { transition: opacity .3s ease, transform .4s var(--xf-ease); }
@media (max-width: 1080px) {
  .xf-nmdl__panel { width: 100%; height: 100%; max-height: none; }
  .xf-nmdl__body { max-height: none; height: 100%; padding: 76px 20px 40px; }
  .xf-nmdl__title { font-size: 21px; }
  .xf-nmdl .xf-mdl__count { left: 16px; top: 22px; bottom: auto; }
  .xf-nmdl .xf-mdl__arrow { top: auto; bottom: 16px; margin-top: 0; }
  .xf-nmdl__foot { flex-direction: column; align-items: stretch; }
  .xf-nmdl__all { width: 100%; }
}

/* 8/31プレオープン時は会員制度まわりを隠す（フェーズ切替に連動） */
[data-xf-phase="pre"] [data-phase="full"], [data-xf-phase="full"] [data-phase="pre"] { display: none !important; }
[data-xf-phase="pre"] .xf-mypage__grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }

/* メンバーモーダル: 初回コメント（本人談） */
.xf-mdl__comment { margin: 4px 0 0; padding: 16px 18px; border-left: 2px solid var(--xf-accent); background: rgba(18,184,217,.06); font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.92); }
.xf-mdl__comment[hidden] { display: none; }
/* 日本語表記のメンバー名は和文フォントで（Archivoに無い字形の崩れ防止） */
.xf-mdl__name, .xf-mem__meta b { font-family: var(--xf-en), var(--xf-ja); }

/* メンバーモーダル(PC): 高さ固定・写真は縦いっぱい・テキスト側だけ縦スクロール */
@media (min-width: 1081px) {
  /* パネル比 1180:760 と 写真カラム比率(507/1000) を揃えてあるので、写真は常に縦いっぱいに入る */
  .xf-mdl__panel { height: min(760px, calc(100vh - 48px)); max-height: none; align-items: stretch; }
  .xf-mdl__body { min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .xf-mdl__body::-webkit-scrollbar { width: 6px; }
  .xf-mdl__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
  .xf-mdl__body::-webkit-scrollbar-track { background: transparent; }
}

/* メンバーモーダルの写真は一覧タイルと同一トリミング（--pl/--pw/--pt）。
   パネル高さより低い分は上下に均等な余白＝天地中央になる（人物は縮めない） */
.xf-mdl__photo { align-self: center; justify-self: stretch; width: 100%; height: auto; max-height: 100%; aspect-ratio: 426.67 / 541.35; }
/* 名前は正式表記のまま（大文字小文字を尊重） */
.xf-mdl__name, .xf-mem__meta b, .xf-talk__mbtn span.xf-en, .xf-post__head b, .xf-talk__members span { text-transform: none !important; }

/* フッターの公式SNS */
.xf-footer__sns { display: flex; gap: 16px; align-items: center; grid-column: 1 / -1; margin-top: 8px; }
.xf-footer__sns a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); transition: color .3s, border-color .3s, background .3s; }
.xf-footer__sns svg { width: 17px; height: 17px; }
.xf-footer__sns a:hover { color: #0E0E0E; background: var(--xf-accent); border-color: var(--xf-accent); }
/* CONTACT: 斜め帯と左テキストが重なって読めない対策 */
.xf-contact__intro, .xf-contact__facts { position: relative; z-index: 1; }
.xf-contact__intro { padding: 20px 22px; background: rgba(34,34,34,.72); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255,255,255,.08); }

/* ---- TOP 固定SNSレール（右端） ---- */
.xf-rail { position: fixed; z-index: 40; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 14px; pointer-events: none; }
.xf-rail > * { pointer-events: auto; }
.xf-rail__line { width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.35)); pointer-events: none; }
.xf-rail__label { writing-mode: vertical-rl; font-weight: 800; font-size: 10px; letter-spacing: .28em; color: rgba(255,255,255,.55); }
.xf-rail__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xf-rail__list a { display: grid; place-items: center; width: 38px; height: 38px; color: rgba(255,255,255,.72); transition: color .3s var(--xf-ease), background .3s var(--xf-ease), transform .3s var(--xf-ease); }
.xf-rail__list svg { width: 19px; height: 19px; }
.xf-rail__list a:hover { color: #0E0E0E; background: var(--xf-accent); transform: translateX(-3px); }
.xf-rail__contact { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 6px; }
@media (max-width: 1080px) {
  /* SPは右下の角に小さく置く（右中央だと本文の行末に重なって読みにくい） */
  .xf-rail { top: auto; bottom: 12px; right: 10px; transform: none; flex-direction: row; gap: 0; padding: 4px 6px;
    background: rgba(24,24,24,.5); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,.12); }
  .xf-rail__line, .xf-rail__label { display: none; }
  .xf-rail__list { flex-direction: row; gap: 0; }
  .xf-rail__list a { width: 34px; height: 34px; }
  .xf-rail__list svg { width: 16px; height: 16px; }
  .xf-rail__contact { margin: 0 0 0 3px; border-top: 0; border-left: 1px solid rgba(255,255,255,.18); padding: 0 0 0 3px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1080px) { .xf-rail { background: rgba(24,24,24,.82); } }
}
@media print { .xf-rail { display: none; } }

/* ---- 1stビューのイベント告知バー（ヘッダー直下） ----
   8/28 CRF: A公式のPOPUPバナーのように「イベント誘引」を最優先。アクセント全面塗り＋太字で目立たせる */
.xf-ann {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 16px; padding: 14px 80px; min-height: 56px;
  /* 右へ沈むグラデ: KVの斜めバンド(フラットな --xf-accent)と色がダブらないように */
  background: linear-gradient(100deg, #1FC9E6 0%, #12B8D9 45%, #0C8FB3 78%, #07536F 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
  color: #0E0E0E; text-decoration: none;
  animation: xf-ann-in .9s var(--xf-ease) .05s both;
}
@keyframes xf-ann-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
.xf-ann__tag { flex: none; padding: 5px 10px; background: #0E0E0E; color: var(--xf-accent); font-weight: 800; font-size: 10px; letter-spacing: .16em; line-height: 1; }
/* 主役は見出し。日付・補足はそれより一段落とす */
.xf-ann__text { font-size: 18px; font-weight: 900; line-height: 1.4; letter-spacing: .03em; }
.xf-ann__date { flex: none; font-weight: 800; font-size: 13px; letter-spacing: .06em; line-height: 1; color: rgba(14,14,14,.72); }
.xf-ann__date::before { content: ""; display: inline-block; width: 1px; height: 11px; margin-right: 12px; background: rgba(14,14,14,.32); vertical-align: -1px; }
.xf-ann__note { font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: rgba(14,14,14,.6); }
.xf-ann__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .08em; color: #0E0E0E; text-decoration: underline; text-underline-offset: 4px; }
.xf-ann__cta i { width: 16px; height: 2px; background: currentColor; transition: width .35s var(--xf-ease); }
.xf-ann:hover { background: linear-gradient(100deg, #17B4CF 0%, #0FA3C2 45%, #0A7C9C 78%, #06465E 100%); }
.xf-ann:hover .xf-ann__cta i { width: 28px; }
@media (max-width: 1080px) {
  .xf-ann { gap: 4px 10px; padding: 12px 16px; min-height: 50px; }
  /* SPは見出しとCTAだけ（補足まで出すと3行になってKVを押し下げる） */
  .xf-ann__text { font-size: 14px; }
  .xf-ann__note { display: none; }
  .xf-ann__date { display: none; }
  .xf-ann__cta { font-size: 11px; }
}

/* ---- 日本語の折り返しを句読点位置に限定（snippets/xeed-fc-jp.liquid が出力）---- */
.xf-ph { display: inline-block; }

/* ---- イベント事前予約: 完了表示 ---- */
.xf-ef__mark { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18,184,217,.22), rgba(18,184,217,0));
  box-shadow: 0 0 0 1px rgba(18,184,217,.5) inset; animation: xf-done-pop .8s var(--xf-ease) both; }
.xf-ef__bolt { width: 30px; height: 34px; margin: 0; color: var(--xf-accent); }
.xf-ef__done { text-align: center; padding: 20px 0 8px; }
.xf-ef__done-title { font-weight: 800; font-size: 26px; letter-spacing: .16em; color: var(--xf-accent); }
.xf-ef__done-lead { margin-top: 10px; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.xf-ef__done-text { margin-top: 10px; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.8); }
@keyframes xf-done-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }

/* ---- 完了モーダル ---- */
.xf-mdl--done::backdrop { background: rgba(0,0,0,.78); }
.xf-done { position: relative; width: min(560px, 100%); padding: 52px 44px 40px; text-align: center;
  background: linear-gradient(180deg, rgba(18,184,217,.10), rgba(18,184,217,0) 46%), #222222;
  border: 1px solid rgba(18,184,217,.42); box-shadow: 0 30px 90px -40px rgba(18,184,217,.6);
  animation: xf-done-in .7s var(--xf-ease) both; }
@keyframes xf-done-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.xf-done__mark { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18,184,217,.26), rgba(18,184,217,0));
  box-shadow: 0 0 0 1px rgba(18,184,217,.55) inset; animation: xf-done-pop .8s var(--xf-ease) .12s both; }
.xf-done__bolt { width: 36px; height: 40px; margin: 0; color: var(--xf-accent); }
.xf-done__eyebrow { font-weight: 800; font-size: 12px; letter-spacing: .3em; color: var(--xf-accent); }
.xf-done__title { margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.xf-done__text { margin-top: 12px; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.8); }
.xf-done__steps { margin: 26px 0 0; padding: 0; list-style: none; text-align: left; border-top: 1px solid var(--xf-line); }
.xf-done__steps li { display: flex; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--xf-line); font-size: 13px; line-height: 1.8; }
.xf-done__steps b { flex: none; color: var(--xf-accent); font-weight: 800; font-size: 12px; letter-spacing: .1em; padding-top: 2px; }
.xf-done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
@media (max-width: 1080px) {
  .xf-done { padding: 44px 20px 32px; }
  .xf-done__title { font-size: 19px; }
  .xf-done__mark { width: 74px; height: 74px; }
  .xf-done__actions .xf-btn { width: 100%; justify-content: center; }
}

/* ---- メンバーモーダル: 選手の背面に走る斜めバンド（サイト共通の帯と同じ表情） ---- */
.xf-mdl__band {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 280%; height: 21%;
  background: linear-gradient(90deg, rgba(8,74,88,.95) 0%, var(--xf-accent) 48%, #62DAF0 100%);
  clip-path: polygon(0 0, 100% 24%, 100% 76%, 0 100%);  /* 左下が太く、右上へ細く */
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0; pointer-events: none;
}
.xf-mdl__band::after {           /* 帯の上を通る細いハイライト */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; opacity: .35;
}
.xf-mdl__ph { z-index: 1; }
.xf-mdl__band.is-in { animation: xf-mdlband-in 1.15s var(--xf-ease) both, xf-mdlband-drift 11s ease-in-out 1.25s infinite alternate; }
@keyframes xf-mdlband-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) translateX(-52%) scaleY(.55); }
  60%  { opacity: .96; }
  100% { opacity: .82; transform: translate(-50%, -50%) rotate(-45deg) translateX(0) scaleY(1); }
}
@keyframes xf-mdlband-drift {
  from { transform: translate(-50%, -50%) rotate(-45deg) translateX(0) scaleY(1); }
  to   { transform: translate(-50%, -50%) rotate(-45deg) translateX(5%) scaleY(1.04); }
}
.xf-mdl__band.is-in::after { animation: xf-mdlband-shine 2.6s var(--xf-ease) .35s 1 both; }
@keyframes xf-mdlband-shine { from { transform: translateX(-45%); opacity: 0; } 35% { opacity: .5; } to { transform: translateX(45%); opacity: 0; } }
.xf-reduce .xf-mdl__band.is-in, .xf-reduce .xf-mdl__band.is-in::after { animation: none; opacity: .85; transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 1080px) { .xf-mdl__band { height: 26%; } }