/* =========================================================
   成田山 深川不動堂 七五三LP  style.css
   Palette: sampled directly from the title crest (img/title.png) —
   washi ivory × vermilion (七/三) × brass gold (frame/五) × ink (成田山…)
   ========================================================= */

:root{
  --bg:#FBF6EC;
  --bg-tint:#F6EEDD;
  --bg-warm:#F1E3C6;
  --bg-card:#FEFDFA;
  --deep:#241D17;
  --ink:#211B16;
  --ink-soft:#5C5147;
  --line:#E8DBBC;
  --accent:#E64F26;
  --accent-ink:#C23A18;
  --gold:#C9A15E;
  --gold-light:#D7B57E;
  --gold-dark:#A67C3D;
  --white:#fff;

  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 6px 18px -10px rgba(67,52,46,.28);
  --shadow:0 18px 40px -20px rgba(67,52,46,.35);

  --maxw:1080px;
  --maxw-narrow:760px;
  --header-h:64px;

  --font-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Zen Maru Gothic","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
strong{font-weight:700;color:var(--ink)}

:focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:12px;top:-48px;z-index:1000;
  background:var(--deep);color:#fff;padding:10px 16px;border-radius:8px;
  transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---------- layout ---------- */
.container{width:min(90%,var(--maxw));margin-inline:auto}
.container--narrow{width:min(90%,var(--maxw-narrow))}

.section{padding-block:clamp(56px,10vw,110px)}
/* faint diamond lattice, echoes traditional 麻の葉/菱格子 patterns without competing with content */
.section--tint{
  background-color:var(--bg-tint);
  background-image:
    repeating-linear-gradient(45deg, rgba(201,161,94,.10) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(201,161,94,.10) 0 1px, transparent 1px 30px);
}

/* ---------- section head ---------- */
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(32px,6vw,56px)}
.eyebrow{
  font-family:var(--font-sans);
  font-size:.68rem;font-weight:700;letter-spacing:.28em;
  color:var(--gold-dark);margin-bottom:6px;
}
.eyebrow--light{color:#D8B98A}
.kicker{
  display:inline-block;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.22em;
  color:var(--accent-ink);
  padding-bottom:10px;
  position:relative;
}
.kicker::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:34px;height:2px;background:var(--gold);border-radius:2px;
}
.kicker--light{color:#EFC49F}
.kicker--light::after{background:var(--gold)}
.sec-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(1.45rem,4.4vw,2.15rem);
  line-height:1.55;
  margin-top:16px;
  color:var(--ink);
}
.sec-lead{
  margin-top:18px;
  color:var(--ink-soft);
  font-size:1rem;
  text-align:left;
}
@media (min-width:700px){ .sec-lead{text-align:center} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--font-sans);font-weight:700;
  padding:14px 26px;border-radius:999px;
  line-height:1.3;text-align:center;
  transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:17px 34px;font-size:1.02rem;min-width:230px}

