/* =========================================================
   すむら酒店 2020年代版 ── 仕立て直し
   ねらい：小さな画面でも読みやすく、けれども静かで、格を上げる。
   modern.css のあとに読み込みます。
   ========================================================= */

/* ── 色と紙 ───────────────────────────────────────────── */
html[data-era="now"]{
  --mx-ink:#070609;
  --mx-ink2:#0c0b0f;
  --mx-paper:#f3f0ea;
  --mx-dim:rgba(243,240,234,.76);
  --mx-faint:rgba(243,240,234,.50);
  --mx-line:rgba(243,240,234,.15);
  --mx-hair:rgba(201,173,130,.34);
  --mx-gold:#c9ad82;
  --mx-wine:#7a1226;
}

/* 地は真っ黒ではなく、灯りの残る黒に */
html[data-era="now"] body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,173,130,.055), transparent 60%),
    radial-gradient(90% 60% at 50% 108%, rgba(122,18,38,.06), transparent 62%),
    var(--mx-ink);
  background-attachment:fixed;
}
html[data-era="now"] ::selection{ background:rgba(201,173,130,.30); color:#fff; }
html[data-era="now"] :focus-visible{ outline:1px solid var(--mx-gold); outline-offset:3px; }

/* 細い金の線の巻取り */
html[data-era="now"] *{ scrollbar-width:thin; scrollbar-color:rgba(201,173,130,.42) transparent; }
html[data-era="now"] ::-webkit-scrollbar{ width:6px; height:6px }
html[data-era="now"] ::-webkit-scrollbar-thumb{ background:rgba(201,173,130,.36); border-radius:99px }
html[data-era="now"] ::-webkit-scrollbar-track{ background:transparent }

/* ── 組版 ─────────────────────────────────────────────── */
html[data-era="now"] .mx-h1,
html[data-era="now"] .mx-h2,
html[data-era="now"] .mx-h3,
html[data-era="now"] .mx-lead,
html[data-era="now"] .mx-p,
html[data-era="now"] .mx-note{
  text-wrap:pretty;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
}
html[data-era="now"] .mx-h1{
  font-optical-sizing:auto; letter-spacing:-.005em;
  font-size:clamp(44px,7vw,112px);
}
html[data-era="now"] .mx-h2{ letter-spacing:.045em; line-height:1.42; }

/* 章番号に、金の細い線を添えます */
html[data-era="now"] .mx-kicker{ display:flex; align-items:center; gap:14px; }
html[data-era="now"] .mx-kicker::before{
  content:""; flex:0 0 auto; width:38px; height:1px;
  background:linear-gradient(90deg, var(--mx-gold), rgba(201,173,130,0));
}

/* 本文（画面の大きさによらず、必ず読める太さと行間に） */
html[data-era="now"][data-mx="1"] .mx-lead{
  font-size:17.5px !important; line-height:2.05 !important; letter-spacing:.035em !important;
  color:var(--mx-dim) !important;
}
html[data-era="now"][data-mx="1"] .mx-p{
  font-size:16px !important; line-height:2.15 !important; letter-spacing:.03em !important;
  color:var(--mx-dim) !important;
}
html[data-era="now"][data-mx="1"] .mx-note{
  font-size:13.5px !important; line-height:2.0 !important; letter-spacing:.03em !important;
  color:var(--mx-faint) !important;
}
html[data-era="now"] .mx-cap{ font-size:11.5px; letter-spacing:.2em; color:var(--mx-faint); }
html[data-era="now"] .mx-facts dd{ font-size:15.5px; line-height:2.0; }
html[data-era="now"] .mx-table td{ font-size:15.5px; line-height:2.05; }

/* ── 金の意匠 ─────────────────────────────────────────── */
html[data-era="now"] .mx-rule{
  background:linear-gradient(90deg, rgba(243,240,234,0), var(--mx-line) 18%, var(--mx-line) 82%, rgba(243,240,234,0));
}
html[data-era="now"] .mx-btn{
  border-color:var(--mx-hair); letter-spacing:.24em; font-size:11.5px;
}
html[data-era="now"] .mx-btn:hover{ border-color:var(--mx-gold); }
html[data-era="now"] .mx-btn::before{ background:var(--mx-gold); }
html[data-era="now"][data-mx="1"] .mx-btn:hover{ color:#120d0b !important; }
html[data-era="now"] .mx-link::after{ background:var(--mx-gold); height:1px; }
html[data-era="now"] .mx-vitrine{
  box-shadow:0 0 0 1px rgba(201,173,130,.20), 0 40px 90px -34px rgba(0,0,0,.95), 0 0 120px -46px rgba(201,173,130,.55);
}

/* 天の帯：店名の下に、細い金の線 */
html[data-era="now"] .mx-brand small{ color:rgba(201,173,130,.62); letter-spacing:.38em; }
html[data-era="now"] .mx-head.is-stuck{
  background:rgba(7,6,9,.80);
  border-bottom-color:var(--mx-hair);
}

/* 地の帯：屋号を大きく、静かに */
html[data-era="now"] .mx-foot{ border-top-color:var(--mx-hair); }
html[data-era="now"] .mx-foot h4{ color:rgba(201,173,130,.66); }

/* ── 幕（最初の一枚）──────────────────────────────────── */
.mx-veil{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:var(--mx-ink);
  animation:mx-veil-lift 1.9s cubic-bezier(.62,.02,.2,1) .45s forwards;
}
.mx-veil i{
  position:absolute; left:50%; top:50%; width:min(280px,44vw); height:1px; margin-left:calc(min(280px,44vw) / -2);
  background:linear-gradient(90deg, rgba(201,173,130,0), var(--mx-gold), rgba(201,173,130,0));
  transform:scaleX(0); animation:mx-veil-line 1.15s cubic-bezier(.16,.84,.24,1) forwards;
}
@keyframes mx-veil-line{ from{ transform:scaleX(0); opacity:0 } 40%{ opacity:1 } to{ transform:scaleX(1); opacity:.9 } }
@keyframes mx-veil-lift{ to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion:reduce){
  .mx-veil{ animation:none; opacity:0; visibility:hidden }
  .mx-veil i{ animation:none }
}

/* ── 小さな画面：ここからが本題 ───────────────────────── */
@media (max-width:860px){
  html[data-era="now"][data-mx="1"] body{ font-size:16.5px !important; line-height:1.95 !important; letter-spacing:.02em !important; }
  html[data-era="now"][data-mx="1"] .mx-lead{
    font-size:17px !important; line-height:1.95 !important; letter-spacing:.02em !important;
    color:rgba(243,240,234,.84) !important;
  }
  html[data-era="now"][data-mx="1"] .mx-p{
    font-size:16.5px !important; line-height:1.98 !important; letter-spacing:.015em !important;
    color:rgba(243,240,234,.82) !important;
  }
  html[data-era="now"][data-mx="1"] .mx-note{ font-size:14px !important; line-height:1.95 !important; letter-spacing:.015em !important; color:rgba(243,240,234,.62) !important; }

  html[data-era="now"] .mx-h1{ font-size:clamp(40px,12.5vw,64px); line-height:1.1; }
  html[data-era="now"] .mx-h2{ font-size:clamp(22px,6.2vw,29px); line-height:1.55; letter-spacing:.025em; }
  html[data-era="now"] .mx-h3{ font-size:17.5px; line-height:1.75; letter-spacing:.025em; }
  html[data-era="now"] .mx-kicker{ font-size:10px; letter-spacing:.24em; margin-bottom:18px; }
  html[data-era="now"] .mx-kicker::before{ width:26px }
  html[data-era="now"] .mx-hero-sub{ font-size:13px; letter-spacing:.12em; line-height:1.9; }
  html[data-era="now"] .mx-cap{ font-size:12px; letter-spacing:.12em; line-height:1.8; }
  html[data-era="now"] .mx-in,html[data-era="now"] .mx-in-n{ padding:0 24px; }

  /* 数字と仕様：一段に */
  html[data-era="now"] .mx-facts{ grid-template-columns:1fr; }
  html[data-era="now"] .mx-facts > div{ padding:24px 22px; }
  html[data-era="now"] .mx-facts dt{ font-size:10px; letter-spacing:.22em; }
  html[data-era="now"] .mx-facts dd{ font-size:16px; line-height:1.9; }

  /* 表は縦に積みます（横に潰れて読めなくなるのを防ぎます） */
  html[data-era="now"] .mx-table th,
  html[data-era="now"] .mx-table td{ display:block; width:auto; white-space:normal; }
  html[data-era="now"] .mx-table th{ padding:22px 0 6px; border:0; font-size:10px; letter-spacing:.22em; }
  html[data-era="now"] .mx-table td{ padding:0 0 20px; font-size:16px; line-height:1.95; }

  html[data-era="now"] .mx-foot a{ font-size:15px; letter-spacing:.04em; }
  html[data-era="now"] .mx-foot li{ margin-bottom:14px; }
  html[data-era="now"] .mx-foot-end{ font-size:11px; letter-spacing:.14em; line-height:1.9; }
  html[data-era="now"] .mx-btn{ padding:16px 30px; font-size:12px; letter-spacing:.18em; }
  html[data-era="now"] .mx-field{ font-size:16.5px; }
  html[data-era="now"] .mx-label{ font-size:11px; letter-spacing:.2em; }

  /* 表紙の文字が写真に負けないように */
  html[data-era="now"] .mx-hero-shade{
    background:
      linear-gradient(to bottom, rgba(7,6,9,.52) 0%, rgba(7,6,9,.28) 30%, rgba(7,6,9,.80) 78%, var(--mx-ink) 100%),
      radial-gradient(90% 70% at 26% 40%, rgba(7,6,9,0) 22%, rgba(7,6,9,.66) 100%);
  }
  html[data-era="now"] .mx-bleed-shade{
    background:linear-gradient(to bottom, var(--mx-ink) 0%, rgba(7,6,9,.62) 22%, rgba(7,6,9,.62) 72%, var(--mx-ink) 100%);
  }
  html[data-era="now"] .mx-photo img{ filter:brightness(.82) contrast(1.03) saturate(.88); }

  /* 品書き（メニュー）：一枚の扉のように */
  html[data-era="now"] .mx-nav{
    background:
      radial-gradient(100% 60% at 50% 0%, rgba(201,173,130,.10), transparent 62%),
      rgba(9,7,10,.975) !important;
    gap:0 !important; justify-content:center !important;
  }
  html[data-era="now"] .mx-nav a{
    font-family:var(--mx-jp) !important; font-size:18px !important; letter-spacing:.14em !important;
    color:rgba(243,240,234,.86) !important; padding:17px 30px !important; width:min(320px,74vw); text-align:center;
    border-bottom:1px solid rgba(243,240,234,.08);
  }
  html[data-era="now"] .mx-nav a:last-child{ border-bottom:0; }
  html[data-era="now"] .mx-nav a::after{ display:none; }
  html[data-era="now"] .mx-nav.is-open a{ animation:mx-menu-in .6s cubic-bezier(.16,.84,.24,1) both; }
  html[data-era="now"] .mx-nav.is-open a:nth-child(1){ animation-delay:.05s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(2){ animation-delay:.10s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(3){ animation-delay:.15s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(4){ animation-delay:.20s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(5){ animation-delay:.25s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(6){ animation-delay:.30s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(7){ animation-delay:.35s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(8){ animation-delay:.40s }
  html[data-era="now"] .mx-nav.is-open a:nth-child(9){ animation-delay:.45s }
  @keyframes mx-menu-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}

@media (max-width:520px){
  html[data-era="now"] .mx-in,html[data-era="now"] .mx-in-n{ padding:0 20px; }
  html[data-era="now"] .mx-h1{ font-size:clamp(36px,13vw,54px); }
  html[data-era="now"] .mx-nav a{ font-size:17px !important; padding:15px 24px !important; }
}

/* ── 入口と退店の画面 ─────────────────────────────────── */
html[data-era="now"] .door-lead,
html[data-mx="1"] #tw-leave-ov .tw-bye-t{
  text-wrap:pretty; word-break:auto-phrase;
}
@media (max-width:860px){
  html[data-mx="1"] #tw-leave-ov .tw-bye-t{
    font-size:clamp(20px,5.6vw,26px) !important; line-height:1.85 !important; letter-spacing:.05em !important;
    padding:0 24px !important;
  }
  html[data-mx="1"] #tw-leave-ov .tw-bye-a{ font-size:12.5px !important; letter-spacing:.18em !important; padding:15px 32px !important; }
}

/* ── 二度目の仕上げ ───────────────────────────────────── */

/* 天の帯は、下がるほど薄く小さく（本文を隠さないように） */
@media (max-width:860px){
  html[data-era="now"] .mx-head.is-stuck{ padding:10px 20px !important; }
  html[data-era="now"] .mx-head.is-stuck .mx-brand{ font-size:15px !important; }
  html[data-era="now"] .mx-head.is-stuck .mx-brand small{ display:none !important; }
  html[data-era="now"] .mx-head.is-stuck .mx-burger{ transform:scale(.86); }
}

/* 時間旅行と言語は、そっと端に。触れたときだけはっきり出ます */
@media (max-width:860px){
  html[data-mx="1"] #timewarp.tw-closed{
    width:auto !important; padding:0 !important; border-radius:999px !important;
    background:rgba(9,7,10,.52) !important; border:1px solid rgba(201,173,130,.26) !important;
    backdrop-filter:blur(12px) saturate(1.1); opacity:.62; transition:opacity .4s ease;
  }
  html[data-mx="1"] #timewarp.tw-closed:hover,
  html[data-mx="1"] #timewarp.tw-closed:focus-within{ opacity:1; }
  html[data-mx="1"] #timewarp.tw-closed .tw-t{
    writing-mode:horizontal-tb !important; font-size:0 !important; letter-spacing:0 !important;
    padding:0 !important; margin:0 !important; display:block !important; line-height:0 !important;
  }
  html[data-mx="1"] #timewarp.tw-closed .tw-t::first-letter{ font-size:15px !important; line-height:1 !important; }
  html[data-mx="1"] #timewarp.tw-closed .tw-toggle{
    width:38px !important; height:38px !important; padding:0 !important; font-size:15px !important;
    line-height:38px !important; border:0 !important; background:transparent !important; color:rgba(243,240,234,.7) !important;
  }
  html[data-era="now"] #lang-bar.lb-quiet{ opacity:.62; transition:opacity .4s ease; }
  html[data-era="now"] #lang-bar.lb-quiet:hover,
  html[data-era="now"] #lang-bar.lb-quiet:focus-within{ opacity:1; }
  html[data-era="now"] #lang-bar.lb-quiet button{ padding:6px 8px !important; font-size:9.5px !important; }
}

/* 章の見出しが帯に隠れないように、少しだけ余白を足します */
@media (max-width:860px){
  html[data-era="now"] .mx-sec{ padding:74px 0 !important; }
  html[data-era="now"] .mx-sec .mx-h2:first-child,
  html[data-era="now"] .mx-sec .mx-kicker:first-child{ scroll-margin-top:96px; }
}

/* 表紙の文字は、写真がどれでも読めるように */
@media (max-width:860px){
  html[data-era="now"] .mx-hero .mx-h1{ text-shadow:0 2px 30px rgba(0,0,0,.85), 0 0 90px rgba(0,0,0,.6); }
  html[data-era="now"] .mx-hero .mx-kicker,
  html[data-era="now"] .mx-hero-sub{ text-shadow:0 1px 18px rgba(0,0,0,.9); color:rgba(243,240,234,.82) !important; }
  html[data-era="now"] .mx-scroll{ bottom:76px; }
  html[data-era="now"] .mx-scroll span{ font-size:9px; letter-spacing:.26em; }
}

/* 一覧の横流しは、端に金の霞をかけて「続き」を示します */
html[data-era="now"] .mx-rail{ position:relative; }
@media (max-width:860px){
  html[data-era="now"] .mx-rail{ padding-left:24px; padding-right:24px; }
  html[data-era="now"] .mx-rail > *{ flex-basis:min(66vw,240px); }
}

/* ── 入口の一枚 ───────────────────────────────────────── */
html[data-era="now"] #modern-entrance .me-jp{
  font-size:clamp(34px,7vw,54px) !important; letter-spacing:.14em !important; line-height:1.2 !important;
}
html[data-era="now"] #modern-entrance .me-en{ font-size:11px !important; color:rgba(201,173,130,.66) !important; }
html[data-era="now"] #modern-entrance .me-rule{
  width:64px !important; height:1px !important; margin:26px auto !important;
  background:linear-gradient(90deg, rgba(201,173,130,0), var(--mx-gold), rgba(201,173,130,0)) !important;
}
html[data-era="now"] #modern-entrance .me-sub{
  font-family:var(--mx-jp) !important; font-size:16px !important; line-height:2.0 !important;
  letter-spacing:.05em !important; color:rgba(243,240,234,.80) !important;
  max-width:20em; margin-left:auto !important; margin-right:auto !important;
  text-wrap:pretty; word-break:auto-phrase;
}
html[data-era="now"] #modern-entrance .me-btn{
  border-color:var(--mx-hair) !important; letter-spacing:.26em !important;
}
html[data-era="now"] #modern-entrance .me-btn:hover{ background:var(--mx-gold) !important; color:#120d0b !important; }
html[data-era="now"] #age-note{ font-size:12.5px !important; line-height:1.95 !important; letter-spacing:.03em !important; max-width:26em; margin-left:auto; margin-right:auto; }

