/* ==========================================================================
   nk-luxe.css — 既存の見た目の上に重ねる「光・奥行き・文字の動き・切り替え」の層
   ・内容・順番・ボタンの文言と位置・予約導線は変えない
   ・html[data-luxe="1"] の時だけ効く（?luxe=0 で外せる）
   ・prefers-reduced-motion では動きを止める
   ========================================================================== */

/* ---------- 共通トークン ---------- */
html[data-luxe="1"]{
  --lx-gold:#C9A84C; --lx-gold-2:#e3cb85; --lx-gold-hi:#f7ead0; --lx-gold-deep:#8a6d25;
  --lx-ease:cubic-bezier(.2,.75,.2,1); --lx-cine:cubic-bezier(.65,0,.35,1);
  /* 角丸は 10 / 14 / 20 / 24 の4段だけ。影は 3段だけ。全部品がこの中から選ぶ */
  --lx-r-control:10px; --lx-r-button:14px; --lx-r-card:20px; --lx-r-sheet:24px;
  --lx-shadow-1:0 1px 2px rgba(44,24,16,.06),0 6px 16px rgba(44,24,16,.06);
  --lx-shadow-2:0 2px 6px rgba(44,24,16,.08),0 18px 40px rgba(44,24,16,.12);
  --lx-shadow-3:0 3px 10px rgba(0,0,0,.22),0 22px 48px rgba(0,0,0,.36);
  --lx-hairline:rgba(44,24,16,.10); --lx-hairline-dark:rgba(239,230,211,.10);
  --lx-spring:cubic-bezier(.34,1.3,.5,1);
  /* 金は「塗り」ではなく「金属」：上に光・下に影・縁に白いハイライト */
  --lx-metal:linear-gradient(180deg,#f4e5b6 0%,#dfc47c 16%,#caa64d 42%,#b48f36 70%,#d6bb6c 100%);
  --lx-metal-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 3px rgba(84,58,12,.30),0 10px 26px rgba(201,168,76,.24),0 2px 6px rgba(0,0,0,.18);
  --lx-metal-shadow-hover:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 3px rgba(84,58,12,.26),0 16px 36px rgba(201,168,76,.34),0 3px 8px rgba(0,0,0,.2);
  --lx-glass:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  --lx-glass-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.30),0 6px 16px rgba(0,0,0,.16);
  --lx-grain-soft:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --lx-grain-ink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --lx-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ---------- 漆の面（ヒーロー直下の予約帯）＝平らな塗りをやめ、上からの光と粒子で奥行きを出す ---------- */
html[data-luxe="1"] .hero-tel-bar{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 160% at 50% -30%,rgba(255,244,220,.10),transparent 55%),
    linear-gradient(180deg,#34211a 0%,#2b1912 55%,#23140e 100%);
  border-bottom:1px solid rgba(239,230,211,.10);
  box-shadow:inset 0 1px 0 rgba(247,234,208,.16),0 18px 40px rgba(0,0,0,.22);
}
html[data-luxe="1"] .hero-tel-bar::before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(247,234,208,.7),transparent);
}
html[data-luxe="1"] .hero-tel-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(520px circle at var(--lx-gx,50%) var(--lx-gy,0%),rgba(255,255,255,.07),transparent 60%),
    var(--lx-grain);
}
html[data-luxe="1"] .hero-tel-bar__label{color:rgba(239,230,211,.60)}
html[data-luxe="1"] .hero-tel-bar__hours{color:rgba(239,230,211,.74)}

/* 帯の3つのボタン＝同じ形・同じ高さの「組」にする（三つ目は下線リンクをやめ、静かなガラスの札に） */
html[data-luxe="1"] .hero-tel-bar__action{
  border-radius:var(--lx-r-button);min-height:56px;padding:8px 20px;
  font-family:var(--serif);font-weight:500;letter-spacing:.08em;
  transition:transform .3s var(--lx-ease),box-shadow .3s var(--lx-ease),background-color .3s,border-color .3s,filter .3s;
}
/* 9/16 UI統一：.nk-tel-link(56px)と高さを揃える。ドックの.mcb__action--primary(64px)は
   「常に出ている面」なので一段大きいままで良い（不一致4の直し方どおり） */
