/* ホテルモントレ クリスマス2026 特集ページ */
:root {
  /* Case A: Editorial Noir */
  --bg: #0b0f16;
  --bg-2: #0f141d;
  --surface: #141a24;
  --line: rgba(198,169,110,0.22);
  --line-strong: rgba(198,169,110,0.45);
  --ink: #ece6d6;
  --ink-mute: #a49b86;
  --ink-faint: #6e6858;
  --accent: #c6a96e;         /* champagne gold */
  --accent-2: #e8d29a;
  --accent-deep: #8a6f3d;
  --danger: #b64545;
  --font-display: "Cormorant Garamond", "Shippori Mincho", serif;
  --font-serif-jp: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Inter", "Noto Serif JP", sans-serif;
  --font-eyebrow: "Cinzel", "Cormorant Garamond", serif;
  --radius: 0px;
  --grain: 0.06;
}

html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* subtle film grain over everything */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: var(--grain); mix-blend-mode: overlay;
}

#particles { position:fixed; inset:0; pointer-events:none; z-index:2; }

/* Header */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; color:var(--ink);
  transition:background .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled { background:rgba(11,15,22,0.78); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav .brand { display:flex; align-items:baseline; gap:14px; }
.nav .brand-mark { font-family:var(--font-eyebrow); letter-spacing:.24em; font-size:12px; color:var(--accent); text-transform:uppercase;}
.nav .brand-name { font-family:var(--font-display); font-size:22px; letter-spacing:.05em; }
.nav .brand-name em { font-style:italic; color:var(--accent-2); }
.nav .links { display:flex; gap:32px; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.nav .links a { position:relative; padding:6px 0; }
.nav .links a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.nav .links a:hover { color:var(--ink); }
.nav .links a:hover::after { transform:scaleX(1); }
.nav .reserve-cta {
  border:1px solid var(--line-strong); color:var(--accent-2); padding:10px 22px; font-family:var(--font-eyebrow); letter-spacing:.24em; font-size:11px; text-transform:uppercase;
  background:transparent; cursor:pointer; transition: all .3s ease; text-decoration:none; display:inline-block;
  white-space:nowrap; flex-shrink:0;
}
.nav .reserve-cta:hover { background:var(--accent); color:#0b0f16; border-color:var(--accent); }
@media (max-width:820px){
  .nav { padding:16px 20px; } .nav .links { display:none; }
  .nav .reserve-cta { padding:9px 16px; letter-spacing:.16em; font-size:11px; }
}

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:1; }
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 78% 20%, rgba(198,169,110,0.14), transparent 60%),
    radial-gradient(900px 600px at 15% 80%, rgba(120,20,30,0.16), transparent 60%),
    linear-gradient(180deg, #060a12 0%, #0b0f16 55%, #0a0d14 100%);
}
.hero-image {
  position:absolute; inset:0;
  background-image:url("hero-restaurant.jpg");
  background-size:cover; background-position:center;
  opacity:.55; mix-blend-mode:normal;
  filter:contrast(1.05) saturate(1.05) brightness(.92);
  mask-image: radial-gradient(ellipse at 50% 45%, black 40%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 40%, transparent 88%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(6,10,18,.35) 0%, transparent 30%, transparent 60%, rgba(6,10,18,.55) 100%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:3; text-align:center; padding:0 24px; max-width:1100px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:14px; color:var(--accent); font-family:var(--font-eyebrow); font-size:12px; letter-spacing:.4em; text-transform:uppercase; margin-bottom:32px; }
.hero-eyebrow .rule { width:44px; height:1px; background:var(--accent); display:inline-block; }
.hero-title {
  font-family:var(--font-display); font-weight:400;
  font-size: clamp(56px, 10vw, 168px);
  line-height:.95; letter-spacing:-.01em;
  margin:0 0 8px;
}
.hero-title em { font-style:italic; color:var(--accent-2); font-weight:300; }
.hero-title .amp { font-family:var(--font-display); font-style:italic; color:var(--accent); }
.hero-sub {
  font-family:var(--font-serif-jp); font-size: clamp(14px, 1.4vw, 18px); color:var(--ink-mute);
  letter-spacing:.22em; margin: 22px auto 0; max-width: 720px; line-height: 2;
}
.hero-meta {
  margin-top: 56px;
  display:flex; align-items:center; justify-content:center; gap:56px;
  color:var(--ink-mute); font-family:var(--font-eyebrow); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
}
.hero-meta .divider { width:1px; height:34px; background:var(--line-strong); }
.hero-meta strong { display:block; color:var(--accent-2); font-family:var(--font-display); font-style:italic; font-size:26px; letter-spacing:.02em; margin-top:6px; font-weight:400; }
.hero-scroll { position:absolute; left:50%; bottom:36px; transform:translateX(-50%); color:var(--ink-mute); font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.4em; text-transform:uppercase; z-index:3; }
.hero-scroll::after { content:""; display:block; width:1px; height:36px; background:var(--accent); margin:12px auto 0; animation:scrollLine 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes scrollLine { 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }

.hero-corner { position:absolute; z-index:3; color:var(--accent); font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.36em; text-transform:uppercase; opacity:.72;}
.hero-corner.tl { top:110px; left:40px; }
.hero-corner.tr { top:110px; right:40px; text-align:right; }
.hero-corner.bl { bottom:36px; left:40px; }
.hero-corner.br { bottom:36px; right:40px; text-align:right; }
@media (max-width:820px){ .hero-corner { display:none; } .hero-meta { flex-wrap:wrap; gap:20px; } .hero-meta .divider { display:none; } }

/* Section framing */
section.frame { position:relative; z-index:3; padding: 120px 40px; }
@media (max-width:820px){ section.frame { padding: 80px 20px; } }

.section-label {
  display:flex; align-items:center; gap:20px; color:var(--accent); font-family:var(--font-eyebrow); font-size:11px; letter-spacing:.4em; text-transform:uppercase; margin-bottom:32px;
}
.section-label .rule { flex:1; height:1px; background:linear-gradient(90deg, var(--line-strong), transparent); }

/* Intro */
.intro { max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 1fr 1.4fr; gap:80px; align-items:start; }
.intro h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(40px, 5vw, 72px); line-height:1.05; margin:0; }
.intro h2 em { font-style:italic; color:var(--accent-2); }
.intro-body p { font-family:var(--font-serif-jp); font-size:16px; line-height:2.1; color:var(--ink-mute); letter-spacing:.06em; margin:0 0 24px; text-wrap:pretty;}
.intro-body .signature { font-family:var(--font-display); font-style:italic; color:var(--accent); font-size:20px; letter-spacing:.05em; }
@media (max-width:820px){ .intro { grid-template-columns:1fr; gap:32px; } }

/* Filter bar */
.filters { max-width:1240px; margin:0 auto; }
.filter-row { display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding: 24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.filter-row + .filter-row { border-top:none; }
.filter-key { font-family:var(--font-eyebrow); font-size:11px; letter-spacing:.36em; color:var(--accent); text-transform:uppercase; min-width:96px; }
.filter-chips { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.chip {
  border:1px solid var(--line); background:transparent; color:var(--ink-mute);
  padding:9px 18px; font-family:var(--font-body); font-size:12px; letter-spacing:.14em; cursor:pointer;
  transition: all .25s ease;
  border-radius: 999px;
}
.chip:hover { border-color:var(--line-strong); color:var(--ink); }
.chip.active { background:var(--accent); border-color:var(--accent); color:#0b0f16; font-weight:500; }
.chip .count { opacity:.6; margin-left:8px; font-size:11px; }
.chip.active .count { opacity:.8; color:#0b0f16;}
.filter-summary { font-family:var(--font-display); font-style:italic; color:var(--ink-mute); font-size:16px; }
.filter-summary strong { color:var(--accent-2); font-style:normal; font-family:var(--font-display); font-size:22px; font-weight:500; margin:0 6px; }

/* Plans grid */
.plans-wrap { max-width:1240px; margin:56px auto 0; }
.plans-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; }
.plans-head h3 { font-family:var(--font-display); font-weight:400; font-size:48px; margin:0; }
.plans-head h3 em { font-style:italic; color:var(--accent-2); }
.view-toggle { display:flex; gap:2px; border:1px solid var(--line); }
.view-toggle button { background:transparent; color:var(--ink-mute); border:none; padding:10px 18px; font-family:var(--font-body); font-size:12px; letter-spacing:.14em; cursor:pointer;}
.view-toggle button.active { background:var(--accent); color:#0b0f16; }

.plans-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:36px 32px; }
@media (max-width:1080px){ .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .plans-grid { grid-template-columns: 1fr; } }

.plan {
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s;
  position:relative; overflow:hidden;
}
.plan::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background: linear-gradient(180deg, transparent 60%, rgba(198,169,110,0.06));
}
.plan:hover { transform:translateY(-6px); border-color:var(--line-strong); }
.plan:hover::before { opacity:1; }
.plan .thumb { position:relative; aspect-ratio: 4/3; overflow:hidden; }
.plan .thumb img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s ease; }
.plan:hover .thumb img { transform:scale(1.06); }
.plan .thumb::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,15,22,.55) 100%);
}
.plan .tag {
  position:absolute; top:14px; left:14px; z-index:2;
  color:var(--accent-2); font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:5px 10px; background:rgba(11,15,22,.5); backdrop-filter:blur(6px);
}
.plan .area-badge {
  position:absolute; top:14px; right:14px; z-index:2;
  color:var(--ink); font-family:var(--font-display); font-style:italic; font-size:14px;
  background:transparent;
}
.plan .body { padding: 24px 24px 26px; display:flex; flex-direction:column; flex:1; gap:14px; }
.plan .hotel-line { display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.plan .hotel { font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.28em; color:var(--accent); text-transform:uppercase; }
.plan .meal { font-family:var(--font-body); font-size:10px; letter-spacing:.24em; color:var(--ink-faint); text-transform:uppercase; }
.plan .restaurant { font-family:var(--font-serif-jp); font-size:12px; color:var(--ink-mute); letter-spacing:.1em; }
.plan .title { font-family:var(--font-serif-jp); font-weight:500; font-size:19px; line-height:1.55; color:var(--ink); margin:2px 0 4px; letter-spacing:.02em; text-wrap:pretty; }
.plan .meta { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line); margin-top:auto; }
.plan .period { font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--ink-mute); }
.plan .price { text-align:right; }
.plan .price .strike { display:block; text-decoration:line-through; color:var(--ink-faint); font-size:11px; font-family:var(--font-body); }
.plan .price .amount { font-family:var(--font-display); font-size:26px; color:var(--accent-2); line-height:1; letter-spacing:-.01em; }
.plan .price .amount small { font-size:12px; color:var(--ink-mute); font-family:var(--font-body); letter-spacing:.06em; margin-left:3px; }
.plan .cta-row { display:flex; gap:1px; }
.plan .cta-row button, .plan .cta-row a { flex:1; padding:14px; text-align:center; border:1px solid var(--line); background:transparent; color:var(--ink); font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.3em; text-transform:uppercase; cursor:pointer; transition: all .3s ease; }
.plan .cta-row .primary { background:var(--accent); color:#0b0f16; border-color:var(--accent); }
.plan .cta-row .primary:hover { background:var(--accent-2); }
.plan .cta-row .tel:hover { border-color:var(--line-strong); color:var(--accent-2); }
/* PC（マウス操作の端末）では電話ボタンを隠し「予約する」のみ表示。スマホ・タブレットでは2つ表示 */
@media (hover:hover) and (pointer:fine) { .plan .cta-row .tel { display:none; } }

/* list view */
.plans-list { display:flex; flex-direction:column; }
.plans-list .plan-row { display:grid; grid-template-columns: 220px 1fr 180px 160px 140px; gap:28px; align-items:center; padding:24px 0; border-top:1px solid var(--line); }
.plans-list .plan-row:last-child { border-bottom:1px solid var(--line); }
.plans-list .plan-row .thumb { aspect-ratio:16/10; overflow:hidden; position:relative; }
.plans-list .plan-row .thumb img { width:100%; height:100%; object-fit:cover; }
.plans-list .row-title { font-family:var(--font-serif-jp); font-size:18px; color:var(--ink); line-height:1.5; margin:0 0 6px; }
.plans-list .row-hotel { font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.28em; color:var(--accent); text-transform:uppercase; margin-bottom:6px; }
.plans-list .row-rest { font-family:var(--font-serif-jp); font-size:12px; color:var(--ink-mute); }
.plans-list .row-period { font-family:var(--font-display); font-style:italic; color:var(--ink-mute); font-size:16px; }
.plans-list .row-price { font-family:var(--font-display); font-size:26px; color:var(--accent-2); text-align:right;}
.plans-list .row-price small { font-family:var(--font-body); font-size:12px; color:var(--ink-mute); letter-spacing:.06em; margin-left:4px; }
.plans-list .row-cta {
  display:inline-flex; align-items:center; justify-content:center; padding:14px 20px;
  border:1px solid var(--line-strong); color:var(--accent-2); background:transparent;
  font-family:var(--font-body); font-size:13px; letter-spacing:.14em; text-decoration:none;
  transition: all .3s ease; white-space:nowrap; text-align:center;
}
.plans-list .row-cta:hover { background:var(--accent); color:#0b0f16; border-color:var(--accent); }
@media (max-width:900px){
  .plans-list .plan-row { grid-template-columns: 100px 1fr; gap:16px 16px; row-gap:12px; }
  .plans-list .plan-row .thumb { grid-row: span 2; }
  .plans-list .row-body { grid-column: 2; }
  .plans-list .row-period, .plans-list .row-price { grid-column: 2; text-align:left; }
  .plans-list .row-cta { grid-column: 1 / -1; padding:12px; font-size:13px; }
}

/* Map / hotels list section */
.hotels {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap:64px;
}
.hotels h3 { font-family:var(--font-display); font-weight:400; font-size:56px; margin:0 0 12px; }
.hotels h3 em { font-style:italic; color:var(--accent-2); }
.hotels p.lead { font-family:var(--font-serif-jp); color:var(--ink-mute); line-height:2; margin:0 0 32px; }
.hotel-list { border-top:1px solid var(--line); }
.hotel-list .item { display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:padding .3s ease;}
.hotel-list .item:hover { padding-left:12px; }
.hotel-list .item:hover .en { color:var(--accent-2); }
.hotel-list .name-block { }
.hotel-list .en { font-family:var(--font-display); font-style:italic; font-size:32px; color:var(--ink); transition:color .3s; }
.hotel-list .jp { font-family:var(--font-serif-jp); font-size:12px; color:var(--ink-mute); letter-spacing:.14em; margin-top:2px; }
.hotel-list .count { font-family:var(--font-eyebrow); font-size:11px; letter-spacing:.3em; color:var(--accent); }
.hotel-list .count::before { content:"—"; margin-right:8px; opacity:.5;}
@media (max-width:900px){ .hotels { grid-template-columns:1fr; gap:32px; } }

/* CTA footer band */
.band {
  position:relative; padding: 140px 40px; z-index:3;
  background: linear-gradient(180deg, #0a0d14 0%, #0f141d 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.band-inner { max-width:1000px; margin:0 auto; text-align:center; position:relative; z-index:2;}
.band h4 { font-family:var(--font-display); font-weight:400; font-size:clamp(40px, 6vw, 88px); line-height:1.05; margin:0 0 24px; }
.band h4 em { font-style:italic; color:var(--accent-2); }
.band p { font-family:var(--font-serif-jp); color:var(--ink-mute); font-size:15px; line-height:2; letter-spacing:.14em; margin:0 auto 40px; max-width:600px;}
.band .cta { display:inline-flex; align-items:center; gap:20px; padding:20px 40px; background:var(--accent); color:#0b0f16; font-family:var(--font-eyebrow); font-size:12px; letter-spacing:.36em; text-transform:uppercase; cursor:pointer; border:none; transition: all .3s ease; text-decoration:none; }
.band .cta:hover { background:var(--accent-2); transform:translateY(-2px);}
.band .cta .arrow { font-size:20px; }
.band::before, .band::after { content:""; position:absolute; width:400px; height:400px; border-radius:50%; filter:blur(80px); opacity:.28; }
.band::before { background:var(--accent-deep); top:-100px; left:-100px; }
.band::after { background:var(--accent); bottom:-150px; right:-100px; }

/* Footer */
footer.foot { padding: 60px 40px; text-align:center; color:var(--ink-faint); font-family:var(--font-eyebrow); font-size:10px; letter-spacing:.32em; text-transform:uppercase; position:relative; z-index:3; border-top:1px solid var(--line);}

/* Fade in on scroll */
.reveal { opacity:0; transform:translateY(30px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* Anchor labels */
.anchor-tag { position:absolute; top:-100px; }

/* Visually hidden but readable by search engines / screen readers */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* SSR plans heading + noscript fallback styling */
.ssr-plans-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; }
.ssr-plans-head .plans-heading { font-family:var(--font-display); font-weight:400; font-size:48px; margin:0; }
.ssr-plans-head .plans-heading em { font-style:italic; color:var(--accent-2); }
.plans-chapter { display:block; font-family:var(--font-eyebrow); font-size:12px; letter-spacing:.36em; color:var(--accent); margin-bottom:12px; text-transform:uppercase; }
@media (max-width: 820px){
  .ssr-plans-head { flex-direction:column; align-items:flex-start; gap:16px; }
  .ssr-plans-head .plans-heading { font-size:36px; }
}

[hidden] { display:none !important; }
.plans-empty { padding:80px 0; text-align:center; color:var(--ink-mute); font-family:var(--font-display); font-style:italic; font-size:22px; }
.plans-empty span { font-size:13px; letter-spacing:.2em; color:var(--ink-faint); font-family:var(--font-eyebrow); text-transform:uppercase; font-style:normal; }
.plans-list .row-price .strike { display:none; }
.hero-scroll::after { will-change:transform; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-scroll::after { animation:none; }
  .plan, .plan .thumb img { transition:none; }
}