/* 入口でも、上の道具は控えめに */
html[data-era="now"] #timewarp.tw-closed{
  background:rgba(9,7,10,.52) !important; border:1px solid rgba(201,173,130,.26) !important;
  color:rgba(243,240,234,.72) !important; box-shadow:none !important;
}
html[data-era="now"] #timewarp.tw-closed .tw-t,
html[data-era="now"] #timewarp.tw-closed .tw-toggle{ color:rgba(243,240,234,.72) !important; }

@media (max-width:860px){
  html[data-era="now"] #modern-entrance .me-jp{ font-size:clamp(32px,9vw,44px) !important; }
  html[data-era="now"] #modern-entrance .me-sub{ font-size:16px !important; padding:0 26px; }
  html[data-era="now"] #modern-entrance .me-btn{ padding:16px 34px !important; font-size:12px !important; }
  html[data-era="now"] #age-note{ font-size:12px !important; padding:0 26px; }
  /* 入口でも小さく丸く */
  html[data-era="now"] #timewarp.tw-closed{
    width:auto !important; padding:0 !important; border-radius:999px !important; opacity:.62;
  }
  html[data-era="now"] #timewarp.tw-closed .tw-t{
    writing-mode:horizontal-tb !important; font-size:0 !important; letter-spacing:0 !important;
    padding:0 !important; margin:0 !important; display:block !important; line-height:0 !important;
  }
  html[data-era="now"] #timewarp.tw-closed .tw-t::first-letter{ font-size:15px !important; line-height:1 !important; }
  html[data-era="now"] #timewarp.tw-closed .tw-toggle{
    width:38px !important; height:38px !important; padding:0 !important; font-size:15px !important;
    line-height:38px !important; border:0 !important; background:transparent !important;
  }
}