/* 電話ボタンは予約ドックと同じ順＝上にラベル（明朝）・下に番号（ゴシック・等幅数字） */
html[data-luxe="1"] .hero-tel-bar__action-label{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:none}
html[data-luxe="1"] .hero-tel-bar__action-num{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.05em;text-transform:none;font-variant-numeric:tabular-nums;opacity:.95}
html[data-luxe="1"] .hero-tel-bar__action--secondary,
html[data-luxe="1"] .hero-tel-bar__action--tertiary{
  background:var(--lx-glass);border:1px solid rgba(255,255,255,.18);color:#f1e8d8;
  text-decoration:none;box-shadow:var(--lx-glass-shadow);
}
html[data-luxe="1"] .hero-tel-bar__action--secondary:hover{border-color:rgba(255,255,255,.34);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
html[data-luxe="1"] .hero-tel-bar__action--tertiary{
  flex-direction:row;gap:0;white-space:nowrap;padding:8px 18px;
  color:var(--lx-gold-2);border-color:rgba(201,168,76,.34);
}
html[data-luxe="1"] .hero-tel-bar__action--tertiary:hover{opacity:1;border-color:rgba(201,168,76,.62);background:linear-gradient(180deg,rgba(201,168,76,.14),rgba(201,168,76,.05))}
html[data-luxe="1"] .hero-tel-bar__action:active{transform:scale(.97)}
@media (max-width:600px){
  html[data-luxe="1"] .hero-tel-bar{padding:18px 16px 20px;gap:10px}
  html[data-luxe="1"] .hero-tel-bar__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%}
  html[data-luxe="1"] .hero-tel-bar__action--primary{grid-column:1/-1;min-height:60px}
  html[data-luxe="1"] .hero-tel-bar__action--secondary,
  html[data-luxe="1"] .hero-tel-bar__action--tertiary{min-height:52px;padding:8px 10px;font-size:14px;letter-spacing:.06em}
  html[data-luxe="1"] .hero-tel-bar__hours{font-size:13px;letter-spacing:.1em}
}

/* ---------- Liquid Glass（ナビ・メニュー） ---------- */
html[data-luxe="1"] .nav.scrolled{
  background:rgba(250,247,242,.80);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55),0 8px 30px rgba(44,24,16,.06);
}
html[data-luxe="1"] .nav-overlay{
  background:rgba(38,21,14,.88);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-luxe="1"] .nav-overlay{background:var(--ink)}
}

/* ---------- 予約ドック（常に出ている予約バー）＝浮いた液体ガラスの板 ---------- */
html[data-luxe="1"] .mcb{
  isolation:isolate;
  border-radius:var(--lx-r-sheet);border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(40,25,18,.72),rgba(26,16,11,.78));
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  color:#f3ebdc;padding:10px 10px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(201,168,76,.10),0 22px 48px rgba(0,0,0,.36),0 3px 10px rgba(0,0,0,.22);
}
html[data-luxe="1"] .mcb::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-luxe="1"] .mcb{background:rgba(38,21,14,.96)}
}
html[data-luxe="1"] .mcb .mcb__action{
  border-radius:var(--lx-r-button);min-height:56px;border:1px solid rgba(255,255,255,.16);   /* 2026-09-21 64→56（本人「大きすぎる」） */
  transition:transform .25s var(--lx-ease),box-shadow .3s var(--lx-ease),filter .3s var(--lx-ease);
}
html[data-luxe="1"] .mcb__action--secondary{
  background:var(--lx-glass);color:#f3ebdc;border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.30);
}
html[data-luxe="1"] .mcb .mcb__action:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.2)}
html[data-luxe="1"] .mcb .mcb__action--primary:hover{box-shadow:var(--lx-metal-shadow-hover)}
html[data-luxe="1"] .mcb .mcb__action:active{transform:scale(.97)}
html[data-luxe="1"] .mcb__label{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.06em}
html[data-luxe="1"] .mcb__action-detail{font-size:11.5px;letter-spacing:.04em;opacity:.84}
html[data-luxe="1"] .mcb__num{font-weight:500;font-size:15px;letter-spacing:.05em}
html[data-luxe="1"] .mcb__hours{font-size:11.5px;letter-spacing:.04em;color:rgba(243,235,220,.82);margin-bottom:1px}
html[data-luxe="1"] .mcb__always{color:rgba(243,235,220,.66)}
@media (max-width:900px){
  html[data-luxe="1"] .mcb{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;border-width:1px;border-radius:var(--lx-r-sheet);padding:10px 10px 10px;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
  html[data-luxe="1"] .mcb-spacer{height:calc(var(--mcb-height,220px) + 30px + env(safe-area-inset-bottom))}
  html[data-luxe="1"].has-mcb{scroll-padding-bottom:calc(var(--mcb-height,220px) + 30px + env(safe-area-inset-bottom))}
}

/* ---------- Champagne Gold＝金属の面（ボタン）と金の文字 ---------- */
html[data-luxe="1"] .hero-tel-bar__action--primary,
html[data-luxe="1"] .mcb__action--primary,
html[data-luxe="1"] .btn-gold,
html[data-luxe="1"] .cta-mini,
html[data-luxe="1"] .nav-overlay__cta{
  position:relative;overflow:hidden;
  background:var(--lx-metal);
  border:1px solid rgba(255,255,255,.42);
  color:#1a0f09;text-shadow:0 1px 0 rgba(255,255,255,.32);
  box-shadow:var(--lx-metal-shadow);
  transition:box-shadow .4s var(--lx-ease),transform .35s var(--lx-ease),filter .4s var(--lx-ease);
}
html[data-luxe="1"] .hero-tel-bar__action--primary:hover,
html[data-luxe="1"] .mcb__action--primary:hover,
html[data-luxe="1"] .btn-gold:hover,
html[data-luxe="1"] .cta-mini:hover,
html[data-luxe="1"] .nav-overlay__cta:hover{
  background:var(--lx-metal);filter:brightness(1.05);
  box-shadow:var(--lx-metal-shadow-hover);
}
html[data-luxe="1"] .nk-sheen{
  position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.44) 50%,transparent 58%);
  transform:translateX(-70%) skewX(-8deg);opacity:0;
}
html[data-luxe="1"] .nk-gold:hover .nk-sheen{animation:nk-sheen 1.1s var(--lx-ease)}
@keyframes nk-sheen{0%{transform:translateX(-70%) skewX(-8deg);opacity:0}12%{opacity:1}30%{transform:translateX(70%) skewX(-8deg);opacity:0}100%{transform:translateX(70%) skewX(-8deg);opacity:0}}
/* 金の文字（14・年号・SHIATSU）。React が className を書き戻すので JS の印に頼らず CSS だけで当てる。
   光が走るのは、その要素が画面に入って .visible が付いた時に一度だけ（サイト既存の Reveal を利用） */
