/* ==========================================================================
   静麗 紗那 — 霊媒師セッションLP
   Base / reset / shared tokens
   ========================================================================== */

:root {
  --serif: 'Shippori Mincho B1', serif;
  --gothic: 'Zen Kaku Gothic New', sans-serif;
  --display: 'Cormorant Garamond', serif;
  --mono: ui-monospace, Menlo, monospace;
  --gold: #8C6D2F;
  --gold-light: #A8863F;
  --gold-line: rgba(168, 134, 63, .3);
  --ink: #221F1A;
  --body-text: #5B554B;
  --muted: #8C8578;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #FAF7F1;
  color: var(--ink);
  overflow-x: hidden;
  transition: background .8s ease;
  text-wrap: pretty;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #B8933F; }

/* ---- Japanese phrase-wrapping (BudouX) ---- */
budoux-ja { word-break: keep-all; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ---- flex-child overflow guard ---- */
.hero-actions > *, .hero-footrow > *, footer > * { min-width: 0; }
.page-love .worry-card > * { min-width: 0; }
.faq-q > *, .faq-a > * { min-width: 0; }

::selection { background: #E7CE8F; color: var(--ink); }

button { font: inherit; }

/* ---- animations ---- */
@keyframes sweep {
  0% { transform: translateX(-110%); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes breathe {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.04); }
}

/* ==========================================================================
   Flash transition overlay
   ========================================================================== */

.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
.flash.is-active { display: block; }
.flash-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 65%;
  background: linear-gradient(100deg,
    rgba(250,247,241,0) 0%,
    rgba(231,206,143,.55) 38%,
    rgba(255,253,247,.95) 52%,
    rgba(231,206,143,.5) 64%,
    rgba(250,247,241,0) 100%);
  animation: sweep .9s cubic-bezier(.4,0,.2,1) both;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 7vw;
  border-bottom: 1px solid var(--gold-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(250, 247, 241, .867);
  transition: background .8s ease;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-en {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--gold-light);
  text-transform: uppercase;
}
.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .24em;
  color: var(--ink);
}

.tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.4vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 2px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .16em;
  color: #9A9384;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .4s ease;
}
.tab-num {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  color: #BDB4A0;
}
.tab-underline {
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 1px;
  background: linear-gradient(90deg, #9C7A2E, #E7CE8F);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.tab.is-active { font-size: 16px; color: var(--ink); }
.tab.is-active .tab-num { color: var(--gold); }
.tab.is-active .tab-underline { transform: scaleX(1); }

/* ---- Mobile hamburger toggle ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid rgba(168, 134, 63, .4);
  background: rgba(255, 253, 247, .6);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease;
}
.nav.is-menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Floating reservation CTA (round)
   ========================================================================== */

.float-cta {
  position: fixed;
  right: 56px;
  bottom: 56px;
  z-index: 70;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: #E7D9BA;
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 14.5px;
  letter-spacing: .06em;
  line-height: 1.4;
  box-shadow: 0 14px 34px -14px rgba(140, 109, 47, .45), 0 2px 10px rgba(140, 109, 47, .25);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, filter .25s ease;
}
.float-cta.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.float-cta:hover { transform: translateY(-3px) scale(1); filter: brightness(1.04); color: var(--ink); }
.float-cta-en { font-family: var(--display); font-style: italic; font-size: 11px; letter-spacing: .14em; color: var(--gold); opacity: .9; }

.float-cta::before,
.float-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(140, 109, 47, .5);
  animation: floatPulse 4.4s ease-out infinite;
  pointer-events: none;
}
.float-cta::after { animation-delay: 2.2s; }
.float-cta:not(.is-visible)::before,
.float-cta:not(.is-visible)::after { animation-play-state: paused; }

@keyframes floatPulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 38px;
  background: linear-gradient(100deg, #9C7A2E, #D9BC72 46%, #8C6D2F);
  color: #FFFDF8;
  font-family: var(--gothic);
  font-size: 14px;
  letter-spacing: .2em;
  box-shadow: 0 12px 34px -18px rgba(140, 109, 47, .9);
  transition: filter .2s ease;
}
.btn:hover { filter: brightness(1.07); color: #FFFDF8; }
.btn-arrow { font-family: var(--display); font-size: 16px; }

.btn.outline {
  background: rgba(255, 253, 247, .6);
  color: var(--gold);
  box-shadow: none;
  border: 1px solid rgba(168, 134, 63, .6);
  padding: 16px 36px;
}
.btn.outline:hover { filter: brightness(1.03); color: var(--gold); }

.btn.line {
  background: #06C755;
  color: #FFFFFF;
  box-shadow: 0 12px 30px -16px rgba(6, 199, 85, .7);
  border: none;
  padding: 17px 38px;
}
.btn.line:hover { filter: brightness(1.06); color: #FFFFFF; }

/* ==========================================================================
   FV — First View (5 floating sessions)
   ========================================================================== */

@keyframes fvWashA { 0% { transform: translate3d(-6%, -4%, 0) scale(1.15); } 50% { transform: translate3d(5%, 6%, 0) scale(1.3); } 100% { transform: translate3d(-6%, -4%, 0) scale(1.15); } }
@keyframes fvWashB { 0% { transform: translate3d(6%, 5%, 0) scale(1.25); } 50% { transform: translate3d(-5%, -6%, 0) scale(1.1); } 100% { transform: translate3d(6%, 5%, 0) scale(1.25); } }
@keyframes fvWashC { 0% { transform: translate3d(0, 4%, 0) scale(1.2) rotate(0deg); } 50% { transform: translate3d(-4%, -3%, 0) scale(1.35) rotate(8deg); } 100% { transform: translate3d(0, 4%, 0) scale(1.2) rotate(0deg); } }
@keyframes fvScrollLine { 0% { transform: scaleY(.3); transform-origin: top; opacity: .3; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(.3); transform-origin: bottom; opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .fv [data-wash-anim], .fv-scrolldown-line { animation: none !important; }
}

.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  /* svh：SPでスクロール中にアドレスバーが縮んでも高さが変わらず、中央のパネルが下へずれない（dvhだと追従して動く） */
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #F4EFE4;
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  color: #6B6155;
  isolation: isolate;
}

.fv [data-wash-anim] {
  position: absolute; inset: -20%; pointer-events: none;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}

.fv-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background-image:
    repeating-linear-gradient(90deg, rgba(107,97,85,.05) 0px, rgba(107,97,85,.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px),
    repeating-linear-gradient(0deg, rgba(107,97,85,.04) 0px, rgba(107,97,85,.04) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 4px);
}

.fv-orbwash { position: absolute; inset: -15%; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; transition: opacity 1100ms cubic-bezier(.16,1,.3,1); }

.fv-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .55; }

.fv-orblayer { position: absolute; inset: 0; pointer-events: none; }
.fv-orb { position: absolute; left: 0; top: 0; border-radius: 50%; outline: none; will-change: transform; }
.fv-orb-body { position: absolute; inset: 0; border-radius: 50%; transition: transform 480ms cubic-bezier(.16,1,.3,1), opacity 900ms cubic-bezier(.16,1,.3,1); }
.fv-orb-glow { position: absolute; inset: -42%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle at 50% 50%, rgba(255,243,225,.5) 0%, rgba(248,231,206,.2) 48%, rgba(244,239,228,0) 76%); }
.fv-orb-photo {
  position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; opacity: .88;
  transition: filter 470ms cubic-bezier(.16,1,.3,1), opacity 700ms ease;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #fff 34%, rgba(255,255,255,.6) 62%, rgba(255,255,255,0) 84%);
  mask-image: radial-gradient(circle at 50% 46%, #fff 34%, rgba(255,255,255,.6) 62%, rgba(255,255,255,0) 84%);
}
.fv-orb-hi { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle at 42% 36%, rgba(255,252,244,.62) 0%, rgba(255,246,230,.16) 40%, rgba(255,240,220,0) 72%); }

/* SP only: the outside labels are hidden there (no room), so each orb
   carries its own small name — kept inside [data-body] so it fades/scales
   with the orb when one is expanded */
.fv-orb-text { display: none; }
@media (max-width: 768px) {
  .fv-orb-text {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 16%; text-align: center; pointer-events: none;
    font-family: 'Zen Old Mincho', serif; font-size: 10.5px; line-height: 1.5; letter-spacing: .14em;
    color: #FFFBF3; word-break: keep-all;
    text-shadow: 0 0 6px rgba(58,48,38,.7), 0 0 2px rgba(58,48,38,.55);
  }
}

.fv-labels { position: absolute; inset: 0; pointer-events: none; }
.fv-label {
  position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: .55em; white-space: nowrap;
  visibility: hidden; opacity: .72;
  transition: opacity 460ms cubic-bezier(.16,1,.3,1), filter 460ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.fv-label-kanji { font-family: 'Zen Old Mincho', serif; font-size: .72rem; color: #8A7A66; letter-spacing: .1em; }
.fv-label-name { font-family: 'Zen Old Mincho', serif; font-size: 1.02rem; letter-spacing: .22em; color: #6B6155; }

.fv-noterow { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(28rem, 84vw); text-align: center; pointer-events: none; height: 1.6em; }
.fv-note {
  position: absolute; left: 0; right: 0; top: 0; opacity: 0;
  font-size: .72rem; line-height: 1.6; letter-spacing: .14em; color: #8A7A66; font-weight: 300;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1);
}

.fv-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(30rem, 78vw); text-align: center; pointer-events: none; transition: opacity 800ms ease; }
.fv-center-en { font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .42em; color: #9C8C78; font-weight: 300; }
.fv-center-name { margin-top: 1.6em; font-family: 'Zen Old Mincho', serif; font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: .3em; color: #6B6155; font-weight: 400; text-indent: .3em; }
.fv-center-sub { margin-top: 1.5em; font-family: 'Zen Old Mincho', serif; font-size: clamp(.9rem, 1.5vw, 1.1rem); letter-spacing: .34em; color: #7C6E5D; text-indent: .34em; }
.fv-center-lead { margin: 2.4em auto 0; max-width: 26rem; font-size: .78rem; line-height: 2.3; letter-spacing: .16em; color: #8A7A66; font-weight: 300; text-wrap: pretty; }

.fv-exp { position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity 600ms ease; }
.fv-exp-img { position: absolute; inset: -10%; background-size: cover; background-position: center; transform: scale(.18); transition: transform 1700ms cubic-bezier(.16,1,.3,1); }
.fv-exp-veil { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 42%, rgba(255,252,245,.55) 0%, rgba(244,239,228,.72) 100%); }

.fv-wordlayer { position: absolute; inset: 0; pointer-events: none; }
.fv-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(64rem, 94vw); max-height: min(88vh, 88svh); overflow: hidden;
  text-align: left; opacity: 0; transition: opacity 900ms cubic-bezier(.16,1,.3,1);
}
.fv-word-goto {
  display: inline-block; margin-top: 1.6em;
  font-family: 'Zen Kaku Gothic New', sans-serif; font-size: .74rem; letter-spacing: .18em; color: #6B6155;
  border-bottom: 1px solid rgba(107,97,85,.45); padding-bottom: .3em; transition: color .25s ease, border-color .25s ease;
}
.fv-word-goto:hover { color: #8A7A66; border-color: rgba(138,122,102,.6); }
.fv-word-esc { margin-top: 1.2rem; font-family: 'Jost', sans-serif; font-size: .6rem; letter-spacing: .34em; color: #9C8C78; text-align: center; }
.fv-word-goto-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ==========================================================================
   Hero content, relocated into the expanded FV circle so it fits in one
   screen (no separate <section class="hero"> in the page body). Each word
   keeps its own original layout — scoped by [data-word] rather than the
   body[data-cat] the standalone hero used to rely on, since all 5 words
   live in the same shared, page-duplicated FV markup regardless of which
   actual page is currently hosting it.
   ========================================================================== */
.fvh-eyebrow-row { display: flex; align-items: center; gap: 10px; }
.fvh-eyebrow-rule { width: 30px; height: 1px; background: linear-gradient(90deg, #B8933F, rgba(184,147,63,0)); }
.fvh-en { font-family: var(--display); font-style: italic; font-size: clamp(10px, 1vw, 13px); letter-spacing: .2em; color: var(--gold-light); }
.fvh-h1 {
  margin: 10px 0 0; font-family: var(--serif); font-weight: 500; letter-spacing: .03em; color: var(--ink);
  font-size: clamp(1.1rem, 1.5vw + 1vh, 2rem); line-height: 1.4;
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
.fvh-h1 em { font-style: normal; color: #8C6D2F; }
.fvh-lead {
  margin: 10px 0 0; font-family: var(--gothic); font-weight: 300; color: var(--body-text);
  font-size: clamp(.72rem, .45vw + .4vh, .88rem); line-height: 1.7; max-width: 30em;
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty;
}
.fvh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fvh-tags .tag { font-size: 9.5px; padding: 4px 11px; }
.fvh-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.fvh-actions .btn { padding: 10px 21px; font-size: 11.5px; gap: 7px; }
.fvh-actions .btn-arrow { font-size: 12px; }
.fvh-note { margin: 8px 0 0; font-family: var(--gothic); font-size: 10px; letter-spacing: .05em; color: var(--muted); text-wrap: pretty; }

.fvh-art-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,253,247,.6), rgba(219,196,140,.28));
  border: 1px solid rgba(168,134,63,.25); aspect-ratio: 4 / 5; max-height: 30vh;
  display: flex; align-items: flex-end; padding: 10px;
}
.fvh-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fvh-art-glow { position: absolute; inset: 0; background: radial-gradient(60% 55% at 60% 30%, rgba(255,251,235,.4), rgba(255,251,235,0)); }
.fvh-art-ring { position: absolute; inset: 15%; border: 1px solid rgba(255,253,247,.55); border-radius: 50%; }
.fvh-art-note { position: relative; font-family: var(--gothic); font-size: 9px; letter-spacing: .04em; color: var(--muted); }

/* 00 · relationship — copy left, art panel right */
.fv-word[data-word="0"] .fvh-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; }

/* 01 · parent — photo left, copy right, two soft rings behind both. the
   copy is the longest of the five, so stacking the photo on top made this
   the tallest panel and crowded the nav on ~768px-tall screens; side by
   side keeps it compact. photo on the left so mother and child face into
   the copy. */
.fv-word[data-word="1"] .fvh-grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; align-items: center; }
.fv-word[data-word="1"] .fvh-art-frame { max-height: 36vh; margin-left: auto; }
.fv-word[data-word="1"] .fvh-art-img { object-position: 30% 50%; }
.fv-word[data-word="1"] .fvh-ring-a, .fv-word[data-word="1"] .fvh-ring-b {
  position: absolute; border: 1px solid rgba(168,134,63,.22); border-radius: 50%; z-index: -1;
}
.fv-word[data-word="1"] .fvh-ring-a { width: 120%; height: 150%; top: -25%; left: -10%; }
.fv-word[data-word="1"] .fvh-ring-b { width: 80%; height: 100%; top: 0; right: -6%; left: auto; }

/* 02 · ancestor — art panel left, copy right; the headline itself reads
   top-to-bottom (縦書き), fitting for a page about the departed */
.fv-word[data-word="2"] .fvh-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: center; }
.fv-word[data-word="2"] .fvh-vertical {
  writing-mode: vertical-rl; display: flex; align-items: flex-start; gap: 18px; margin-bottom: 6px;
}
/* one phrase per column, never broken mid-phrase: the column height follows
   the text instead of a fixed box (a fixed height + balance/anywhere
   wrapping split it into ragged or single-character columns). if the web
   font fails to load, fall back to mincho faces that ship vertical metrics
   before the generic serif, which on some systems stacks kanji on top of
   each other in vertical-rl. */
.fv-word[data-word="2"] .fvh-vertical .fvh-h1 {
  flex: none; margin: 0; font-size: clamp(.95rem, min(1.1vw + .9vh, 2.4vh), 1.6rem); line-height: 1.9; letter-spacing: .16em;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
  white-space: nowrap; word-break: normal; overflow-wrap: normal; text-wrap: nowrap;
}
.fv-word[data-word="2"] .fvh-vertical .fvh-h1 > budoux-ja, .fv-word[data-word="2"] .fvh-vertical .fvh-h1 > em { display: block; }
.fv-word[data-word="2"] .fvh-en-vert {
  writing-mode: horizontal-tb; font-family: var(--display); font-style: italic;
  font-size: clamp(10px, 1vw, 13px); letter-spacing: .2em; color: var(--gold-light); align-self: flex-end;
}

/* 03 · house — centered copy under a soft orb glow */
.fv-word[data-word="3"] { text-align: center; }
.fv-word[data-word="3"] .fvh-copy { position: relative; max-width: 34em; margin: 0 auto; }
.fv-word[data-word="3"] .fvh-eyebrow-row { justify-content: center; }
.fv-word[data-word="3"] .fvh-tags { justify-content: center; }
.fv-word[data-word="3"] .fvh-actions { align-items: center; }
.fv-word[data-word="3"] .fvh-orb {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 60%; padding-bottom: 60%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 46% 40%, rgba(255,253,246,.7) 0%, rgba(248,233,209,.32) 45%, rgba(244,239,228,0) 78%);
}
/* the house photo is a wide scene (house left, garden right) that a side
   column would crop in half, and the copy is short — so it sits on top */
.fv-word[data-word="3"] .fvh-art-frame {
  aspect-ratio: 3 / 2; height: clamp(110px, 22vh, 220px); max-height: none; max-width: 100%; margin: 0 auto 16px;
}
.fv-word[data-word="3"] .fvh-lead { margin-left: auto; margin-right: auto; }
.fv-word[data-word="3"] .fvh-rule { display: block; width: 30px; height: 1px; margin: 0 auto 10px; background: linear-gradient(90deg, rgba(184,147,63,0), #B8933F, rgba(184,147,63,0)); }

/* 04 · health — art panel left + copy right on top, lead/actions span full width below */
.fv-word[data-word="4"] .fvh-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: center; }
.fv-word[data-word="4"] .fvh-divider { display: block; width: 26px; height: 1px; margin: 10px 0; background: linear-gradient(90deg, #B8933F, rgba(184,147,63,0)); }
/* keep each phrase whole so the heading never breaks mid-phrase (and never
   strands the closing 。 on its own line), even if BudouX fails to load */
.fvh-h1 .fvh-phrase { display: inline-block; }
/* photo alone on the left, the whole copy block (heading → lead → CTAs)
   on the right; the photo can grow to match the taller copy column */
.fv-word[data-word="4"] .fvh-art-frame { max-height: 40vh; margin-left: auto; }
.fv-word[data-word="4"] .fvh-en { display: block; }
.fv-word[data-word="4"] .fvh-lead { margin-top: 14px; }

/* 02 · ancestor：PCでは縦書き見出しの下に横書きの本文が積まれ、見出しは右寄り・本文は左寄りでちぐはぐだったため、
   「写真｜本文｜縦書き見出し」の並びにし（見出しは一番右）、縦の中心を揃えて文字も大きくする */
@media (min-width: 1025px) and (min-height: 701px) {
  .fv-word[data-word="2"] .fvh-grid { grid-template-columns: .75fr 1.25fr; gap: 56px; }
  .fv-word[data-word="2"] .fvh-art-frame { max-height: 50vh; margin: 0 auto; }
  .fv-word[data-word="2"] .fvh-copy { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 56px; }
  .fv-word[data-word="2"] .fvh-vertical { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
  .fv-word[data-word="2"] .fvh-vertical .fvh-h1 { font-size: clamp(1.4rem, min(1.4vw + 1.1vh, 3.2vh), 2.1rem); }
  .fv-word[data-word="2"] .fvh-en-vert { font-size: 14px; }
  .fv-word[data-word="2"] .fvh-lead { grid-column: 1; grid-row: 2; margin: 0; font-size: .95rem; line-height: 1.9; max-width: 26em; }
  .fv-word[data-word="2"] .fvh-tags { grid-column: 1; grid-row: 3; margin-top: 18px; gap: 8px; }
  .fv-word[data-word="2"] .fvh-tags .tag { font-size: 12px; padding: 6px 14px; }
  .fv-word[data-word="2"] .fvh-actions { grid-column: 1; grid-row: 4; margin-top: 26px; gap: 12px; }
  .fv-word[data-word="2"] .fvh-actions .btn { padding: 14px 28px; font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
  .fv-word[data-word="2"] .fvh-note { grid-column: 1; grid-row: 5; margin-top: 12px; font-size: 12px; }
}

/* 03 · house：中央揃えの構成は保ったまま、PCでは写真と文字が小さく画面が余っていたため大きくする */
@media (min-width: 1025px) and (min-height: 701px) {
  .fv-word[data-word="3"] .fvh-art-frame { height: clamp(150px, 25vh, 280px); margin-bottom: 18px; }
  .fv-word[data-word="3"] .fvh-en { font-size: 15px; }
  .fv-word[data-word="3"] .fvh-h1 { font-size: clamp(1.9rem, 2vw + 1.2vh, 2.9rem); line-height: 1.45; }
  .fv-word[data-word="3"] .fvh-lead { margin-top: 16px; font-size: .95rem; line-height: 1.9; max-width: 36em; }
  .fv-word[data-word="3"] .fvh-actions { margin-top: 24px; gap: 12px; }
  .fv-word[data-word="3"] .fvh-actions .btn { padding: 14px 30px; font-size: 14px; }
  .fv-word[data-word="3"] .fvh-tags { margin-top: 18px; gap: 8px; }
  .fv-word[data-word="3"] .fvh-tags .tag { font-size: 12px; padding: 6px 14px; }
  .fv-word[data-word="3"] .fvh-note { font-size: 12px; margin-top: 12px; }
}

/* 00 · relationship：「職場・家族・恋愛。」の後で改行し、「人との／関係」の途中で切れないようにする */
.fv-word[data-word="0"] .fvh-h1 em { display: block; }

/* 00 · relationship：PCでは文字と写真が中央に小さくまとまり縦の余白が余っていたため、
   パネル自体の文字・写真を大きくする（fitWordsの拡大は横幅で頭打ちになるため、ここで底上げする） */
@media (min-width: 1025px) and (min-height: 701px) {
  .fv-word[data-word="0"] .fvh-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .fv-word[data-word="0"] .fvh-en { font-size: 15px; }
  .fv-word[data-word="0"] .fvh-h1 { font-size: clamp(1.9rem, 2vw + 1.2vh, 2.9rem); line-height: 1.45; }
  .fv-word[data-word="0"] .fvh-lead { margin-top: 18px; font-size: .95rem; line-height: 1.9; max-width: 34em; }
  .fv-word[data-word="0"] .fvh-tags { margin-top: 18px; gap: 8px; }
  .fv-word[data-word="0"] .fvh-tags .tag { font-size: 12px; padding: 6px 14px; }
  .fv-word[data-word="0"] .fvh-actions { margin-top: 26px; gap: 12px; }
  .fv-word[data-word="0"] .fvh-actions .btn { padding: 14px 30px; font-size: 14px; }
  .fv-word[data-word="0"] .fvh-art-frame { max-height: 52vh; margin: 0 auto; }
}

@media (max-height: 700px), (max-width: 480px) {
  .fv-word[data-word="0"] .fvh-grid, .fv-word[data-word="1"] .fvh-grid, .fv-word[data-word="2"] .fvh-grid, .fv-word[data-word="4"] .fvh-grid { grid-template-columns: 1fr; gap: 0; }
  .fv-word .fvh-art { display: none; }
  .fvh-lead, .fvh-tags, .fvh-note { display: none; }
  .fv-word[data-word="1"] .fvh-ring-a, .fv-word[data-word="1"] .fvh-ring-b, .fv-word[data-word="3"] .fvh-orb { display: none; }
  .fv-word[data-word="2"] .fvh-vertical { writing-mode: horizontal-tb; height: auto; align-items: center; gap: 8px; }
  .fv-word[data-word="2"] .fvh-vertical .fvh-h1 { white-space: normal; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
  .fv-word[data-word="2"] .fvh-en-vert { align-self: center; }
}
@media (max-width: 480px) {
  .fv-word { text-align: center; }
  .fv-word .fvh-eyebrow-row { justify-content: center; }
  .fv-word .fvh-tags { justify-content: center; }
  .fv-word .fvh-actions { align-items: center; }
  .fv-word[data-word="4"] .fvh-divider { margin-left: auto; margin-right: auto; }
  .fv-word[data-word="0"] .fvh-en { font-size: 11px; }
  .fv-word[data-word="0"] .fvh-h1 { font-size: 1.35rem; }
  .fv-word[data-word="2"] .fvh-vertical .fvh-h1 { font-size: 1.3rem; line-height: 1.6; letter-spacing: .06em; }
  /* SPでは英字が見出しの右に押し込まれて窮屈だったため、他のパネルと同じく見出しの上に置く */
  .fv-word[data-word="2"] .fvh-vertical { flex-direction: column-reverse; align-items: center; }
  .fv-word[data-word="2"] .fvh-en-vert { align-self: center; }
  .fv-word[data-word="0"] .fvh-actions .btn { padding: 12px 24px; font-size: 13px; }
}

.fv-motes { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.fv-mote {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 46% 40%, rgba(255,253,246,.95) 0%, rgba(248,233,209,.5) 45%, rgba(244,239,228,0) 78%);
  filter: blur(2.5px); will-change: transform;
}

.fv-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; opacity: .1; }

.fv-mobilebar {
  position: absolute; left: 0; right: 0; bottom: 0; display: none; padding: 1.4rem 1.2rem 2rem; text-align: center; pointer-events: none;
  background: linear-gradient(to top, rgba(255,251,243,.8), rgba(255,251,243,0));
}
.fv-mobilename { font-family: 'Zen Old Mincho', serif; font-size: 1.02rem; letter-spacing: .22em; color: #6B6155; min-height: 1.4em; }
.fv-mobilenote { margin-top: .7em; font-size: .68rem; line-height: 1.8; letter-spacing: .12em; color: #8A7A66; min-height: 1.6em; }

.fv-scrolldown { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; opacity: .6; }
.fv-scrolldown span { font-family: 'Jost', sans-serif; font-size: .58rem; letter-spacing: .32em; color: #8A7A66; }
.fv-scrolldown-line { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(107,97,85,.6), rgba(107,97,85,0)); animation: fvScrollLine 2.4s ease-in-out infinite; }

@media (max-width: 768px) {
  .fv-scrolldown { display: none; }
}

/* ==========================================================================
   Page wrapper
   ========================================================================== */

.page { display: none; }
.page.is-active { display: block; }

/* ==========================================================================
   Section head (used by worries / flow / plan sections)
   ========================================================================== */

.section-eyebrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--gold-light);
}
.section-head h2 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: .1em;
  color: var(--ink);
  word-break: auto-phrase;
  text-wrap: balance;
}
.section-head-lead {
  margin: 18px 0 0;
  font-family: var(--gothic);
  font-weight: 300;
  font-size: 15px;
  line-height: 2.1;
  color: var(--body-text);
  text-wrap: pretty;
}

/* ==========================================================================
   Hero (shared bits reused across category-specific layouts)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  animation: riseIn .9s ease both;
}
.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow-rule {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, #B8933F, rgba(184, 147, 63, 0));
}
.hero-en {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--gold-light);
}
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  word-break: auto-phrase;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: #8C6D2F;
}
.hero-lead {
  margin: 30px 0 0;
  font-family: var(--gothic);
  font-weight: 300;
  font-size: 16px;
  line-height: 2.3;
  color: var(--body-text);
  text-wrap: pretty;
  max-width: 34em;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.tag {
  padding: 7px 16px;
  border: 1px solid rgba(168, 134, 63, .38);
  border-radius: 999px;
  font-family: var(--gothic);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
  white-space: nowrap;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 46px;
}
.hero-note {
  font-family: var(--gothic);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}

.art-frame {
  position: relative;
  border: 1px solid var(--gold-line);
  background:
    repeating-linear-gradient(135deg, rgba(168,134,63,.07) 0 2px, rgba(250,247,241,0) 2px 11px),
    #F3EEE4;
  box-sizing: border-box;
}
.art-note {
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.art-glow {
  position: absolute;
  border-radius: 50%;
  animation: breathe 8s ease-in-out infinite;
}
.art-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 134, 63, .35);
}

/* ==========================================================================
   Worries ("こんな方へ")
   ========================================================================== */

.worries { padding: 110px 7vw; border-top: 1px solid rgba(168, 134, 63, .2); }
.worries-grid { display: grid; margin-top: 56px; }
.worry-num { font-family: var(--display); font-size: 13px; letter-spacing: .2em; color: var(--gold-light); display: block; }
.worry-text { margin: 16px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.95; letter-spacing: .05em; color: var(--ink); text-wrap: pretty; }

/* ==========================================================================
   Flow ("セッションの流れ")
   ========================================================================== */

.flow { padding: 110px 7vw; }
.flow-grid { display: grid; margin-top: 60px; }
.flow-mark-row { display: flex; align-items: center; gap: 12px; }
.flow-mark {
  width: 34px; height: 34px;
  border: 1px solid rgba(168, 134, 63, .5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 14px; color: var(--gold);
  flex-shrink: 0;
}
.flow-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168,134,63,.45), rgba(168,134,63,0)); }
.flow-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: .08em; color: var(--ink); }
.flow-body { margin: 12px 0 0; max-width: 36em; font-family: var(--gothic); font-weight: 300; font-size: 14px; line-height: 2.1; color: var(--body-text); text-wrap: pretty; }
.flow-time { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gold-light); }

/* ==========================================================================
   Plan ("料金・プラン")
   ========================================================================== */

.plan { padding: 110px 7vw; scroll-margin-top: var(--nav-h, 88px); }
.plan-grid { display: grid; margin-top: 56px; align-items: stretch; }
.plan-badge { font-family: var(--gothic); font-size: 12px; letter-spacing: .18em; color: #8C6D2F; }
.plan-name { margin: 16px 0 0; font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: .08em; color: var(--ink); }
.plan-body { margin: 14px 0 0; font-family: var(--gothic); font-weight: 300; font-size: 13.5px; line-height: 2; color: var(--body-text); text-wrap: pretty; }
.plan-price-row { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(168,134,63,.28); display: flex; align-items: baseline; gap: 10px; }
/* 説明文があるカード（対面など）だけ価格が下にずれて、横に並ぶカードで価格の高さが揃わなかったため、価格（と申込ボタン）をカードの下端に揃える */
.plan-card { display: flex; flex-direction: column; }
.plan-card .plan-price-row { margin-top: auto; }
.plan-card > :has(+ .plan-price-row) { margin-bottom: 24px; }
/* 申込ボタンは対応するカードの中（価格の下）に置き、SPでもどのボタンがどのカードのものか分かるようにする */
.plan-card .plan-card-cta { margin-top: 22px; width: 100%; justify-content: center; box-sizing: border-box; }
@media (max-width: 768px) { .plan-card .plan-card-cta { padding: 16px 18px; letter-spacing: .06em; white-space: nowrap; } .plan-cta-row { display: none !important; } }
/* PCではカード内のボタンが浮いて見える（家・土地の横並びカードでは崩れる）ため、カードの下にカードと同じ列でボタンを並べる */
@media (min-width: 769px) {
  .plan-card .plan-card-cta { display: none; }
  .plan-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 28px; }
  .plan-cta-row .btn { width: 100%; justify-content: center; box-sizing: border-box; padding-left: 20px; padding-right: 20px; letter-spacing: .1em; white-space: nowrap; }
  .page-path .plan-cta-row { display: flex; }
  .page-path .plan-cta-row .btn { width: auto; }
}
.plan-price { font-family: var(--display); font-size: 34px; color: #8C6D2F; }
.plan-unit { font-family: var(--gothic); font-size: 12px; color: var(--muted); }
.plan-subhead { margin: 64px 0 0; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .06em; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
.plan > .plan-subhead:first-of-type { margin-top: 56px; }

/* ==========================================================================
   Profile ("霊媒師のプロフィール")
   ========================================================================== */

.profile { display: grid; gap: 64px; align-items: center; padding: 110px 7vw; }
/* 紹介文を1つにまとめてPCで高さが縮み、1スクロールで1画面だった区切りがずれたため、最低1画面分の高さを持たせる */
@media (min-width: 861px) { .profile { min-height: 100svh; box-sizing: border-box; } }
.profile-art {
  position: relative;
  border: 1px solid var(--gold-line);
  background:
    repeating-linear-gradient(135deg, rgba(168,134,63,.07) 0 2px, rgba(245,240,229,0) 2px 11px),
    #EFE8DA;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px; box-sizing: border-box; overflow: hidden;
}
/* portrait is tall (626x990); every page crops it to its own frame shape,
   so anchor near the face (upper third) rather than the centre */
.profile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.profile-text h2 { margin: 12px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .1em; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
.profile-text h2 .profile-en { font-family: var(--display); font-size: 16px; letter-spacing: .2em; color: var(--gold-light); }
.profile-bio { margin: 26px 0 0; max-width: 40em; font-family: var(--gothic); font-weight: 300; font-size: 15px; line-height: 2.3; color: var(--body-text); text-wrap: pretty; }
.profile-note {
  margin: 20px 0 0; max-width: 40em; padding-left: 20px;
  border-left: 1px solid rgba(168,134,63,.5);
  font-family: var(--serif); font-size: 16px; line-height: 2.2; letter-spacing: .05em;
  color: var(--ink); text-wrap: pretty;
}
.profile-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 38px; }
.profile-stats span:first-child { font-family: var(--display); font-size: 30px; color: #8C6D2F; }
.profile-stats span:last-child { font-family: var(--gothic); font-size: 12px; color: var(--muted); margin-left: 8px; }

/* ==========================================================================
   CTA ("ご予約")
   ========================================================================== */

.cta { position: relative; padding: 130px 7vw; overflow: hidden; }
.cta-glow { position: absolute; inset: 0; pointer-events: none; }
.cta-inner { position: relative; }
.cta-title { margin: 16px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.7; letter-spacing: .1em; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
.cta-lead { margin: 22px 0 0; max-width: 32em; font-family: var(--gothic); font-weight: 300; font-size: 15px; line-height: 2.2; color: var(--body-text); text-wrap: pretty; }
.cta-fine { margin: 24px 0 0; font-family: var(--gothic); font-size: 12px; letter-spacing: .08em; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  padding: 40px 7vw 170px;
  border-top: 1px solid rgba(168, 134, 63, .24);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-family: var(--gothic); font-size: 12px; letter-spacing: .1em; color: var(--muted);
}
footer .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer .footer-links a { min-width: 0; }

/* ==========================================================================
   CATEGORY: 家族 family
   ========================================================================== */

body[data-cat="family"] { background: #FAF7F1; }
body[data-cat="family"] .nav { background: rgba(250, 247, 241, .867); }

.page-family .hero {
  padding: 96px 7vw 88px;
  background: #FAF7F1;
}
.page-family .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 18%, rgba(231,206,143,.32) 0%, rgba(250,247,241,0) 62%);
}
.page-family .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; position: relative; }
.page-family .hero h1 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.5; margin-bottom: 30px; }
.page-family .hero-eyebrow-row { margin-bottom: 30px; }
.page-family .art-frame { aspect-ratio: 4/5; display: flex; align-items: flex-end; padding: 22px; }
.page-family .art-glow { top: 50%; left: 50%; width: 56%; aspect-ratio: 1; transform: translate(-50%,-50%); background: radial-gradient(circle at 40% 34%, rgba(255,252,244,.95), rgba(231,206,143,.55) 46%, rgba(168,134,63,.12) 72%, rgba(168,134,63,0) 78%); }
.page-family .art-ring { top: 50%; left: 50%; width: 74%; aspect-ratio: 1; transform: translate(-50%,-50%); }
.page-family .art-foot { margin-top: 14px; display: flex; justify-content: space-between; font-family: var(--display); font-size: 12px; letter-spacing: .24em; color: var(--gold-light); }

.page-family .worries { background: #FAF7F1; }
.page-family .section-head { max-width: 44em; text-align: left; }
.page-family .worries-grid { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.page-family .worry-card { background: #FAF7F1; border: 1px solid rgba(168,134,63,.24); padding: 38px 32px; }

.page-family .flow { background: #F5F0E5; }
.page-family .flow-grid { grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 44px; }
.page-family .flow-mark-row { margin-bottom: 20px; }

.page-family .plan { background: #FAF7F1; }
.page-family .plan-grid { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; }
.page-family .plan-card { padding: 36px 32px; border: 1px solid rgba(168,134,63,.3); background: #FFFDF8; }

.page-family .profile { grid-template-columns: .85fr 1.15fr; background: #F5F0E5; }
.page-family .profile-art { aspect-ratio: 3/4; border-radius: 0; }
.page-family .section-head { }

.page-family .cta { text-align: center; background: #FAF7F1; }
.page-family .cta-glow { background: radial-gradient(70% 100% at 50% 0%, rgba(231,206,143,.38), rgba(250,247,241,0) 70%); }
.page-family .cta-lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   CATEGORY: 恋愛 love
   ========================================================================== */

body[data-cat="love"] { background: #FBF8F2; }
body[data-cat="love"] .nav { background: rgba(251, 248, 242, .867); }

.page-love .hero {
  padding: 110px 7vw 76px;
  background: #FBF8F2;
  text-align: center;
}
.page-love .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 8%, rgba(231,206,143,.4) 0%, rgba(250,247,241,0) 66%);
}
.page-love .hero-copy { position: relative; max-width: 46em; margin: 0 auto; }
.page-love .hero h1 { font-size: clamp(36px, 5vw, 66px); line-height: 1.45; margin-top: 12px; }
.page-love .hero-lead { max-width: 38em; margin-left: auto; margin-right: auto; }
.page-love .hero-tags { justify-content: center; margin-top: 32px; }
.page-love .hero-actions { justify-content: center; margin-top: 40px; }
.page-love .hero-art { margin-top: 56px; position: relative; }
.page-love .art-frame { height: min(46vh, 420px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-love .art-ring-a { position: absolute; left: 38%; top: 50%; width: min(30vw,300px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(168,134,63,.45); border-radius: 50%; }
.page-love .art-ring-b { position: absolute; left: 62%; top: 50%; width: min(30vw,300px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(168,134,63,.45); border-radius: 50%; background: radial-gradient(circle, rgba(231,206,143,.3), rgba(231,206,143,0) 70%); animation: breathe 8s ease-in-out infinite; }
.page-love .art-note { position: absolute; bottom: 18px; left: 20px; }

.page-love .worries { background: #F6EFE6; }
.page-love .section-head { max-width: 40em; text-align: center; margin: 0 auto; }
.page-love .worries-grid { grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: 0 64px; }
.page-love .worry-card { padding: 34px 4px; border-bottom: 1px solid rgba(168,134,63,.3); display: flex; gap: 24px; align-items: baseline; }
.page-love .worry-text { margin: 0; }

.page-love .flow { background: #FBF8F2; }
.page-love .flow-grid { grid-template-columns: 1fr; gap: 0; }
.page-love .flow-item { display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; padding: 32px 0; border-top: 1px solid rgba(168,134,63,.26); }

.page-love .plan { background: #FBF8F2; }
.page-love .plan-grid { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; }
.page-love .plan-card { padding: 40px 30px; border: 1px solid rgba(168,134,63,.26); background: #FFFDF8; border-radius: 200px 200px 12px 12px; text-align: center; }
.page-love .plan-price-row { justify-content: center; }

.page-love .profile { grid-template-columns: 1.15fr .85fr; background: #F6EFE6; }
.page-love .profile-art { aspect-ratio: 1/1; border-radius: 50%; }
/* 紹介文を1つにまとめて文字の塊が短くなったため、PCでは写真の円が文字より大きくなりすぎないよう上限をつける */
@media (min-width: 861px) {
  .page-love .profile-art { width: min(100%, 520px); justify-self: center; }
}
/* SPでは番号の列と本文の列に分けると本文が細くなりカラム落ちするため、番号を上・本文を下に積む */
@media (max-width: 768px) {
  .page-love .flow-item { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
}

.page-love .cta { text-align: center; background: #F6EFE6; }
.page-love .cta-glow { background: radial-gradient(70% 100% at 50% 0%, rgba(231,206,143,.38), rgba(250,247,241,0) 70%); }
.page-love .cta-lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   CATEGORY: 体調・健康 health
   ========================================================================== */

body[data-cat="health"] { background: #FBFAF6; }
body[data-cat="health"] .nav { background: rgba(251, 250, 246, .867); }

.page-health .hero {
  padding: 104px 7vw 96px;
  background: #FBFAF6;
}
.page-health .hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; position: relative; }
.page-health .hero h1 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.65; }
.page-health .hero-lead { margin: 0 0 26px; max-width: 34em; }
.page-health .hero-eyebrow-row { margin-top: 30px; }
.page-health .hero-tags { margin-top: 30px; }
.page-health .hero-actions { margin-top: 40px; }
.page-health .art-frame { aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 46% 40%, rgba(255,253,247,1), rgba(243,238,228,1) 58%, rgba(231,206,143,.34) 100%); border: 1px solid rgba(168,134,63,.32); }
.page-health .art-glow { width: 58%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,252,244,.95), rgba(231,206,143,.4) 60%, rgba(231,206,143,0) 78%); }
.page-health .art-note { text-align: center; padding: 0 20%; }

.page-health .worries { background: #FBFAF6; }
.page-health .section-head { max-width: 38em; text-align: left; }
.page-health .worries-grid { grid-template-columns: 1fr; gap: 0; }
.page-health .worry-card { padding: 30px 0 30px 28px; border-left: 1px solid rgba(168,134,63,.35); display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 16px; }
/* SPでは1項目の上下余白が大きく5項目で画面3枚分になっていたため詰める */
@media (max-width: 768px) {
  .page-health .worry-card { padding: 18px 0 18px 20px; grid-template-columns: 40px 1fr; gap: 10px; }
}

.page-health .flow { background: #F2F1EA; }
.page-health .flow-grid { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 44px; }
.page-health .flow-mark-row { margin-bottom: 20px; }

.page-health .plan { background: #FBFAF6; }
.page-health .plan-grid { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; }
.page-health .plan-card { padding: 34px 30px; background: #FFFFFD; border-radius: 20px; box-shadow: 0 20px 50px -34px rgba(140,109,47,.5); }

.page-health .profile { grid-template-columns: .8fr 1.2fr; background: #FBFAF6; }
.page-health .profile-art { aspect-ratio: 1/1; border-radius: 50%; }

.page-health .cta { text-align: left; background: #F2F1EA; }
.page-health .cta-glow { background: radial-gradient(70% 100% at 12% 0%, rgba(231,206,143,.38), rgba(250,247,241,0) 70%); }

/* ==========================================================================
   CATEGORY: 人生の方向性 path
   ========================================================================== */

body[data-cat="path"] { background: #FAF7F1; }
body[data-cat="path"] .nav { background: rgba(250, 247, 241, .867); }

.page-path .hero {
  padding: 132px 7vw 108px;
  background:
    repeating-linear-gradient(135deg, rgba(168,134,63,.06) 0 2px, rgba(245,240,229,0) 2px 12px),
    linear-gradient(180deg, #F1EADC 0%, #FAF7F1 78%);
}
.page-path .hero-rule { position: absolute; left: 0; right: 0; top: 34%; height: 1px; background: linear-gradient(90deg, rgba(168,134,63,0), rgba(168,134,63,.5), rgba(168,134,63,0)); }
.page-path .hero-orb { position: absolute; right: 12%; top: 34%; width: min(22vw,220px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 42% 38%, rgba(255,253,247,.95), rgba(231,206,143,.5) 52%, rgba(231,206,143,0) 76%); animation: breathe 10s ease-in-out infinite; }
.page-path .hero-orb-note { position: absolute; right: 12%; bottom: 40px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.page-path .hero-copy { position: relative; }
.page-path .hero h1 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.4; }
.page-path .hero-actions { margin-top: 40px; }

.page-path .worries { background: #FAF7F1; }
.page-path .section-head { max-width: 42em; text-align: left; }
.page-path .worries-grid { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0; }
.page-path .worry-card { padding: 0 26px; border-left: 1px solid rgba(168,134,63,.3); }
.page-path .worry-num { font-size: 26px; }
.page-path .worry-text { font-size: 16px; }
/* the six side-by-side columns wrap into rows on narrower screens — give
   the rows air, and on SP (one column) switch to a numbered list with
   dividers, since a single run of left-bordered text read as one blur */
.page-path .worries-grid { row-gap: 44px; }
@media (max-width: 768px) {
  .page-path .worries-grid { grid-template-columns: 1fr; row-gap: 0; margin-top: 36px; border-top: 1px solid rgba(168,134,63,.3); }
  .page-path .worry-card { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 14px; padding: 22px 4px; border-left: 0; border-bottom: 1px solid rgba(168,134,63,.3); }
  .page-path .worry-num { font-size: 20px; letter-spacing: .08em; }
  .page-path .worry-text { margin: 0; font-size: 15px; line-height: 1.8; letter-spacing: .04em; }
}

.page-path .flow { background: #EFEADD; }
.page-path .flow-grid { grid-template-columns: 1fr; gap: 0; }
.page-path .flow-item { display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; padding: 32px 0; border-top: 1px solid rgba(168,134,63,.26); }
@media (max-width: 768px) {
  .page-path .flow-item { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
}

.page-path .plan { background: #FAF7F1; }
.page-path .plan-grid { grid-template-columns: 1fr; gap: 0; }
.page-path .plan-card { padding: 30px 34px; border-top: 1px solid rgba(168,134,63,.32); display: grid; grid-template-columns: 150px minmax(180px,240px) 1fr 200px; align-items: center; gap: 32px; }
.page-path .plan-price-row { margin: 0; padding: 0; border: 0; justify-content: flex-end; }

.page-path .profile { grid-template-columns: 1.2fr .8fr; background: #EFEADD; }
.page-path .profile-art { aspect-ratio: 16/10; border-radius: 0; }
/* 紹介文を1つにまとめて文字の塊が短くなったため、PCでは横長の写真を少し縦に伸ばして文字の高さと釣り合わせる */
@media (min-width: 861px) { .page-path .profile-art { aspect-ratio: 4/3; } }
.page-path .profile-img { object-position: 50% 12%; }

.page-path .cta { text-align: left; background: #EFEADD; }
.page-path .cta-glow { background: radial-gradient(70% 100% at 12% 0%, rgba(231,206,143,.38), rgba(250,247,241,0) 70%); }

/* ==========================================================================
   CATEGORY: 故人とのつながり departed
   ========================================================================== */

body[data-cat="departed"] { background: #F8F5EE; }
body[data-cat="departed"] .nav { background: rgba(248, 245, 238, .867); }

.page-departed .hero {
  padding: 110px 7vw 100px;
  background: #F8F5EE;
}
.page-departed .hero-grid { display: grid; grid-template-columns: 1.1fr auto; gap: 64px; align-items: stretch; position: relative; }
.page-departed .hero-art { position: relative; height: 100%; min-height: min(62vh,560px); border: 1px solid rgba(168,134,63,.28); background: linear-gradient(180deg,#F3EEE4 0%,#EFE7D8 62%,#E9DFCB 100%); overflow: hidden; display: flex; align-items: flex-end; padding: 22px; box-sizing: border-box; }
.page-departed .hero-art-rule { position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: rgba(168,134,63,.4); }
.page-departed .hero-art-glow { position: absolute; left: 50%; top: 58%; width: min(16vw,150px); aspect-ratio: 1; transform: translate(-50%,-70%); border-radius: 50%; background: radial-gradient(circle, rgba(255,253,247,.95), rgba(231,206,143,.45) 55%, rgba(231,206,143,0) 76%); animation: breathe 11s ease-in-out infinite; }
.page-departed .hero-copy {
  writing-mode: vertical-rl;
  display: flex;
  align-items: flex-start;
  gap: 38px;
}
.page-departed .hero h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.9; letter-spacing: .18em; }
.page-departed .hero-divider { height: 52px; width: 1px; background: linear-gradient(180deg, #B8933F, rgba(184,147,63,0)); }
.page-departed .hero-en { writing-mode: horizontal-tb; font-size: 14px; }
.page-departed .hero-footrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 48px; position: relative; }
.page-departed .hero-footrow .hero-lead { margin: 0; }

.page-departed .worries { background: #F8F5EE; }
.page-departed .section-head { max-width: 34em; text-align: center; margin: 0 auto; }
.page-departed .worries-grid { grid-template-columns: 1fr; gap: 0; max-width: 46em; margin-left: auto; margin-right: auto; }
.page-departed .worry-card { padding: 34px 0; border-bottom: 1px solid rgba(168,134,63,.24); text-align: center; }

.page-departed .flow { background: #EFE9DC; }
.page-departed .flow-grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 44px; }
.page-departed .flow-mark-row { margin-bottom: 20px; }

.page-departed .plan { background: #F8F5EE; }
.page-departed .plan-grid { grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 24px; }
.page-departed .plan-card { padding: 38px 30px; border: 1px solid rgba(168,134,63,.24); background: linear-gradient(180deg,#FFFDF8,#F5EFE2); }

.page-departed .profile { grid-template-columns: 1fr 1fr; background: #F8F5EE; }
.page-departed .profile-art { aspect-ratio: 4/5; border-radius: 999px 999px 0 0; }

.page-departed .cta { text-align: center; background: #EFE9DC; }
.page-departed .cta-glow { background: radial-gradient(70% 100% at 50% 0%, rgba(231,206,143,.38), rgba(250,247,241,0) 70%); }
.page-departed .cta-lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Stance ("私たちの姿勢" — reflective statement blocks)
   ========================================================================== */

.stance { padding: 90px 7vw; border-top: 1px solid rgba(168, 134, 63, .2); }
.stance-inner { max-width: 46em; }
.stance h2 { margin: 0 0 28px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .08em; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
.stance p { margin: 0 0 20px; font-family: var(--gothic); font-weight: 300; font-size: 15px; line-height: 2.2; color: var(--body-text); text-wrap: pretty; }
.stance p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Subhero — divider header for a page with two sub-sessions (e.g. 人間関係・恋愛)
   ========================================================================== */

.subhero { padding: 70px 7vw 0; scroll-margin-top: var(--nav-h, 88px); }
.subhero .section-head { max-width: 46em; border-top: 1px solid rgba(168, 134, 63, .3); padding-top: 40px; }
.subhero .section-head h2 { font-size: clamp(30px, 3.4vw, 44px); }
.section-head h2 .phrase { display: inline-block; }
/* keep each phrase whole: wraps only at the 、 instead of mid-phrase */
.worry-text .phrase { display: inline-block; }
/* 見出しと直後のお悩み一覧を1つのまとまりにする（サブタイトルが一覧側の区切り線に接していたため） */
.subhero + .worries { border-top: 0; padding-top: 72px; }
/* 恋愛の一覧は人間関係と見た目を変え、続けて読んでも切り替わりが分かるようにする */
.subhero--love, .page-family .worries--love { background: #F6EFE6; }
@media (max-width: 768px) {
  .subhero + .worries { padding-top: 32px; padding-bottom: 72px; }
  .subhero + .worries .worries-grid { margin-top: 0; }
  .page-family .worries-grid { gap: 12px; }
  .page-family .worry-card { padding: 22px 22px; display: flex; gap: 16px; align-items: baseline; }
  .page-family .worry-text { margin: 0; font-size: 16px; }
  .page-family .worries--love .worries-grid { grid-template-columns: 1fr; gap: 0; }
  .page-family .worries--love .worry-card { background: transparent; border: 0; border-bottom: 1px solid rgba(168, 134, 63, .3); padding: 18px 2px; }
}

/* ==========================================================================
   Fit ("お申し込みの前に" — who this is / isn't for)
   ========================================================================== */

.fit { padding: 100px 7vw; border-top: 1px solid rgba(168, 134, 63, .2); }
.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 32px; margin-top: 48px; }
.fit-col { padding: 34px 32px; border: 1px solid rgba(168,134,63,.24); background: #FFFDF8; }
.fit-col.not-fit { background: rgba(168,134,63,.06); }
.fit-col-title { margin: 0 0 22px; font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: .06em; color: var(--ink); }
.fit-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.fit-list li { position: relative; padding-left: 22px; font-family: var(--gothic); font-weight: 300; font-size: 14px; line-height: 1.95; color: var(--body-text); text-wrap: pretty; }
.fit-list li::before { content: ''; position: absolute; left: 0; top: .75em; width: 9px; height: 1px; background: var(--gold); }
.fit-note { margin-top: 44px; max-width: 50em; font-family: var(--gothic); font-weight: 300; font-size: 13px; line-height: 2.1; color: var(--muted); text-wrap: pretty; }

/* ==========================================================================
   Plan — simple variant (no fixed pricing table)
   ========================================================================== */

.plan-simple { max-width: 42em; }
.plan-simple p { margin: 0 0 36px; font-family: var(--gothic); font-weight: 300; font-size: 15px; line-height: 2.2; color: var(--body-text); text-wrap: pretty; }

/* ==========================================================================
   FAQ ("よくあるご質問")
   ========================================================================== */

.faq { padding: 100px 7vw; border-top: 1px solid rgba(168, 134, 63, .2); }
.faq-list { margin-top: 48px; display: flex; flex-direction: column; }
.faq-item { padding: 28px 0; border-bottom: 1px solid rgba(168,134,63,.22); }
.faq-q { margin: 0; display: flex; gap: 14px; font-family: var(--serif); font-weight: 500; font-size: 15.5px; line-height: 1.9; letter-spacing: .03em; color: var(--ink); text-wrap: pretty; }
.faq-q::before { content: 'Q'; flex-shrink: 0; font-family: var(--display); font-style: italic; color: var(--gold); }
.faq-a { margin: 14px 0 0 26px; display: flex; gap: 14px; font-family: var(--gothic); font-weight: 300; font-size: 14px; line-height: 2; color: var(--body-text); text-wrap: pretty; }
.faq-a::before { content: 'A'; flex-shrink: 0; font-family: var(--display); font-style: italic; color: var(--gold-light); }
.faq-a a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Legal notices (per-session disclaimers, before the site footer)
   ========================================================================== */

.legal { padding: 56px 7vw 48px; border-top: 1px solid rgba(168, 134, 63, .2); }
.legal-title { margin: 0 0 20px; font-family: var(--gothic); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.legal-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 62em; }
.legal-list li { position: relative; padding-left: 16px; font-family: var(--gothic); font-weight: 300; font-size: 12.5px; line-height: 1.9; color: var(--muted); text-wrap: pretty; }
.legal-list li::before { content: '—'; position: absolute; left: 0; color: rgba(140,109,47,.5); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .page-family .hero-grid,
  .page-health .hero-grid,
  .page-departed .hero-grid,
  .profile { grid-template-columns: 1fr !important; }
  .page-path .plan-card { grid-template-columns: 1fr !important; gap: 10px !important; }
  .page-path .plan-price-row { justify-content: flex-start !important; }
  .page-departed .hero-copy { writing-mode: horizontal-tb; flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-departed .hero-en { writing-mode: horizontal-tb; }
  .nav { padding: 16px 6vw; gap: 20px; }

  .nav-burger { display: flex; }

  .tabs {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 12px 6vw 16px;
    background: rgba(250, 247, 241, .98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 26px 44px -22px rgba(60, 45, 15, .28);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .32s ease, transform .32s ease;
  }
  .nav.is-menu-open .tabs { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .tab { width: 100%; padding: 15px 4px; }
  .tab-underline { left: 0; right: auto; width: 3px; height: 100%; top: 0; bottom: auto; background: linear-gradient(180deg, #9C7A2E, #E7CE8F); }

  .page-family .hero { padding-top: 56px; }
  .page-love .hero { padding-top: 56px; }
  .page-health .hero { padding-top: 56px; }
  .page-path .hero { padding-top: 64px; }
  .page-departed .hero { padding-top: 56px; }
}

@media (max-width: 520px) {
  .hero, .worries, .flow, .plan, .profile, .cta { padding-left: 6vw !important; padding-right: 6vw !important; }
  footer { padding: 32px 6vw 140px; }
  .float-cta { width: 92px; height: 92px; right: 28px; bottom: 28px; font-size: 11.5px; }
  .float-cta-en { font-size: 9px; }

  .page-family .hero { padding-top: 40px; }
  .page-love .hero { padding-top: 40px; }
  .page-health .hero { padding-top: 40px; }
  .page-path .hero { padding-top: 48px; }
  .page-departed .hero { padding-top: 40px; }
}

/* ==========================================================================
   SP (≤480px) — keep short labels on one line and avoid awkward wraps.
   Desktop letter-spacing / padding was carried over as-is, which pushed
   button labels, card titles and the FV subtitle onto a second line.
   ========================================================================== */
@media (max-width: 480px) {
  /* buttons: one line on every phone width (down to 320px) */
  .btn { gap: 8px; padding: 15px 20px; font-size: min(14px, 3.7vw); letter-spacing: .08em; white-space: nowrap; }
  .fvh-actions .btn { padding: 11px 16px; font-size: min(11.5px, 3.2vw); letter-spacing: .06em; white-space: nowrap; }
  .btn-arrow { font-size: 14px; }
  /* FV subtitle 「霊視・霊障リーディングセッション」 */
  .fv-center-sub { font-size: min(13.5px, 3.8vw); letter-spacing: .18em; text-indent: .18em; white-space: nowrap; }
  /* plan card titles 「恋愛オンラインセッション」 */
  .plan-name { font-size: 19px; letter-spacing: .04em; }
  /* section headings: two lines instead of three on narrow phones */
  .section-head h2 { font-size: 23px; letter-spacing: .08em; }
  .subhero .section-head h2 { font-size: 25px; }
  /* worry lists: stop 「気に／なっている」「言葉が／ある。」 style splits */
  .worry-text { font-size: 15.5px; letter-spacing: .03em; }
  .page-family .worry-text { font-size: 15.5px; }
}
/* very narrow phones (≤360px, e.g. 320px iPhone SE) */
@media (max-width: 360px) {
  .fv-center-lead { font-size: min(.78rem, 3.4vw); letter-spacing: .08em; white-space: nowrap; }
  .plan-name { font-size: 17px; }
  .flow-title { font-size: 16px; letter-spacing: .04em; }
  .page-family .worry-text { font-size: 14px; letter-spacing: .02em; }
}