/* ── 三度目の仕上げ ───────────────────────────────────── */

/* すべて明朝に。欧文は Cormorant、和文は しっぽり明朝 */
html[data-era="now"]{
  --mx-sans:'Cormorant Garamond','Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho",serif;
}
html[data-era="now"] body,
html[data-era="now"] button,
html[data-era="now"] input,
html[data-era="now"] select,
html[data-era="now"] textarea,
html[data-era="now"] .mx-kicker,
html[data-era="now"] .mx-cap,
html[data-era="now"] .mx-note,
html[data-era="now"] .mx-label,
html[data-era="now"] .mx-btn,
html[data-era="now"] .mx-nav a,
html[data-era="now"] .mx-facts dt,
html[data-era="now"] .mx-foot h4,
html[data-era="now"] .mx-foot-end,
html[data-era="now"] .mx-scroll span,
html[data-era="now"] .mx-brand small,
html[data-era="now"] .mx-table th,
html[data-mx="1"] #timewarp,
html[data-mx="1"] #timewarp *,
html[data-era="now"] #timewarp,
html[data-era="now"] #timewarp *,
html[data-era="now"] #lang-bar button,
html[data-era="now"] #modern-entrance .me-en,
html[data-era="now"] #modern-entrance .me-btn,
html[data-era="now"] #age-note{
  font-family:'Cormorant Garamond','Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho",serif !important;
}
/* 明朝は線が細いので、小さな札は少しだけ太らせます */
html[data-era="now"] .mx-kicker,
html[data-era="now"] .mx-facts dt,
html[data-era="now"] .mx-foot h4,
html[data-era="now"] .mx-label,
html[data-era="now"] .mx-table th{ font-weight:600; }
html[data-era="now"] .mx-nav a{ font-size:13px; letter-spacing:.16em; }
html[data-era="now"] .mx-btn{ font-size:13px; letter-spacing:.2em; }
html[data-era="now"] #lang-bar.lb-quiet button{ font-size:11.5px !important; letter-spacing:.16em !important; }

