/* ═══ 体験の頁（/experience-<slug>・2026-10-13 Tom「開いた先のとこも作ってよ」） ═══
   骨は css/staygo-os.css の「旅程の見本の頁」（.tp-*）と「体験」（.exp-*）をそのまま使い、
   ここには体験の頁だけにある部品（流れの番号・金額の表・知っておくこと・STAYGO がすること）を置く。
   中身は scripts/lp/experience-pages.py。この頁だけが読む（ほかの頁の ?v を動かさないため別の1枚にした）。
   ⚠️ 色・角丸・字は staygo-os.css の変数だけを使う。:root を書き足さない。
   ⚠️ 字の色は大域の `p, li`・`h2`・`a` の指定に負ける。名指しで !important（staygo-os.css と同じ書き方）。
   ═══════════════════════════════════════════════════════════════ */
.xp .xp-h1 { max-width: 22ch; }
.xp-h1:is(:lang(ja), :lang(zh), :lang(zh-Hant), :lang(ko)) { word-break: keep-all; overflow-wrap: anywhere; }
.xp .xp-photo-note {
  margin: 8px auto 0; padding: 0 var(--os-page); max-width: 760px; text-align: center;
  color: var(--os-ink-subtle) !important; font-size: 13px; line-height: 1.5;
}

.xp-sec { margin-top: 56px; }
.xp-sec:first-child { margin-top: 0; }
.xp-sec > p { margin: 0 0 16px; color: var(--os-ink-muted) !important; font-size: 17px; line-height: 1.75; }
.xp-sec > p:last-child { margin-bottom: 0; }

/* 当日の流れ: 番号の丸と縦の細い線 */
.xp-steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: none; }
.xp-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; margin: 0; padding: 0 0 26px; }
.xp-step::before { content: none !important; }
.xp-step:not(:last-child)::after {
  content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 6px; width: 1px; background: var(--os-border);
}
.xp-step-n {
  width: 40px; height: 40px; border-radius: var(--os-radius-pill); border: 1px solid var(--os-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--os-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--os-surface);
}
.xp .xp-step .tp-h3 { margin: 8px 0 4px !important; }
.xp-step p { margin: 0; color: var(--os-ink-muted) !important; font-size: 16px; line-height: 1.65; }

/* 目安の金額: 2列の表。合計の行は太く */
.xp-price { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.xp-price th, .xp-price td { padding: 14px 0; border-bottom: 1px solid var(--os-border); vertical-align: top; }
.xp-price th { text-align: left; font-weight: 400; color: var(--os-ink-muted); font-size: 16px; line-height: 1.5; padding-right: 16px; }
.xp-price td { text-align: right; color: var(--os-ink); font-size: 16px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.xp-price .xp-total th, .xp-price .xp-total td { color: var(--os-ink); font-weight: 700; font-size: 18px; border-bottom: 2px solid var(--os-ink); }
.xp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xp-pnotes { list-style: none; margin: 16px 0 0; padding: 0; }
.xp-pnotes li { margin: 0 0 6px; padding: 0; color: var(--os-ink-subtle) !important; font-size: 14px; line-height: 1.6; }
.xp-pnotes li::before { content: none !important; }

/* 知っておくこと: 細線のアイコン＋札＋文 */
.xp-know { margin: 8px 0 0; padding: 0; }
.xp-know-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--os-border); }
.xp-know dt { display: flex; align-items: flex-start; gap: 10px; color: var(--os-ink); font-size: 15px; font-weight: 600; line-height: 1.45; }
.xp-know dd { margin: 0; color: var(--os-ink-muted); font-size: 15px; line-height: 1.65; }
.xp-ic { flex: none; display: inline-flex; color: var(--os-ink); }
.xp-ic svg { display: block; }

/* STAYGO がすること: 面の中に、印付きの行と支払いの1行 */
.xp .xp-do-sec { padding: 32px 36px !important; background: var(--os-surface-2) !important; border-radius: var(--os-radius-card); }
.xp-do { list-style: none; margin: 4px 0 0; padding: 0; }
.xp-do li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 0; color: var(--os-ink) !important; font-size: 16px; line-height: 1.6; }
.xp-do li::before { content: none !important; }
.xp-do .xp-ic { margin-top: 2px; color: var(--os-accent-ink); }
.xp .xp-pay { margin: 18px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--os-border); color: var(--os-ink) !important; font-size: 15px; line-height: 1.7; font-weight: 400; }
.xp .xp-only { margin: 8px 0 0 !important; color: var(--os-ink-subtle) !important; font-size: 14px; line-height: 1.6; }

/* ほかの体験（トップのカードと同じ部品）。上の本文と地を分ける */
.xp-more { border-top: 1px solid var(--os-border); }
.xp-more .exp-head { margin-bottom: 32px; }
.xp-more .exp-title { font-size: clamp(26px, 2.8vw, 36px) !important; }

:lang(ja) .xp-know dt, :lang(zh) .xp-know dt, :lang(zh-Hant) .xp-know dt, :lang(ko) .xp-know dt,
:lang(ja) .xp-step .tp-h3, :lang(zh) .xp-step .tp-h3, :lang(zh-Hant) .xp-step .tp-h3, :lang(ko) .xp-step .tp-h3 { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 759px) {
  .xp-sec { margin-top: 44px; }
  .xp-sec > p { font-size: 16px; }
  .xp-know-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .xp-know dd { padding-left: 32px; }
  .xp .xp-do-sec { padding: 26px 22px !important; }
  .xp-price th, .xp-price td { font-size: 15px; }
  .xp-step { gap: 14px; }
}