/* 左上の Rasterix で開くメニュー（menu.js）。Rasterix のページと日本文化体験のページで共通 */
.menu { --mt-text:#111; --mt-muted:#6b6b6b; }
.menu-caret { display:inline-block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
              transform:translateY(-.3em) rotate(45deg); margin-left:.4em; transition:transform .25s ease; }
[data-menu][aria-expanded="true"] .menu-caret { transform:translateY(-.08em) rotate(-135deg); }

/* すりガラスの板：左上の角から広がる。後ろの写真や網点がぼけて透ける */
.menu-panel { position:fixed; top:0; left:0; z-index:30; width:min(360px, 100vw); height:100vh; overflow:auto;
  padding:84px 28px 26px 24px; color:var(--mt-text);
  background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  border-right:1px solid rgba(0,0,0,.08);
  clip-path:inset(0 100% 100% 0); visibility:hidden; transition:clip-path .45s cubic-bezier(.7,0,.2,1), visibility 0s .45s; }
.menu.open .menu-panel { clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .45s cubic-bezier(.7,0,.2,1); }

/* 押す側の Rasterix を板の上に出す。Rasterix のページはヘッダーごと上げ、横のナビは隠す */
body.menu-open [data-menu] { color:var(--mt-text, #111) !important; z-index:31; }
body.menu-open .site-header { z-index:31; }
body.menu-open .site-header nav { visibility:hidden; }

.mt, .mt ul { list-style:none; margin:0; padding:0; }
.mt a { position:relative; display:block; text-decoration:none; border:0; color:inherit; padding:7px 0;
  font-family:"Adobe Garamond Pro", "EB Garamond", Garamond, serif; font-style:italic; font-size:22px; line-height:1.25;
  -webkit-text-stroke:0; opacity:0; transform:translateX(-8px); transition:opacity .35s ease, transform .35s ease; }
.mt ul a { font-size:17px; }
.mt ul ul a { font-size:16px; }
.menu.open .mt a, .menu.open .mt-label { opacity:1; transform:none; transition-delay:calc(.12s + var(--i) * .04s); }
.mt a:hover { transform:translateX(4px); }
.mt .ja { display:block; font-style:normal; font-size:11px; letter-spacing:.14em; margin-top:3px; color:var(--mt-muted); }
.mt .no { font-style:normal; font-size:10px; letter-spacing:.14em; margin-right:.9em; vertical-align:2px; color:var(--mt-muted); }
.mt-label { opacity:0; transition:opacity .35s; text-transform:uppercase; font-size:9.5px; letter-spacing:.24em; color:var(--mt-muted); padding:10px 0 2px; }
.mt a[aria-current="page"]::after { content:"HERE"; position:absolute; right:0; top:13px; font-style:normal; font-size:9px; letter-spacing:.24em; opacity:.55; }

/* 木の線：細い罫で枝を描く */
.mt ul { margin-left:2px; }
.mt ul > li { position:relative; padding-left:20px; }
.mt ul > li::before { content:""; position:absolute; left:0; top:-2px; height:22px; width:12px;
  border-left:1px solid currentColor; border-bottom:1px solid currentColor; opacity:.35; }
.mt ul > li:not(:last-child)::after { content:""; position:absolute; left:0; top:20px; bottom:0; border-left:1px solid currentColor; opacity:.35; }
.mt ul > li.mt-label::before { display:none; }

@media (prefers-reduced-motion:reduce) {
  .menu-panel, .mt a, .mt-label, .menu-caret { transition:none !important; }
}