html[data-luxe="1"] .trust__item--hero .trust__num{text-shadow:none}
html[data-luxe="1"] .trust__item--hero .trust__num > span,
html[data-luxe="1"] .history__year-num,
html[data-luxe="1"] .hero-en__shiatsu{
  background:linear-gradient(100deg,var(--lx-gold-deep) 0%,var(--lx-gold) 30%,var(--lx-gold-hi) 50%,var(--lx-gold) 70%,var(--lx-gold-deep) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-position:120% 0;text-shadow:none;
  filter:drop-shadow(0 0 22px rgba(201,168,76,.30)) drop-shadow(0 0 64px rgba(201,168,76,.14));
}
html[data-luxe="1"] .trust__item--hero.visible .trust__num > span,
html[data-luxe="1"] .reveal.visible .history__year-num,
html[data-luxe="1"] .hero-en__shiatsu{animation:nk-goldsweep 2.6s cubic-bezier(.4,0,.2,1) .4s 1 forwards}
@keyframes nk-goldsweep{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- Kinetic Typography（行ごとに静かに立ち上がる） ---------- */
html[data-luxe="1"] .nk-kinetic .nk-ln{display:inline-block;opacity:0;transform:translateY(.35em);will-change:transform,opacity}
html[data-luxe="1"] .nk-kinetic.is-in .nk-ln{animation:nk-ln-in .9s var(--lx-ease) forwards;animation-delay:calc(var(--i,0) * 110ms)}
html[data-luxe="1"] .nk-kinetic.nk-ln-self{opacity:0;transform:translateY(.35em)}
html[data-luxe="1"] .nk-kinetic.nk-ln-self.is-in{animation:nk-ln-in .9s var(--lx-ease) forwards}
@keyframes nk-ln-in{to{opacity:1;transform:none}}

/* ---------- Cursor Spotlight（暗い面だけ） ---------- */
html[data-luxe="1"] .nk-spot-host{position:relative;overflow:hidden}
html[data-luxe="1"] .nk-spot{
  position:absolute;left:0;top:0;width:1100px;height:1100px;pointer-events:none;z-index:1;opacity:0;transition:opacity .8s var(--lx-ease);
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(227,203,133,.09),rgba(227,203,133,.03) 35%,transparent 62%);
}
html[data-luxe="1"] .nk-spot.is-on{opacity:1}
@media (pointer:coarse){html[data-luxe="1"] .nk-spot{width:900px;height:900px;background:radial-gradient(circle at center,rgba(227,203,133,.07),rgba(227,203,133,.02) 35%,transparent 62%)}}
/* 2026-09-20実測NG対応：/news/flux-conditionings/ 390px幅で .page-footer.nk-spot-host 配下の
   .nk-spot（幅1100px）が右にはみ出し横スクロールを起こしていた。マウスカーソル前提の演出で
   狭い画面では意味を持たないため、非表示にして横スクロールの原因ごと断つ。 */
@media (max-width:479px){html[data-luxe="1"] .nk-spot{display:none}}

/* ---------- WebGL Refraction（トップのヒーロー・デスクトップ） ---------- */
html[data-luxe="1"] .hero .nk-refract{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity 1.4s ease;pointer-events:none;transform-origin:50% 50%}
html[data-luxe="1"] .hero.nk-gl .nk-refract{opacity:1}

/* ---------- Cinematic page transition（ページ間・同一オリジン） ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:nk-vt-out .28s cubic-bezier(.65,0,.35,1) both}
  ::view-transition-new(root){animation:nk-vt-in .42s cubic-bezier(.65,0,.35,1) both}
}
@keyframes nk-vt-out{to{opacity:0;filter:blur(4px)}}
@keyframes nk-vt-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}

/* ---------- Magnetic（JS が transform を当てる。既存の hover 変形と喧嘩しないように） ---------- */
html[data-luxe="1"] .nk-magnet{will-change:transform}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-luxe="1"] .nk-kinetic .nk-ln,html[data-luxe="1"] .nk-kinetic.nk-ln-self{opacity:1;transform:none;animation:none !important}
  html[data-luxe="1"] .nk-sheen{animation:none !important}
  html[data-luxe="1"] .trust__item--hero .trust__num > span,html[data-luxe="1"] .history__year-num,html[data-luxe="1"] .hero-en__shiatsu{background-position:50% 0;animation:none !important}
  html[data-luxe="1"] .nk-spot{display:none}
  html[data-luxe="1"] .hero.nk-gl .nk-refract{opacity:0}
}