/* ── 文字が、めくれるように現れます ───────────────────── */
html[data-era="now"] .mx-fade{
  opacity:0; transform:translate3d(0,16px,0); filter:blur(4px);
  transition:opacity .95s cubic-bezier(.16,.84,.24,1), transform .95s cubic-bezier(.16,.84,.24,1), filter .95s ease;
  will-change:opacity, transform;
}
html[data-era="now"] .mx-fade.is-in{ opacity:1; transform:none; filter:none; }
/* 並んだものは、ほんの少しずつ遅らせます */
html[data-era="now"] li.mx-fade:nth-child(2){ transition-delay:.05s }
html[data-era="now"] li.mx-fade:nth-child(3){ transition-delay:.10s }
html[data-era="now"] li.mx-fade:nth-child(4){ transition-delay:.15s }
html[data-era="now"] li.mx-fade:nth-child(5){ transition-delay:.20s }
html[data-era="now"] li.mx-fade:nth-child(n+6){ transition-delay:.25s }
@media (prefers-reduced-motion:reduce){
  html[data-era="now"] .mx-fade{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ── 品書きの下に開く、細かなお品書き ─────────────────── */
html[data-era="now"] .mx-navitem{ position:relative; display:inline-flex; align-items:center; }
html[data-era="now"] .mx-navitem > a{ display:inline-block; }
html[data-era="now"] .mx-navitem.has-sub > a::before{
  content:""; position:absolute; left:50%; bottom:-2px; width:3px; height:3px; margin-left:-1.5px;
  background:var(--mx-gold); border-radius:50%; opacity:0; transition:opacity .4s ease;
}
html[data-era="now"] .mx-navitem.has-sub:hover > a::before{ opacity:.9; }

html[data-era="now"] .mx-sub{
  position:absolute; top:100%; left:50%; z-index:50;
  transform:translateX(-50%) translateY(10px); opacity:0; pointer-events:none;
  transition:opacity .42s ease, transform .42s cubic-bezier(.16,.84,.24,1);
  padding-top:16px;
}
html[data-era="now"] .mx-navitem:hover .mx-sub,
html[data-era="now"] .mx-navitem:focus-within .mx-sub{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
html[data-era="now"] .mx-sub-in{
  display:block; min-width:230px; padding:14px 0;
  background:rgba(9,7,10,.90); backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--mx-hair); border-radius:2px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
html[data-era="now"] .mx-sub-in::before{
  content:""; display:block; width:34px; height:1px; margin:0 auto 12px;
  background:linear-gradient(90deg, rgba(201,173,130,0), var(--mx-gold), rgba(201,173,130,0));
}
html[data-era="now"] .mx-sub-in a{
  display:block; padding:9px 24px; white-space:nowrap;
  font-size:13.5px; letter-spacing:.09em; line-height:1.6;
  color:rgba(243,240,234,.72) !important; transition:color .35s ease, background .35s ease;
}
html[data-era="now"] .mx-sub-in a:hover{ color:var(--mx-paper) !important; background:rgba(201,173,130,.10); }
html[data-era="now"] .mx-sub-in a:last-child{
  margin-top:8px; padding-top:14px; border-top:1px solid rgba(243,240,234,.10);
  color:rgba(201,173,130,.86) !important; font-size:12.5px; letter-spacing:.14em;
}

/* 小さな画面では、扉の品書きに畳みます */
@media (max-width:860px){
  html[data-era="now"] .mx-sub{ display:none !important; }
  html[data-era="now"] .mx-navitem{ display:block; width:min(320px,74vw); }
  html[data-era="now"] .mx-navitem > a{ display:block; }
}

/* ── 四度目：数字と品書きの詰め ───────────────────────── */

/* 明朝の欧文は旧式数字になるので、住所・電話・値段は揃った高さの数字に */
html[data-era="now"] body,
html[data-era="now"] .mx-note,
html[data-era="now"] .mx-p,
html[data-era="now"] .mx-lead,
html[data-era="now"] .mx-facts dd,
html[data-era="now"] .mx-table td,
html[data-era="now"] .mx-num,
html[data-era="now"] .mx-foot,
html[data-era="now"] .mx-legacy{
  font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:"palt" 1, "lnum" 1;
}

/* 品書きは一行に収めます */
html[data-era="now"] .mx-nav{ gap:clamp(9px,1.4vw,22px); flex-wrap:nowrap; }
html[data-era="now"] .mx-nav a{ font-size:12.5px; letter-spacing:.10em; }
@media (min-width:1100px){
  html[data-era="now"] .mx-head{ padding-left:200px; padding-right:196px; }
  html[data-era="now"] .mx-head.is-stuck{ padding-left:200px; padding-right:196px; }
}
@media (min-width:1400px){
  html[data-era="now"] .mx-nav a{ font-size:13px; letter-spacing:.13em; }
}
@media (max-width:1099px){
  html[data-era="now"] .mx-nav{ flex-wrap:wrap; }
}

/* ── 五度目：時間旅行と、年齢のご確認 ─────────────────── */

/* 時間旅行の「〜年代」を、はっきり読めるように（現代の画面） */
html[data-era="now"] #timewarp{
  width:196px !important; padding:12px 10px !important;
  background:rgba(9,7,10,.80) !important; border:1px solid var(--mx-hair) !important;
  border-radius:2px !important; box-shadow:0 30px 70px -34px rgba(0,0,0,.9) !important;
  backdrop-filter:blur(16px) saturate(1.1);
}
html[data-era="now"] #timewarp .tw-t{
  font-size:11px !important; letter-spacing:.22em !important; padding:0 0 10px !important;
  color:rgba(201,173,130,.78) !important; border-bottom:1px solid rgba(243,240,234,.10);
  margin-bottom:8px !important;
}
html[data-era="now"] #timewarp button{
  font-size:14px !important; letter-spacing:.06em !important;
  padding:11px 8px !important; margin:2px 0 !important; line-height:1.5 !important;
  color:rgba(243,240,234,.72) !important; background:transparent !important;
  border:0 !important; border-radius:1px !important;
  transition:color .35s ease, background .35s ease;
}
html[data-era="now"] #timewarp button:hover{ color:var(--mx-paper) !important; background:rgba(201,173,130,.10) !important; }
html[data-era="now"] #timewarp button.on{
  color:#120d0b !important; background:var(--mx-gold) !important; font-weight:600 !important;
}
html[data-era="now"] #timewarp .tw-toggle{
  display:block !important; right:6px !important; top:6px !important;
  width:22px !important; height:22px !important; font-size:14px !important;
  color:rgba(243,240,234,.5) !important; background:transparent !important;
}
/* 畳んでいるときは、これまでどおり小さな丸で */
html[data-era="now"] #timewarp.tw-closed{
  width:auto !important; padding:0 !important; border-radius:999px !important;
}

