/*
 * Explore Japan の4つの入口（Feeling / Seasons / Pace / One Day）の共通の骨。
 *
 * ■ 新しいデザインシステムを作らない
 *
 *   色・角丸・字・緩急はすべて `css/staygo-os.css` の `--os-*` から取る。
 *   ここで新しい値を決めない。決めた瞬間に、採用したとき
 *   「本番にはその値が無い」ことになる。
 *
 * ■ 動きの目安（指示どおり）
 *   触った反応 150〜220ms / 中身の入れ替え 250〜350ms
 *   写真 350〜500ms / 順番待ち 50〜90ms
 */
:root{
  --p-fast:180ms;      /* 触った反応 */
  --p-swap:300ms;      /* 中身の入れ替え */
  --p-img:420ms;       /* 写真 */
  --p-step:70ms;       /* 順番待ち1つぶん */
  --p-ease:cubic-bezier(.22,1,.36,1);
  --p-line:var(--os-border);
  --p-ink:var(--os-ink);
  --p-muted:var(--os-ink-muted);
}
/* ⚠️ 他の49ページと同じ土台。抜けると body に既定の 8px が残る */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--os-bg);color:var(--p-ink);font-family:var(--os-font);
  -webkit-font-smoothing:antialiased}
/* ⚠️ nav は position:fixed。上の余白が足りないと、見出しが帯の下に潜る
      （実測で eyebrow が隠れていた）。japan.html と同じ 92px を取る */
.p-wrap{max-width:1440px;margin:0 auto;padding:92px 40px 72px}

/* ── 見出し ─────────────────────────────────────────── */
.p-eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--os-accent);margin-bottom:14px}
.p-h1{font-size:clamp(32px,3.6vw,52px);line-height:1.08;letter-spacing:-.025em;font-weight:700;
  text-wrap:balance}
.p-lead{font-size:15px;line-height:1.75;color:var(--p-muted);max-width:44ch;margin-top:16px}

/* ── 選ぶもの（feeling / theme / pace / month で共通） ── */
.p-choice{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  border:1px solid var(--p-line);border-radius:var(--os-radius-pill);
  background:transparent;color:var(--p-muted);
  font:inherit;font-size:13.5px;font-weight:600;padding:0 18px;cursor:pointer;
  transition:color var(--p-fast) ease,border-color var(--p-fast) ease,background var(--p-fast) ease}
.p-choice:hover{color:var(--p-ink);border-color:var(--os-border-strong)}
/* ⚠️ 選んでいることを色だけで表さない。地と字と、左の印の3つで言う */
.p-choice[aria-pressed="true"]{background:var(--os-surface-ink);border-color:var(--os-surface-ink);color:#fff}
.p-choice[aria-pressed="true"]::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--os-accent-soft);flex:none}
.p-choice:focus-visible{outline:2px solid var(--os-accent);outline-offset:2px}

/* ── 写真 ───────────────────────────────────────────── */
.p-shot{position:relative;overflow:hidden;border-radius:var(--os-radius-media);
  background:var(--os-surface-2)}
.p-shot img{display:block;width:100%;height:100%;object-fit:cover}
/* ⚠️ 撮影地は必ず出す。別の土地の写真を「ここの写真」と読ませない */
.p-where{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted);
  margin-top:8px}
.p-where b{font-weight:600;color:var(--p-ink)}

/* ── 入れ替えの動き ──────────────────────────────────── */
@keyframes p-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes p-fade{from{opacity:0}to{opacity:1}}
.p-step-in{animation:p-in var(--p-swap) var(--p-ease) both;
  animation-delay:calc(var(--i,0) * var(--p-step))}
/* 写真は重ねて crossfade。消してから出さない */
.p-cross{position:relative}
.p-cross img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-cross img.is-out{animation:p-fade var(--p-img) ease reverse both}
.p-cross img.is-in{animation:p-fade var(--p-img) ease both}

@media (prefers-reduced-motion:reduce){
  /* ⚠️ 消さずに、出したまま止める */
  .p-step-in,.p-cross img.is-in,.p-cross img.is-out{animation:none !important;opacity:1 !important;transform:none !important}
  *{transition-duration:1ms !important}
}

/* ── スマホ ─────────────────────────────────────────── */
@media (max-width:900px){
  .p-wrap{padding:78px 18px 56px}
}