.btn--primary{background:var(--accent-ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:#8b4130}
.btn--ghost-dark{background:transparent;color:var(--accent-ink);border:1.5px solid var(--accent-ink)}
.btn--ghost-dark:hover{background:var(--bg-tint)}
.btn--light{background:var(--bg-card);color:var(--accent-ink)}
.btn--light:hover{background:#f3e6df}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.65);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}

.btn--tel{
  flex-direction:column;gap:0;padding:8px 16px;border-radius:12px;
  color:var(--accent-ink);border:1.5px solid var(--line);background:var(--bg-card);
}
.btn--tel__num{font-size:1.05rem;font-weight:700;letter-spacing:.04em}
.btn--tel__time{font-size:.68rem;color:var(--ink-soft);font-weight:500}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,246,236,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled{
  background:rgba(251,246,236,.96);
  border-bottom-color:var(--line);
  box-shadow:0 6px 20px -16px rgba(67,52,46,.5);
}
.site-header__inner{
  width:min(94%,1180px);margin-inline:auto;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-header__logo img{width:auto;height:34px}

.gnav{display:none}
.gnav__list{display:flex;gap:16px}
.gnav__list li{flex-shrink:0}
.gnav__list a{
  font-size:.9rem;font-weight:500;padding:6px 2px;position:relative;color:var(--ink);
  white-space:nowrap;
}
.gnav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .2s;
}
.gnav__list a:hover::after{transform:scaleX(1)}
.gnav__cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.gnav__cta .btn{white-space:nowrap}

.hamburger{
  width:44px;height:44px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;border-radius:10px;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s, opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* wider than the hero/usp breakpoints on purpose: the inline nav + tel + reserve
   button need more room than the content grid below, and measured out to not
   fit without wrapping until ~1240px */
@media (min-width:1240px){
  :root{--header-h:76px}
  .hamburger{display:none}
  .gnav{display:flex;align-items:center;gap:20px}
}

/* mobile drawer */
@media (max-width:1239px){
  .gnav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    display:block;
    padding:14px 22px 26px;
    transform:translateY(-120%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:0 24px 40px -24px rgba(67,52,46,.5);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
  }
  .gnav.is-open{transform:translateY(0)}
  .gnav__list{flex-direction:column;gap:2px}
  .gnav__list a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  .gnav__list a::after{display:none}
  .gnav__cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
  .gnav__cta .btn{width:100%}
  .btn--tel{flex-direction:row;gap:10px;padding:12px}
  body.nav-open{overflow:hidden}
}

/* ---------- hero ---------- */
/* The source photo is landscape. A full-bleed "cover" background on a tall
   phone screen always shows the photo's full height (only its width gets
   cropped), which pins the child's face at a fixed height ratio no matter
   how tall the hero box is — any overlay text placed mid-height inevitably
   sits on top of the face. So the photo is kept as its own shorter band
   (an aspect-ratio box) with only the title graphic overlaid at its base —
   safely below where the face sits — and the rest of the copy lives below
   it on the plain background instead of floating over the photo. */
.hero{
  position:relative;
  background:var(--bg);
}
.hero__photo{
  position:relative;
  isolation:isolate; /* contain the negative z-index media layer here, so it can't be painted over by .hero's own background */
  aspect-ratio:4/5;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  color:#fff;
}
@media (min-width:640px){ .hero__photo{aspect-ratio:16/11} }
/* kept close to 16:9 rather than a wider 21:9 band: the source photo is a
   1.5:1 landscape, so a much wider crop shows a smaller vertical slice of it
   and pushes the face further down (as a % of box height) — at some laptop
   widths that put it right under the title card. 16:9 keeps enough of the
   photo's height in frame that the face stays clear of the caption. */
@media (min-width:1024px){ .hero__photo{aspect-ratio:16/9} }
.hero__media{
  position:absolute;inset:0;z-index:-2;
  background-color:#d9c39a;
  background-image:url("../img/top.jpg");
  background-image:image-set(url("../img/top.webp") type("image/webp"), url("../img/top.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:64% top;
}
.hero__photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(36,29,23,0) 30%, rgba(36,29,23,.55) 75%, rgba(36,29,23,.82) 100%);
}
.hero__caption{padding:20px 20px clamp(24px,6vw,40px)}
.hero__lead{
  font-family:var(--font-serif);
  letter-spacing:.18em;font-size:.82rem;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero__title{
  width:clamp(96px,20vw,140px);
  margin:10px auto 0;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.hero__scroll{
  position:absolute;right:16px;bottom:14px;
  writing-mode:vertical-rl;letter-spacing:.3em;font-size:.6rem;
  color:rgba(255,255,255,.85);
}
.hero__scroll span{display:block;padding-bottom:34px;position:relative}
.hero__scroll span::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:26px;
  background:rgba(255,255,255,.7);animation:scrollcue 1.8s ease-in-out infinite;
}
.hero__body{
  text-align:center;
  padding:clamp(28px,6vw,40px) 20px clamp(32px,6vw,44px);
}
.hero__sub{
  font-size:.94rem;line-height:1.85;max-width:30em;margin-inline:auto;
  color:var(--ink-soft);
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px;
}
.hero__note{
  margin-top:16px;font-size:.8rem;letter-spacing:.01em;color:var(--ink-soft);
}
.hero__note strong{color:var(--accent-ink)}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- usp (選ばれる理由) ---------- */
.usp-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){ .usp-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .usp-grid{grid-template-columns:repeat(4,1fr)} }
.usp-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;box-shadow:var(--shadow-sm);
}
.usp-card__num{
  font-family:var(--font-serif);font-weight:700;font-size:1.6rem;
  color:var(--gold);letter-spacing:.03em;margin-bottom:4px;
}
.usp-card__title{
  font-family:var(--font-serif);font-size:1.05rem;font-weight:700;
  margin-bottom:10px;color:var(--ink);line-height:1.5;
}
.usp-card p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- guide: info cards ---------- */
.info-cards{
  display:grid;gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .info-cards{grid-template-columns:repeat(3,1fr)} }
.info-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);
}
.info-card__title{
  font-family:var(--font-serif);font-size:1.12rem;font-weight:700;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
  color:var(--accent-ink);
}
.info-card p{font-size:.92rem;color:var(--ink-soft)}
.info-card__ages{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.info-card__ages li{font-size:.92rem;display:flex;align-items:baseline;gap:10px}
.info-card__ages .age{
  font-family:var(--font-serif);font-weight:700;color:var(--ink);
  font-size:1.05rem;min-width:2.6em;
}

/* ---------- guide: lucky-day panel ---------- */
.lucky-panel{
  margin-top:24px;background:var(--bg-card);border:1px solid var(--gold-light);
  border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-sm);
}
.lucky-panel__title{
  font-family:var(--font-serif);font-size:1.1rem;font-weight:700;
  text-align:center;color:var(--ink);
}
.lucky-panel__lead{
  margin-top:10px;font-size:.88rem;color:var(--ink-soft);text-align:center;
  max-width:44em;margin-inline:auto;
}
.lucky-highlight{
  margin-top:16px;background:var(--bg-tint);border-left:3px solid var(--accent-ink);
  padding:12px 16px;font-size:.88rem;color:var(--ink);border-radius:0 8px 8px 0;
  max-width:44em;margin-inline:auto;
}
.lucky-highlight strong{color:var(--accent-ink)}

/* term glossary */
.lucky-terms{margin-top:18px;display:grid;gap:10px}
@media (min-width:760px){ .lucky-terms{grid-template-columns:repeat(3,1fr);gap:14px} }
.lucky-term{background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.lucky-term dt{font-family:var(--font-serif);font-weight:700;font-size:.92rem;color:var(--accent-ink)}
.lucky-term dt span{font-family:var(--font-sans);font-weight:500;font-size:.68rem;color:var(--ink-soft);margin-left:.4em}
.lucky-term dd{margin-top:4px;font-size:.8rem;color:var(--ink-soft);line-height:1.7}

/* ---------- lucky-day carousel ---------- */
/* nav arrows float over the card's edges (instead of sitting beside it in
   the flex row) so the card itself can use the full panel width */
.cal-carousel{
  position:relative;margin-top:22px;
}
.cal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;
  background:var(--bg-card);border:1.5px solid var(--gold-light);
  color:var(--accent-ink);font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:background-color .2s, opacity .2s;
}
.cal-nav--prev{left:-6px}
.cal-nav--next{right:-6px}
.cal-nav:hover{background:var(--bg-tint)}
.cal-nav:disabled{opacity:.3;pointer-events:none}
.cal-viewport{width:100%;overflow:hidden}
.cal-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.cal-card{flex:0 0 100%;min-width:0;padding:2px}
.cal-card__month{
  font-family:var(--font-serif);font-weight:700;text-align:center;
  font-size:1.15rem;color:var(--ink);margin-bottom:14px;
}
.cal-card__list{
  background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 10px;
}
/* date + tag stay side by side (keeps each row compact / no extra scrolling).
   Only the tag is allowed to wrap onto a second line of its own when the
   label is long ("大安・一粒万倍日" etc.) — short tags stay on one line as
   before, so most rows are unaffected and the card doesn't grow tall.
   Tiered date sizes are kept modest (rather than dramatically large) so the
   biggest size still leaves the tag enough width to wrap into two clean
   lines instead of one character per line. */
.lday{
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.lday:last-child{border-bottom:none}
.lday__date{flex:0 0 auto;font-family:var(--font-serif);font-weight:700;color:var(--ink);white-space:nowrap}
.lday__date em{font-style:normal;font-size:.7em;font-weight:500;color:var(--ink-soft);margin-left:.2em}
.lday__tag{
  flex:1 1 auto;min-width:0;max-width:164px;text-align:center;
  font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:12px;
}

/* size/emphasis by tier: bigger font = better day, per the brief */
.lday--ichi .lday__date{font-size:1.05rem}
.lday--ichi .lday__tag{color:#4F7A3E;background:#E7EFDF}

.lday--taian .lday__date{font-size:1.15rem}
.lday--taian .lday__tag{color:var(--gold-dark);background:var(--bg-warm)}

.lday--combo .lday__date{font-size:1.4rem;color:var(--accent-ink)}
.lday--combo .lday__tag{color:#fff;background:var(--gold)}

/* 天赦日 and the traditional 七五三の日 (11/15) share the top-tier treatment */
.lday--tensha,.lday--mark{padding:14px 0}
.lday--tensha .lday__date,.lday--mark .lday__date{font-size:1.75rem;color:var(--accent-ink)}
.lday--tensha .lday__date em,.lday--mark .lday__date em{color:var(--accent-ink);opacity:.75}
.lday--tensha .lday__tag,.lday--mark .lday__tag{color:#fff;background:var(--accent-ink);font-size:.86rem;padding:4px 8px}

/* page dots */
.cal-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.cal-dot{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background-color .2s, transform .2s;
}
.cal-dot.is-active{background:var(--accent-ink);transform:scale(1.25)}

/* PC: lay all four months out at once instead of a swipeable carousel
   (mobile / tablet keep the carousel) */
@media (min-width:1024px){
  .cal-nav,.cal-dots{display:none}
  .cal-viewport{overflow:visible}
  .cal-track{
    display:grid;grid-template-columns:1fr 1fr;gap:24px;
    transform:none!important;transition:none;
  }
  .cal-card{padding:0}
}

/* ---------- reason: feature cards ---------- */
.feature-cards{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:820px){ .feature-cards{grid-template-columns:repeat(3,1fr)} }
.feature-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.feature-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-warm)}
.feature-card__img img{width:100%;height:100%;object-fit:cover}
.feature-card__body{padding:22px 22px 26px}
.feature-card__title{
  font-family:var(--font-serif);font-size:1.14rem;font-weight:700;margin-bottom:10px;
}
.feature-card__body p{font-size:.92rem;color:var(--ink-soft)}
.note-inline{display:block;margin-top:8px;font-size:.78rem;color:var(--ink-soft)}

/* inline cta */
.inline-cta{text-align:center;margin-top:clamp(32px,6vw,52px)}
.inline-cta__note{margin-top:12px;font-size:.84rem;color:var(--ink-soft)}

/* ---------- memory ---------- */
.memory-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:760px){ .memory-grid{grid-template-columns:1fr 1fr} }
.memory-fig{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.memory-fig img{aspect-ratio:3/2;object-fit:cover;width:100%}
.memory-fig figcaption{padding:14px 18px;font-size:.85rem;color:var(--ink-soft)}

/* ---------- fee ---------- */
.fee-cards{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){ .fee-cards{grid-template-columns:repeat(3,1fr);align-items:start} }
.fee-card{
  background:var(--bg-card);border:1px solid var(--gold-light);border-radius:var(--radius-lg);
  padding:24px 24px 28px;position:relative;
  /* echoes the nested gold-line boxes in the title crest: a thin gap ring, then a second gold line */
  box-shadow:0 0 0 4px var(--bg-card), 0 0 0 5px var(--gold-light), var(--shadow-sm);
}
.fee-card__img{
  margin-bottom:20px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:3/2;background:var(--bg-warm);
}
.fee-card__img img{width:100%;height:100%;object-fit:cover}
.fee-card__price{
  font-family:var(--font-serif);font-weight:700;font-size:2rem;text-align:center;
  color:var(--ink);letter-spacing:.02em;
}
.fee-card__price span{font-size:.95rem;font-weight:500;margin-left:.15em}
.fee-card__list{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.fee-card__list li{
  position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-soft);
}
.fee-card__list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--gold);
}
.fee-card__list li.is-strong{color:var(--ink);font-weight:700}
.fee-card__list li.is-strong::before{background:var(--accent)}

/* fee matrix */
/* the table is wider than a phone screen and needs horizontal scroll; without
   any cue it just looks like the right side is cut off, so a hint line plus
   an edge fade (hidden once you've scrolled to the end) make it obvious
   there's more to see rather than something being broken */
.fee-matrix-hint{
  margin-top:34px;margin-bottom:-18px;font-size:.78rem;color:var(--ink-soft);
  text-align:right;
}
@media (min-width:640px){ .fee-matrix-hint{display:none} }
.fee-matrix-wrap{
  position:relative;margin-top:34px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
}
.fee-matrix-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
  background:linear-gradient(to right, transparent, rgba(67,52,46,.12));
  pointer-events:none;opacity:1;transition:opacity .2s;
}
.fee-matrix-wrap.is-end::after{opacity:0}
@media (min-width:640px){ .fee-matrix-wrap::after{display:none} }
.fee-matrix{
  width:100%;border-collapse:collapse;min-width:520px;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  font-size:.9rem;
}
.fee-matrix caption{
  text-align:left;font-family:var(--font-serif);font-weight:700;
  padding:0 0 12px;color:var(--ink);
}
.fee-matrix th,.fee-matrix td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--line)}
.fee-matrix thead th{background:var(--bg-warm);font-weight:700;font-family:var(--font-serif)}
.fee-matrix tbody th{text-align:left;font-weight:500;color:var(--ink)}
.fee-matrix tbody tr:last-child th,.fee-matrix tbody tr:last-child td{border-bottom:none}
.fee-matrix td{color:var(--accent-ink);font-weight:700}