/* ── 年齢のご確認（すべての時代で使う共通の見た目） ───── */
.age-gate{ margin:26px auto 10px; max-width:420px; text-align:center; position:relative; z-index:3; }
.ag-head{ font-size:15px; letter-spacing:.08em; margin-bottom:8px; }
.ag-lead{ font-size:13px; line-height:1.9; opacity:.8; margin:0 0 16px; }
.ag-row{ display:flex; justify-content:center; align-items:flex-end; gap:10px; }
.ag-f{ display:inline-flex; align-items:baseline; gap:5px; }
.ag-f input{
  width:88px; text-align:center; font:inherit; font-size:20px; letter-spacing:.08em;
  padding:9px 6px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit;
  outline:none; border-radius:0;
}
.ag-f.ag-s input{ width:58px; }
.ag-f span{ font-size:13px; opacity:.75; }
.ag-age{ min-height:22px; margin:14px 0 4px; font-size:13.5px; letter-spacing:.06em; opacity:.9; }
.ag-btn{
  margin-top:6px; padding:13px 34px; font:inherit; font-size:14px; letter-spacing:.14em;
  cursor:pointer; background:transparent; color:inherit; border:1px solid currentColor; border-radius:2px;
}
.ag-msg{ margin-top:10px; font-size:12.5px; opacity:.85; }