/* ==========================================================================
   材質の体系（9/16・Apple の質感に合わせる）
   ・角丸は 10/14/20/24 の4段、影は3段、材質は「漆（暗）」「和紙（明）」「ガラス」「金属」の4つだけ
   ・勝手に動くものを置かない。動くのは「触った時」と「画面に入った時」だけ
   ========================================================================== */

/* ---------- 和紙（明るい面）＝ごく淡い墨の粒子 ---------- */
html[data-luxe="1"] body{background-image:var(--lx-grain-ink)}
html[data-luxe="1"] .menu,
html[data-luxe="1"] .faq{background-image:linear-gradient(180deg,var(--bg) 0,var(--bg-warm) 88px),var(--lx-grain-ink)}
html[data-luxe="1"] .voices{background-image:var(--lx-grain-ink)}
/* 9/16 UI統一：下層ページ本文（.page-main）も和紙の面にする */
html[data-luxe="1"] .page-main,
html[data-luxe="1"] .kk-lead,
html[data-luxe="1"] .kk-approach{background-image:var(--lx-grain-ink)}

/* ---------- 漆（暗い面）＝上からの光と、ごく淡い粒子 ---------- */
html[data-luxe="1"] .pricing,
html[data-luxe="1"] .history,
html[data-luxe="1"] .trust,
html[data-luxe="1"] .cta{background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,244,220,.07),transparent 60%),var(--lx-grain-soft)}
/* 9/16 UI統一：下層ページのCTA帯（.kk-cta）もトップの .cta と同じ漆にする */
html[data-luxe="1"] .kk-cta{background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,244,220,.07),transparent 60%),var(--lx-grain-soft)}
html[data-luxe="1"] .footer{background-image:linear-gradient(180deg,rgba(44,24,16,1) 0,rgba(12,8,6,1) 140px),var(--lx-grain-soft)}

/* ---------- ナビの部品＝小さな角丸の統一 ---------- */
html[data-luxe="1"] .nav .nav__lang{border-radius:var(--lx-r-control);border-color:rgba(239,230,211,.30)}
html[data-luxe="1"] .nav.scrolled .nav__lang{border-color:var(--lx-hairline);background:rgba(255,255,255,.35)}
html[data-luxe="1"] .nav .nav__lang--multi,html[data-luxe="1"] .nav.scrolled .nav__lang--multi{background:none;border:0;border-radius:0}   /* 2026-09-21 多言語の行そのものには面を出さない（ボタン単位で出す） */
html[data-luxe="1"] .nav .cta-mini{border-radius:var(--lx-r-control)}