.fee-notes{
  margin-top:26px;display:flex;flex-direction:column;gap:9px;
  font-size:.84rem;color:var(--ink-soft);
}
.fee-notes li{position:relative;padding-left:18px}
.fee-notes li::before{content:"※";position:absolute;left:0;color:var(--accent-ink)}

/* ---------- flow ---------- */
.flow{position:relative;display:flex;flex-direction:column;gap:6px}
.flow__step{display:flex;gap:20px;padding:18px 0;position:relative}
.flow__step:not(:last-child)::after{
  content:"";position:absolute;left:19px;top:52px;bottom:-6px;width:2px;
  background:var(--line);
}
.flow__num{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--accent-ink);color:#fff;
  font-family:var(--font-serif);font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.flow__body h3{
  font-family:var(--font-serif);font-size:1.08rem;font-weight:700;margin-bottom:6px;
}
.flow__body p{font-size:.9rem;color:var(--ink-soft)}
.flow__mini{display:block;margin-top:6px;font-size:.8rem}

/* ---------- gallery ---------- */
.gallery{background:var(--bg-tint)}
.gallery img{width:100%;max-height:520px;object-fit:cover}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.faq__q{
  width:100%;text-align:left;padding:18px 52px 18px 22px;position:relative;
  font-size:.96rem;font-weight:700;line-height:1.6;color:var(--ink);
}
.faq__q::before,.faq__q::after{
  content:"";position:absolute;right:22px;top:50%;background:var(--accent-ink);
  transition:transform .25s;
}
.faq__q::before{width:14px;height:2px;margin-top:-1px}
.faq__q::after{width:2px;height:14px;margin-left:6px;margin-top:-7px}
.faq__q[aria-expanded="true"]::after{transform:scaleY(0)}
.faq__a{padding:0 22px 20px;font-size:.9rem;color:var(--ink-soft)}
.faq__a p{margin-top:2px}

