/* TOMO-Z header v1.0.0 / XWRITE 4.0.9 public markup */
/* Replace the old “TOMO-Z ヘッダーメニュー” CSS with this file. */
:is(.header,.header-fix,.gnav-fix) .tmz-menu-link {
  --tmz-red:#8b3530; --tmz-gold:#b5873c;
  position:relative; opacity:1; text-decoration:none;
  transition:color .2s,background-color .2s,box-shadow .2s;
}
:is(.header,.header-fix,.gnav-fix) .tmz-menu-link > .menu-item-title {
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; line-height:1.5; white-space:nowrap;
}
:is(.header,.header-fix,.gnav-fix) .tmz-icon {
  display:inline-block; flex:0 0 auto; width:28px; height:28px;
  margin:0; padding:0; vertical-align:middle; overflow:visible;
  transform-origin:50% 70%;
}
:is(.header,.header-fix,.gnav-fix) .tmz-menu-link .material-symbols-outlined { display:none; }
:is(.header,.header-fix,.gnav-fix) .tmz-menu-link:focus-visible,
:is(.gnav-fix,.header-fix) .tmz-toggle:focus-visible {
  outline:3px solid #98682f; outline-offset:3px; border-radius:10px;
}
.tmz-icon :is(.tmz-drum,.tmz-person,.tmz-cymbal,.tmz-note,.tmz-letter,.tmz-stick-a,.tmz-stick-b) {
  transform-box:fill-box; transform-origin:center;
}
@keyframes tmz-bounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-4px) rotate(-5deg)} 58%{transform:translateY(0) rotate(3deg)} 80%{transform:translateY(-1.5px)} }
@keyframes tmz-tap { 0%,100%{transform:scale(1)} 25%{transform:scale(1.12,.88)} 55%{transform:scale(.96,1.06)} }
@keyframes tmz-wave { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-15deg)} 65%{transform:rotate(12deg)} }
@keyframes tmz-cymbal { 0%,100%{transform:rotate(0)} 20%{transform:rotate(15deg)} 45%{transform:rotate(-12deg)} 70%{transform:rotate(6deg)} }
@keyframes tmz-note { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-4px) rotate(9deg)} }
@keyframes tmz-letter { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-5px) rotate(-6deg)} }
@media (hover:hover) and (pointer:fine) {
  :is(.header,.header-fix,.gnav-fix) .tmz-menu-link:hover {
    color:#8b3530; opacity:1; background-color:#faf3e5;
    box-shadow:inset 0 -2px #c8a46c;
  }
  .tmz-menu-link:hover .tmz-icon { animation:tmz-bounce .6s ease; }
  .tmz-menu-link:hover .tmz-drum { animation:tmz-tap .5s ease; }
  .tmz-menu-link:hover :is(.tmz-stick-a,.tmz-stick-b) { animation:tmz-wave .55s ease; }
  .tmz-menu-link:hover .tmz-cymbal { animation:tmz-cymbal .65s ease; }
  .tmz-menu-link:hover .tmz-note { animation:tmz-note .6s ease; }
  .tmz-menu-link:hover .tmz-letter { animation:tmz-letter .6s ease; }
  :is(.gnav-fix,.header-fix) .tmz-toggle:hover { background:#fff3d7; box-shadow:0 5px 14px #57453826; }
  .tmz-toggle:not(.tmz-is-open):hover .tmz-toggle-sticks { animation:tmz-wave .55s ease; transform-origin:20px 17px; }
}
.tmz-menu-link:focus-visible .tmz-icon { animation:tmz-bounce .6s ease; }
@media (min-width:992px) {
  :is(.header,.header-fix) .tmz-menu-link { border-radius:10px; }
  :is(.header,.header-fix) .gNavList > .menu-item > .tmz-menu-link { padding-left:10px; padding-right:10px; }
}
@media (max-width:991.98px) {
  /* Existing XWRITE checkbox owns opening and closing. */
  :is(.gnav-fix,.header-fix).tmz-enhanced :is(.drawer__open,.drawer__close).tmz-toggle {
    box-sizing:border-box; width:58px; height:58px;
    top:calc(7px + env(safe-area-inset-top,0px)); right:10px;
    align-items:center; justify-content:center; flex-direction:column; gap:1px;
    padding:3px 4px 4px; border:1px solid #d9c7a5; border-radius:16px;
    background:#fffbf1; color:#574538; cursor:pointer;
    box-shadow:0 3px 0 #d9c7a5,0 5px 12px #57453814;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:background-color .2s,box-shadow .2s;
  }
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle::after { content:none; display:none; }
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle .tmz-icon { width:36px; height:36px; margin:0; }
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle .tmz-toggle-caption {
    position:static; display:block; width:auto; height:auto; margin:0; padding:0;
    background:none; transform:none; font:700 9px/1.2 sans-serif; letter-spacing:.03em;
  }
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle .tmz-toggle-caption::before { content:none; }
  .tmz-toggle .tmz-toggle-drum { transition:opacity .2s; }
  .tmz-toggle .tmz-toggle-stick-l,.tmz-toggle .tmz-toggle-stick-r {
    transform-origin:20px 12px; transition:transform .3s ease;
  }
  .tmz-toggle.tmz-is-open .tmz-toggle-drum { opacity:.25; }
  .tmz-toggle.tmz-is-open .tmz-toggle-hit { opacity:0; }
  .tmz-toggle.tmz-is-open .tmz-toggle-stick-l { transform:translateY(7px) scale(1.3); }
  .tmz-toggle.tmz-is-open .tmz-toggle-stick-r { transform:translateY(7px) scale(1.3); }
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle:active { box-shadow:0 1px 0 #d9c7a5; }
  .tmz-menu-link:active .tmz-icon { transform:translateY(-2px) rotate(-5deg); }
  .gnav-fix.tmz-enhanced .nav__drawers {
    box-sizing:border-box; width:min(390px,100%); height:100%; height:100dvh;
    padding-top:calc(82px + env(safe-area-inset-top,0px));
    border-left:1px solid #dbc8a4; border-radius:24px 0 0 24px;
    background:linear-gradient(145deg,#fffcf5,#f3ecd9);
    box-shadow:-12px 0 38px #44332924;
  }
  .gnav-fix.tmz-enhanced .nav__drawers__inner {
    box-sizing:border-box; padding:8px 20px calc(32px + env(safe-area-inset-bottom,0px));
    overscroll-behavior:contain;
  }
  .gnav-fix.tmz-enhanced .nav__drawers__inner::before {
    content:'TOMO-Z  /  DRUM LESSON'; display:block;
    margin:0 0 22px; padding:0 0 18px; color:#71332e;
    font:800 14px/1.6 sans-serif; letter-spacing:.07em;
    border-bottom:3px double #cbb68c;
  }
  .gnav-fix.tmz-enhanced .nav__drawers__inner::after {
    content:'あなたのペースで、楽しいリズムを。'; display:block;
    margin-top:28px; padding:18px 0; color:#76644f;
    font-size:12px; line-height:1.8; text-align:center;
    border-top:3px double #cbb68c;
  }
  .gnav-fix.tmz-enhanced .gNavList { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0; padding:0; }
  .gnav-fix.tmz-enhanced .gNavList > .menu-item { margin:0; padding:0; }
  .gnav-fix.tmz-enhanced .gNavList > .menu-item > .tmz-menu-link {
    display:flex; align-items:center; justify-content:space-between;
    box-sizing:border-box; min-height:66px; padding:12px 15px;
    border:1px solid #e1d4bc; border-radius:14px;
    background:#fffdf8; color:#574538; font-size:15px;
    box-shadow:0 3px 0 #e8ddc7;
  }
  .gnav-fix.tmz-enhanced .tmz-menu-link > .menu-item-title { gap:13px; white-space:normal; }
  .gnav-fix.tmz-enhanced .tmz-menu-link .tmz-icon { width:33px; height:33px; margin:0; }
  .gnav-fix.tmz-enhanced .gNavList > .menu-item > .tmz-menu-link::after {
    content:''; width:6px; height:6px; flex:0 0 auto; margin-left:10px;
    border-top:1.5px solid #a28455; border-right:1.5px solid #a28455; transform:rotate(45deg);
  }
  .gnav-fix.tmz-enhanced .gNavList > .menu-item > .tmz-menu-link[aria-current='page'] { border-color:#bb9270; background:#f9edda; }
  .gnav-fix.tmz-enhanced .gNavList > .menu-item > .tmz-menu-link:active { background:#f4e4c8; }
  .gnav-fix.tmz-enhanced .drawer__input:checked ~ .drawer__overlay { background:#35261f; opacity:.38; }
  .admin-bar :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle { top:calc(53px + env(safe-area-inset-top,0px)); }
  .admin-bar .gnav-fix.tmz-enhanced .nav__drawers { padding-top:calc(128px + env(safe-area-inset-top,0px)); }
}
@media (min-width:783px) and (max-width:991.98px) {
  .admin-bar :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle { top:calc(39px + env(safe-area-inset-top,0px)); }
  .admin-bar .gnav-fix.tmz-enhanced .nav__drawers { padding-top:calc(114px + env(safe-area-inset-top,0px)); }
}
@media (prefers-reduced-motion:reduce) {
  :is(.header,.header-fix,.gnav-fix) .tmz-menu-link,
  :is(.header,.header-fix,.gnav-fix) .tmz-icon,
  :is(.header,.header-fix,.gnav-fix) .tmz-icon *,
  :is(.gnav-fix,.header-fix).tmz-enhanced .tmz-toggle,
  .gnav-fix.tmz-enhanced .nav__drawers { animation:none!important; transition:none!important; }
  .tmz-menu-link:active .tmz-icon { transform:none; }
}