/* ---------- 写真＝角丸20・内側の細い光・柔らかい影 ---------- */
html[data-luxe="1"] .intro__gallery-frame,
html[data-luxe="1"] .history__photo-wrap,
html[data-luxe="1"] .pricing__room{position:relative;border-radius:var(--lx-r-card);overflow:hidden;isolation:isolate;box-shadow:var(--lx-shadow-2)}
html[data-luxe="1"] .intro__gallery-frame::after,
html[data-luxe="1"] .history__photo-wrap::after,
html[data-luxe="1"] .pricing__room::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-luxe="1"] .pricing__room-label{z-index:1}

/* ---------- 地図＝写真と同じ額 ---------- */
html[data-luxe="1"] .access .map{border-radius:var(--lx-r-card);border:1px solid var(--lx-hairline);box-shadow:var(--lx-shadow-2);background:var(--bg-warm)}

/* ---------- カード＝曇った和紙のガラス ---------- */
html[data-luxe="1"] .voices__card{
  border-radius:var(--lx-r-card);border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--lx-shadow-1);
}

/* ---------- ボタン＝角丸14・押すと沈む・ゴーストはガラス ---------- */
html[data-luxe="1"] .btn-gold,
html[data-luxe="1"] .btn-ghost{border-radius:var(--lx-r-button);transition:transform .35s var(--lx-spring),box-shadow .35s var(--lx-ease),background-color .3s,border-color .3s,filter .3s,letter-spacing .3s ease,gap .3s ease}
html[data-luxe="1"] .btn-ghost{
  background:var(--lx-glass);border:1px solid rgba(255,255,255,.20);color:#f1e8d8;
  box-shadow:var(--lx-glass-shadow);
}
html[data-luxe="1"] .btn-ghost:hover{border-color:rgba(255,255,255,.36);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
html[data-luxe="1"] .kk-lineage-cta .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
html[data-luxe="1"] .btn-gold:active,
html[data-luxe="1"] .btn-ghost:active,
html[data-luxe="1"] .nav .cta-mini:active,
html[data-luxe="1"] .nav .nav__lang:active,
html[data-luxe="1"] .nkg-chip:active{transform:scale(.97)}

/* ---------- 予約ドックの「いま」の点（状態は data-mcb-state） ---------- */
html[data-luxe="1"] .mcb__today::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;align-self:center;margin-right:-4px;background:rgba(243,235,220,.38);box-shadow:0 0 0 2px rgba(255,255,255,.06)}
html[data-luxe="1"] .mcb[data-mcb-state="open"] .mcb__today::before{background:#4cd964;box-shadow:0 0 0 2px rgba(76,217,100,.18),0 0 10px rgba(76,217,100,.45)}
html[data-luxe="1"] .mcb[data-mcb-state="before"] .mcb__today::before{background:var(--lx-gold-2);box-shadow:0 0 0 2px rgba(227,203,133,.16)}
html[data-luxe="1"] .mcb[dir="rtl"] .mcb__today::before{margin-right:0;margin-left:-4px}

/* ---------- 残りの箱を同じ体系に（9/16 追補） ---------- */
html[data-luxe="1"] .voices__google{
  border-radius:var(--lx-r-card);border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--lx-shadow-1);
}
html[data-luxe="1"] .voices__google-btn,
html[data-luxe="1"] .nk-mail-copy__button,
html[data-luxe="1"] .nkg-mail,
html[data-luxe="1"] .nkg-tel,
html[data-luxe="1"] .nkg-cb{border-radius:var(--lx-r-button);transition:transform .35s var(--lx-spring),box-shadow .35s var(--lx-ease),background-color .3s,border-color .3s,color .3s}
html[data-luxe="1"] .nkg-chip{border-radius:var(--lx-r-control);transition:transform .35s var(--lx-spring),background-color .3s,border-color .3s,color .3s}
html[data-luxe="1"] .voices__google-btn:active,
html[data-luxe="1"] .nk-mail-copy__button:active,
html[data-luxe="1"] .nkg-mail:active,
html[data-luxe="1"] .nkg-tel:active,
html[data-luxe="1"] .nkg-cb:active{transform:scale(.97)}