/* 現代のとき */
html[data-era="now"] .age-gate{ max-width:440px; }
html[data-era="now"] .ag-head{ font-family:var(--mx-jp); font-size:16px; color:var(--mx-paper); letter-spacing:.1em; }
html[data-era="now"] .ag-lead{ color:rgba(243,240,234,.68); font-size:13.5px; }
html[data-era="now"] .ag-f input{
  border-bottom-color:var(--mx-hair); color:var(--mx-paper);
  font-variant-numeric:lining-nums; font-size:22px;
}
html[data-era="now"] .ag-f input:focus{ border-bottom-color:var(--mx-gold); }
html[data-era="now"] .ag-f span{ color:rgba(201,173,130,.72); }
html[data-era="now"] .ag-age{ color:rgba(243,240,234,.82); }
html[data-era="now"] .ag-btn{
  border-color:var(--mx-hair); color:var(--mx-paper); letter-spacing:.22em; font-size:12.5px; padding:15px 38px;
  transition:background .45s ease, color .45s ease, border-color .45s ease;
}
html[data-era="now"] .ag-btn:hover{ background:var(--mx-gold); color:#120d0b; border-color:var(--mx-gold); }
html[data-era="now"] .ag-msg{ color:#e0a08a; }

@media (max-width:520px){
  .ag-row{ gap:6px; }
  .ag-f input{ width:74px; font-size:19px; }
  .ag-f.ag-s input{ width:50px; }
  .age-gate{ padding:0 20px; }
}

/* ── バーチャル店舗 ───────────────────────────────────── */
.vs{ position:fixed; inset:0; background:#0a0808; overflow:hidden; z-index:1; }
.vs-canvas{ position:absolute; inset:0; }
.vs-canvas canvas{ display:block; width:100%; height:100%; touch-action:none; }

.vs-gate{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 60% at 50% 45%, rgba(20,14,11,.86), rgba(6,5,7,.96));
  backdrop-filter:blur(6px); text-align:center; padding:24px;
}
.vs-gate-in{ max-width:520px; }
.vs-kick{ font-size:10.5px; letter-spacing:.34em; color:rgba(201,173,130,.7); margin-bottom:18px; }
.vs-gate h1{ font-size:clamp(38px,7vw,64px); font-weight:300; letter-spacing:.1em; margin:0 0 14px; color:#f3f0ea; }
.vs-gate h2{ font-size:clamp(20px,3.6vw,28px); font-weight:400; letter-spacing:.08em; margin:0 0 26px; color:#f3f0ea; line-height:1.8; }
.vs-gate p{ font-size:13.5px; line-height:2; color:rgba(243,240,234,.62); margin:0 0 26px; }
.vs-rule{ width:64px; height:1px; margin:0 auto 26px;
  background:linear-gradient(90deg, rgba(201,173,130,0), #c9ad82, rgba(201,173,130,0)); }

.vs-btn{
  display:inline-block; padding:15px 34px; font:inherit; font-size:12.5px; letter-spacing:.2em;
  color:#f3f0ea; background:transparent; border:1px solid rgba(201,173,130,.42); border-radius:2px;
  cursor:pointer; text-decoration:none; transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.vs-btn:hover{ background:#c9ad82; color:#120d0b; border-color:#c9ad82; }
.vs-btn[disabled]{ opacity:.5; cursor:default; }
.vs-primary{ border-color:rgba(201,173,130,.8); }
.vs-sm{ padding:10px 20px; font-size:11.5px; letter-spacing:.14em; margin-top:10px; }
.vs-back{ display:block; margin-top:22px; font-size:12px; letter-spacing:.14em;
  color:rgba(243,240,234,.5); background:transparent; border:0; cursor:pointer; text-decoration:none; }
.vs-back:hover{ color:#f3f0ea; }

.vs-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(243,240,234,.6); font-size:13px; letter-spacing:.16em; z-index:15; }

.vs-cross{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:rgba(243,240,234,.55); box-shadow:0 0 8px rgba(0,0,0,.8); z-index:10; pointer-events:none; }
.vs-hint{ position:absolute; left:50%; top:calc(50% + 26px); transform:translateX(-50%); z-index:10;
  font-size:12px; letter-spacing:.16em; color:#f3f0ea; background:rgba(9,7,10,.62);
  border:1px solid rgba(201,173,130,.34); border-radius:2px; padding:7px 16px; pointer-events:none; white-space:nowrap; }
.vs-guide{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:10;
  font-size:11px; letter-spacing:.14em; color:rgba(243,240,234,.42); pointer-events:none; text-align:center; padding:0 16px; }

.vs-snd{
  position:absolute; right:18px; top:18px; z-index:12; font:inherit; font-size:11px; letter-spacing:.14em;
  color:rgba(243,240,234,.58); background:rgba(9,7,10,.5); border:1px solid rgba(201,173,130,.28);
  border-radius:2px; padding:8px 14px; cursor:pointer;
}
.vs-snd:hover{ color:#f3f0ea; border-color:rgba(201,173,130,.6); }

.vs-panel{
  position:absolute; right:24px; top:50%; transform:translateY(-50%); z-index:30;
  width:min(420px,92vw); max-height:86vh; overflow:auto; padding:26px;
  background:rgba(9,7,10,.93); backdrop-filter:blur(20px) saturate(1.15);
  border:1px solid rgba(201,173,130,.34); border-radius:3px;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.95); color:#f3f0ea;
}
.vs-small{ width:min(360px,92vw); }
.vs-clerk{ font-size:15px; line-height:1.95; letter-spacing:.05em; margin-bottom:16px; }
.vs-panel textarea, .vs-panel input{
  width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; line-height:1.85;
  color:#f3f0ea; background:rgba(243,240,234,.05); border:1px solid rgba(243,240,234,.16);
  border-radius:2px; padding:12px; outline:none; resize:vertical;
}
.vs-panel textarea:focus, .vs-panel input:focus{ border-color:#c9ad82; }
.vs-panel label{ display:block; font-size:10.5px; letter-spacing:.22em; color:rgba(201,173,130,.72); margin:16px 0 6px; }
.vs-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.vs-reply{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(243,240,234,.12);
  font-size:14px; line-height:2.0; letter-spacing:.04em; color:rgba(243,240,234,.86); white-space:pre-wrap; }
.vs-card{ margin-top:16px; padding:16px; border:1px solid rgba(243,240,234,.12); border-radius:2px;
  background:rgba(243,240,234,.03); }
.vs-card-n{ font-size:14.5px; line-height:1.75; letter-spacing:.04em; }
.vs-card-p{ margin-top:6px; font-size:13px; color:#c9ad82; font-variant-numeric:lining-nums; }
.vs-card-w{ margin-top:8px; font-size:13px; line-height:1.9; color:rgba(243,240,234,.66); }
.vs-ask{ background:transparent; border-style:dashed; }
.vs-form{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(243,240,234,.12); }
.vs-form .vs-btn{ margin-top:16px; }
.vs-msg{ margin-top:14px; font-size:12.5px; letter-spacing:.05em; color:#e0c39a; }

@media (max-width:860px){
  .vs-panel{ right:0; left:0; top:auto; bottom:0; transform:none; width:auto; max-height:72vh;
    border-radius:3px 3px 0 0; border-left:0; border-right:0; border-bottom:0; padding:20px; }
  .vs-guide{ bottom:12px; font-size:10.5px; }
}

/* ── 六度目：時間旅行の形・お問い合わせの同時登録 ─────── */

/* 畳んだ時間旅行は、言語の切替と同じ角のある形に */
html[data-era="now"] #timewarp.tw-closed,
html[data-mx="1"] #timewarp.tw-closed{
  border-radius:2px !important;
}
@media (max-width:860px){
  html[data-era="now"] #timewarp.tw-closed,
  html[data-mx="1"] #timewarp.tw-closed{ border-radius:2px !important; }
}

/* お問い合わせ：メルマガも同時に */
.ct-nl{ display:flex; align-items:flex-start; gap:9px; margin:18px 0 4px; cursor:pointer; line-height:1.8; }
.ct-nl input{ margin-top:.35em; width:16px; height:16px; flex:0 0 auto; accent-color:#c9ad82; cursor:pointer; }
.ct-nl span{ font-size:13.5px; letter-spacing:.03em; }
html[data-era="now"] .ct-nl span{ color:rgba(243,240,234,.76); font-size:14px; }

/* ── バーチャル店舗の操作まわり ───────────────────────── */
.vs-cap{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  margin-right:5px; padding:0 5px; font-size:10.5px; letter-spacing:0; line-height:1;
  color:#f3f0ea; background:rgba(243,240,234,.10); border:1px solid rgba(201,173,130,.42); border-radius:3px;
}
.vs-keys{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:11;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; max-width:min(760px,94vw);
  padding:11px 20px; font-size:11.5px; letter-spacing:.12em; color:rgba(243,240,234,.82);
  background:rgba(9,7,10,.62); border:1px solid rgba(201,173,130,.24); border-radius:3px;
  pointer-events:none; text-align:center;
}
.vs-keys > span{ display:inline-flex; align-items:center; white-space:nowrap; }
.vs-keys .vs-cap{ margin-right:4px; }

.vs-call{
  position:absolute; left:50%; bottom:74px; transform:translateX(-50%); z-index:12;
  display:inline-flex; align-items:center; font:inherit; font-size:12.5px; letter-spacing:.16em;
  color:#f3f0ea; background:rgba(9,7,10,.72); border:1px solid rgba(201,173,130,.55);
  border-radius:3px; padding:11px 22px; cursor:pointer; white-space:nowrap;
}
.vs-call:hover{ background:#c9ad82; color:#120d0b; }

/* 十字キー */
.vs-dpad{
  position:absolute; left:16px; bottom:22px; z-index:13; width:132px; height:132px;
  touch-action:none; user-select:none;
}
.vs-dpad button, .vs-dpad .d-c{
  position:absolute; width:44px; height:44px; padding:0; border:1px solid rgba(201,173,130,.34);
  background:rgba(9,7,10,.62); border-radius:4px;
}
.vs-dpad button:active{ background:rgba(201,173,130,.5); }
.vs-dpad .d-u{ left:44px; top:0; }
.vs-dpad .d-l{ left:0; top:44px; }
.vs-dpad .d-r{ left:88px; top:44px; }
.vs-dpad .d-d{ left:44px; top:88px; }
.vs-dpad .d-c{ left:44px; top:44px; border-color:rgba(201,173,130,.2); }

/* 丸バツ */
.vs-ox{ position:absolute; left:160px; bottom:34px; z-index:13; display:flex; flex-direction:column; gap:10px; }
.vs-ox button{
  display:flex; align-items:center; gap:8px; font:inherit; font-size:16px; line-height:1;
  color:#f3f0ea; background:rgba(9,7,10,.62); border:1px solid rgba(201,173,130,.42);
  border-radius:22px; padding:9px 14px; cursor:pointer; touch-action:none;
}
.vs-ox button:active{ background:rgba(201,173,130,.5); }
.vs-ox i{ font-style:normal; font-size:10.5px; letter-spacing:.12em; opacity:.82; }

/* 見回しの棒 */
.vs-stick{
  position:absolute; right:20px; bottom:24px; z-index:13; width:118px; height:118px;
  border:1px solid rgba(201,173,130,.30); border-radius:50%; background:rgba(9,7,10,.45);
  touch-action:none; user-select:none;
}
.vs-knob{
  position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; background:rgba(201,173,130,.34); border:1px solid rgba(201,173,130,.5);
  pointer-events:none;
}

@media (max-width: 620px){
  .vs-call{ bottom:auto; top:64px; font-size:11.5px; padding:9px 16px; }
  .vs-dpad{ width:114px; height:114px; left:12px; bottom:16px; }
  .vs-dpad button, .vs-dpad .d-c{ width:38px; height:38px; }
  .vs-dpad .d-u{ left:38px; top:0; } .vs-dpad .d-l{ left:0; top:38px; }
  .vs-dpad .d-r{ left:76px; top:38px; } .vs-dpad .d-d{ left:38px; top:76px; }
  .vs-dpad .d-c{ left:38px; top:38px; }
  .vs-ox{ left:134px; bottom:26px; }
  .vs-stick{ width:100px; height:100px; right:14px; bottom:18px; }
}

/* ── バーチャル店舗：読みやすさと、携帯の操作 ───────────── */
.vs-gate p{ color:rgba(243,240,234,.86); font-size:14.5px; line-height:2.05; }
.vs-gate .vs-kick{ color:rgba(201,173,130,.92); }
a.vs-back, .vs-back{ color:rgba(243,240,234,.78) !important; text-decoration:none; }
a.vs-back:hover, .vs-back:hover{ color:#f3f0ea !important; }
.vs-panel label{ font-size:12px; letter-spacing:.14em; color:rgba(243,240,234,.88); margin:18px 0 7px; }
.vs-card-w{ color:rgba(243,240,234,.82); }
.vs-guide{ color:rgba(243,240,234,.72); }

.vs-shot{
  display:block; width:100%; max-height:210px; object-fit:cover; margin:0 0 12px;
  border:1px solid rgba(201,173,130,.28); border-radius:2px; background:rgba(255,255,255,.04);
}
.vs-buying{
  font-size:13.5px; line-height:1.8; color:#c9ad82; padding-bottom:10px;
  border-bottom:1px solid rgba(201,173,130,.28);
}
.vs-ok{ font-size:14px; line-height:1.95; color:#c9ad82; }
.vs-nl{
  display:flex !important; align-items:flex-start; gap:10px; margin:16px 0 0 !important;
  font-size:12.5px !important; letter-spacing:.06em !important; line-height:1.7;
  color:rgba(243,240,234,.88) !important; cursor:pointer;
}
.vs-nl input{ width:16px !important; height:16px; margin-top:2px; accent-color:#c9ad82; flex:0 0 auto; }

/* 携帯：手に取るボタンだけを、親指の届くところに */
.vs-take{
  position:absolute; right:18px; bottom:96px; z-index:13; font:inherit; font-size:12.5px;
  letter-spacing:.14em; color:#f3f0ea; background:rgba(9,7,10,.72);
  border:1px solid rgba(201,173,130,.5); border-radius:26px; padding:14px 22px; cursor:pointer;
}
.vs-take:active{ background:rgba(201,173,130,.5); }

/* 申し込み欄の項目名を、はっきりと */
.vs-panel label, .vs-form label{
  color:#f3f0ea !important; font-size:13px !important; letter-spacing:.08em !important;
  opacity:1 !important; margin:18px 0 8px !important;
}
.vs-nl, .vs-nl span{ color:#f3f0ea !important; font-size:13px !important; opacity:1 !important; }
.vs-panel input::placeholder, .vs-panel textarea::placeholder{ color:rgba(243,240,234,.42); }