/* ---------- access ---------- */
.access-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:860px){ .access-grid{grid-template-columns:1fr 1.1fr;align-items:start} }
.access-info dl{border-top:1px solid var(--line)}
.access-info dl>div{
  display:grid;grid-template-columns:7.5em 1fr;gap:10px;
  padding:13px 4px;border-bottom:1px solid var(--line);font-size:.9rem;
}
.access-info dt{font-weight:700;color:var(--accent-ink)}
.access-info dd a{border-bottom:1px solid currentColor}
.access-train{margin-top:18px;display:flex;flex-direction:column;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.access-train li{padding-left:18px;position:relative}
.access-train li::before{content:"●";position:absolute;left:0;color:var(--gold);font-size:.7em;top:.4em}
.access-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.access-map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* ---------- final cta ---------- */
.final-cta{
  background:var(--deep);color:#fff;text-align:center;
  padding-block:clamp(56px,10vw,96px);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(230,79,38,.28), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(201,161,94,.22), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px);
}
.final-cta__title{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.5rem,5vw,2.2rem);margin:16px 0 26px;line-height:1.5;
}
.final-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.final-cta__note{margin-top:22px;font-size:.82rem;color:#DDCBA8}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-warm);padding:44px 0 40px;text-align:center}
.site-footer__logo{height:32px;width:auto;margin:0 auto 20px;opacity:.9}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:22px}
.site-footer__nav a{font-size:.84rem;color:var(--ink-soft)}
.site-footer__nav a:hover{color:var(--accent-ink)}
.site-footer__copy{font-family:var(--font-serif);font-size:.82rem;color:var(--ink)}
.site-footer__note{font-size:.72rem;color:var(--ink-soft);margin-top:6px}

/* ---------- sticky mobile cta ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,246,236,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .3s ease;
}
.mobile-cta.is-visible{transform:translateY(0)}
.mobile-cta__tel,.mobile-cta__reserve{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:12px;padding:9px 6px;font-weight:700;line-height:1.25;
}
.mobile-cta__tel{background:var(--bg-card);border:1.5px solid var(--line);color:var(--accent-ink)}
.mobile-cta__label{font-size:.66rem;color:var(--ink-soft);font-weight:500}
.mobile-cta__num{font-size:1rem;letter-spacing:.03em}
.mobile-cta__reserve{flex:1.3;background:var(--accent-ink);color:#fff;font-size:1rem}
@media (min-width:1240px){ .mobile-cta{display:none} }
@media (max-width:1239px){
  body{padding-bottom:74px}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__scroll span::after{animation:none}
  *{transition-duration:.001s!important;animation-duration:.001s!important}
}