/* ---------- 系譜へのボタン＝黄金の糸のオーラをやめ、静かな札に（9/16 本人「ダサい」） ---------- */
html[data-luxe="1"] .history__more .onward-aura,
html[data-luxe="1"] .en-onward .onward-aura{display:none}
html[data-luxe="1"] .history__more-link{
  padding:16px 28px;border-radius:var(--lx-r-button);border:1px solid rgba(201,168,76,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.18);
  color:var(--lx-gold-2);letter-spacing:.18em;
  transition:transform .35s var(--lx-spring),border-color .3s,background-color .3s,color .3s,box-shadow .3s;
}
html[data-luxe="1"] .history__more-link:hover{border-color:rgba(227,203,133,.7);color:#f0dca8;background:linear-gradient(180deg,rgba(201,168,76,.12),rgba(201,168,76,.04));transform:translateY(-1px)}
html[data-luxe="1"] .history__more-link:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){html[data-luxe="1"] .history__more-link{box-shadow:none}}

/* ---------- テンプレートをコピー＝隣のガラスの札と同じ材質に（9/16 本人「独立してずれてて気持ち悪い」） ---------- */
html[data-luxe="1"] .cta .nk-mail-copy__button{
  background:var(--lx-glass);border:1px solid rgba(255,255,255,.20);color:#f1e8d8;
  box-shadow:var(--lx-glass-shadow);padding:.8rem 1.4rem;letter-spacing:.08em;
}
html[data-luxe="1"] .cta .nk-mail-copy__button:hover{border-color:rgba(255,255,255,.36);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
html[data-luxe="1"] .cta .nk-mail-copy summary{color:rgba(241,232,216,.78);letter-spacing:.06em;border-radius:var(--lx-r-control)}
html[data-luxe="1"] .cta .nk-mail-copy summary:hover{color:#f1e8d8}
html[data-luxe="1"] .cta .nk-mail-copy textarea{border-radius:var(--lx-r-control);border-color:rgba(255,255,255,.25)}

/* ---------- 歴史：継がれる糸・燃え移る火（nk-lineage.js が描く。旧の糸・螺旋・弾は隠す） ---------- */
html[data-luxe="1"] .history__thread,
html[data-luxe="1"] .history__thread-glow,
html[data-luxe="1"] .history__embers,
html[data-luxe="1"] .history__spindle-mask{display:none !important}
html[data-luxe="1"] .nk-lineage{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html[data-luxe="1"] .history__node{
  color:rgba(216,186,120,.34);text-shadow:none;box-shadow:none;
  transition:color 1.1s var(--lx-ease),text-shadow 1.1s var(--lx-ease),transform .9s var(--lx-spring);
}
html[data-luxe="1"] .history__node::after{display:none}
html[data-luxe="1"] .history__node.nk-lit{
  color:#f6e6bb;
  text-shadow:0 0 5px rgba(255,238,190,.8),0 0 16px rgba(201,168,76,.5);
  animation:nk-node-ignite 1.1s var(--lx-spring) 1;
}
@keyframes nk-node-ignite{0%{transform:translate(-50%,-50%) scale(.92)}35%{transform:translate(-50%,-50%) scale(1.14)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){
  html[data-luxe="1"] .history__node.nk-lit{animation:none}
}

/* ==========================================================================
   下層ページをトップと同じ UI に（9/16 本人「今のTOPのUIを他のページにも全て」）
   ・ナビ＝トップのスクロール時と同じ「和紙のガラス」／黒いロゴ／金属の「ご予約」
   ・フッター＝見出しを細い線で挟む（サンドイッチ）／「お悩みから探す」は2列に畳んで高さを半分に
   ========================================================================== */
html[data-luxe="1"] .page-nav{
  background:rgba(250,247,242,.84);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(44,24,16,.10);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55),0 8px 30px rgba(44,24,16,.06);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-luxe="1"] .page-nav{background:rgba(250,247,242,.97)}}
html[data-luxe="1"] .page-nav-logo{filter:none}
html[data-luxe="1"] .page-nav ul a{color:rgba(44,24,16,.78);font-weight:400}
html[data-luxe="1"] .page-nav ul a:hover{color:var(--lx-gold-deep)}
html[data-luxe="1"] .page-nav ul a[href$="/reservation/"],
html[data-luxe="1"] .page-nav ul a[href$="/en-reservation/"]{
  display:inline-block;padding:9px 16px;border-radius:var(--lx-r-control);
  background:var(--lx-metal);border:1px solid rgba(255,255,255,.42);color:#1a0f09;
  font-family:var(--serif);font-weight:500;letter-spacing:.14em;text-shadow:0 1px 0 rgba(255,255,255,.32);
  box-shadow:var(--lx-metal-shadow);transition:transform .35s var(--lx-spring),box-shadow .35s var(--lx-ease),filter .3s;
}
html[data-luxe="1"] .page-nav ul a[href$="/reservation/"]:hover,
html[data-luxe="1"] .page-nav ul a[href$="/en-reservation/"]:hover{color:#1a0f09;filter:brightness(1.05);box-shadow:var(--lx-metal-shadow-hover)}
html[data-luxe="1"] .page-nav ul a[href$="/reservation/"]:active,
html[data-luxe="1"] .page-nav ul a[href$="/en-reservation/"]:active{transform:scale(.97)}
@media (max-width:800px){
  html[data-luxe="1"] .page-nav-mobile{border-top:1px solid rgba(44,24,16,.08);padding:6px 8px;gap:6px}
  html[data-luxe="1"] .page-nav-mobile a{color:rgba(44,24,16,.8);border-radius:var(--lx-r-control);font-family:var(--serif);letter-spacing:.06em}
  html[data-luxe="1"] .page-nav-mobile a + a{border-left:0}
  html[data-luxe="1"] .page-nav-mobile a[href$="/reservation/"],
  html[data-luxe="1"] .page-nav-mobile a[href$="/en-reservation/"]{background:var(--lx-metal);border:1px solid rgba(255,255,255,.42);color:#1a0f09;font-weight:500;box-shadow:var(--lx-metal-shadow);text-shadow:0 1px 0 rgba(255,255,255,.32)}
}

/* フッター：見出しを線で挟む・畳む */
/* 9/16 UI統一：.footer と同じ地色 rgb(12,8,6) 系に揃える（漆の材質・段落構成はそのまま） */
html[data-luxe="1"] .page-footer{background-image:linear-gradient(180deg,rgba(44,24,16,1) 0,rgba(12,8,6,1) 160px),var(--lx-grain-soft);padding-top:56px}
html[data-luxe="1"] .page-footer-groups{grid-template-columns:minmax(0,1.2fr) repeat(5,minmax(0,1fr));gap:36px 20px}   /* 9/16: 2fr＋2列だと1280で「観劇・コンサートのあとの指圧」が3行に割れた（字余り実測）。1列にして他の5列を175pxに */
html[data-luxe="1"] .page-footer-group:first-child{grid-column:auto}
html[data-luxe="1"] .page-footer-group:first-child .page-footer-group__list{display:grid;grid-template-columns:1fr;column-gap:24px;row-gap:0}
html[data-luxe="1"] .page-footer-group__heading{
  font-family:var(--latin);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(227,203,133,.9);
  padding:0 0 10px;margin:0 0 6px;border-bottom:1px solid rgba(239,230,211,.12);
}
html[data-luxe="1"] .page-footer-group__list{gap:0}
html[data-luxe="1"] .page-footer-group__list a{padding:7px 0;font-size:12.5px;letter-spacing:.06em;color:rgba(239,230,211,.62);line-height:22px;transition:color .25s,transform .25s}
html[data-luxe="1"] .page-footer-group__list a:hover{color:#f0dca8}
html[data-luxe="1"] .page-footer-bottom{border-top:1px solid rgba(239,230,211,.10);margin-top:40px}
@media (max-width:1100px){
  html[data-luxe="1"] .page-footer-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-luxe="1"] .page-footer-group:first-child{grid-column:1 / -1}
  html[data-luxe="1"] .page-footer-group:first-child .page-footer-group__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}   /* 全幅なので3列に */
}
@media (max-width:800px){
  html[data-luxe="1"] .page-footer-groups{grid-template-columns:1fr;gap:0}
  html[data-luxe="1"] .page-footer-group:first-child{grid-column:auto}
  html[data-luxe="1"] .page-footer-group:first-child .page-footer-group__list{grid-template-columns:1fr 1fr;column-gap:16px}
  html[data-luxe="1"] .page-footer-group__heading{padding:16px 0;margin:0;border-bottom:1px solid rgba(239,230,211,.12);cursor:pointer;display:flex;justify-content:flex-start;gap:0;align-items:center;font-size:12px}
  html[data-luxe="1"] .page-footer-group__heading::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:1px solid rgba(227,203,133,.7);border-bottom:1px solid rgba(227,203,133,.7);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--lx-ease);margin-right:4px}
  html[data-luxe="1"] .page-footer-group[open] .page-footer-group__heading::after{transform:translateY(2px) rotate(225deg)}
  html[data-luxe="1"] .page-footer-group__list{padding:6px 0 14px}
}

/* ---------- 評価で見つかった小さな傷（9/16 夕） ---------- */
/* お客様の声の3枚カード：2pxの灰色の目地が角丸の角から覗いていた → 目地をやめ、間を空けて影で分ける */
html[data-luxe="1"] .voices__grid{gap:14px;background:transparent}
/* 欧文書体のオールドスタイル数字で「01」が「oI」に見える → ライニング数字に */
html[data-luxe="1"] .section-label .num,
html[data-luxe="1"] .voices__mark,
html[data-luxe="1"] .history__node,
html[data-luxe="1"] .kk-section-label .num{font-variant-numeric:lining-nums tabular-nums}

/* ---------- 本文中の電話番号＝押せる札（ドックと同じ順：ラベル上・番号下） ---------- */
.nk-tel-link{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:9px 22px;margin:4px 0;border-radius:14px;text-decoration:none !important;color:#1a0f09 !important;
  background:linear-gradient(180deg,#f4e5b6 0%,#dfc47c 16%,#caa64d 42%,#b48f36 70%,#d6bb6c 100%);border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 3px rgba(84,58,12,.30),0 10px 26px rgba(201,168,76,.24),0 2px 6px rgba(0,0,0,.18);
  text-shadow:0 1px 0 rgba(255,255,255,.32);transition:transform .35s cubic-bezier(.34,1.3,.5,1),filter .3s;vertical-align:middle;line-height:1.2}
.nk-tel-link:hover{filter:brightness(1.05)}
.nk-tel-link:active{transform:scale(.97)}
.nk-tel-link__label{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.08em}
.nk-tel-link__num{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.page-content p > .nk-tel-link:only-child{margin:8px 0}
/* 9/16夜 検品修正：.kk-hero__cta / .kk-cta / .kk-cta__buttons の中に置いた .nk-tel-link が、
   祖先が持つ古いCTAボタン用の余白・字間・大文字化を引き継がないよう、標準の型を明示的に上書きする。
   セレクタは祖先クラス1つ+対象クラスで詳細度(0,0,2,0)にし、kk側の単一クラスや「クラス+要素」セレクタより
   必ず勝つようにする（!important は使わない） */
.kk-hero__cta .nk-tel-link,
.kk-cta .nk-tel-link,
.kk-cta__buttons .nk-tel-link{
  display:inline-flex;width:auto;min-height:56px;padding:9px 22px;
  letter-spacing:normal;text-transform:none;
}
.kk-hero__cta .nk-tel-link__label,
.kk-cta .nk-tel-link__label,
.kk-cta__buttons .nk-tel-link__label{font-size:15px;letter-spacing:.08em;text-transform:none}
.kk-hero__cta .nk-tel-link__num,
.kk-cta .nk-tel-link__num,
.kk-cta__buttons .nk-tel-link__num{font-size:16px;letter-spacing:.05em;text-transform:none}

/* ---------- 下層ページのナビ＝トップと同じ部品（.nav）を sticky で ---------- */
.nav.nav--page{position:sticky;top:0;left:auto;right:auto}
html[data-luxe="1"] .nav.nav--page{background:rgba(250,247,242,.84);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(44,24,16,.10);box-shadow:inset 0 -1px 0 rgba(255,255,255,.55),0 8px 30px rgba(44,24,16,.06)}
.nav.nav--page .brand-logo{filter:none}
.nav.nav--page ~ .page-main .kk-breadcrumb,.nav.nav--page ~ main .kk-breadcrumb{margin-top:0}

/* ---------- ロゴ：金の画像に差し替えるので、橙になるフィルターは切る ---------- */
html[data-luxe="1"] .nav:not(.scrolled) .brand-logo,
html[data-luxe="1"] .nav:not(.scrolled) .nav__logo img{filter:none}

/* ---------- 9/16 UI統一（不一致6）：本文の中の箱をカードの角丸トークンに揃える ---------- */
html[data-luxe="1"] .contact-block,
html[data-luxe="1"] .careers-point,
html[data-luxe="1"] .kk-voice,
html[data-luxe="1"] .journal-card,
html[data-luxe="1"] .kk-flow__step{border-radius:var(--lx-r-card);box-shadow:var(--lx-shadow-1)}
html[data-luxe="1"] .page-content table{border-radius:var(--lx-r-card);border-collapse:separate;border-spacing:0;overflow:hidden;box-shadow:var(--lx-shadow-1)}