
:root{
  --2026hc_menu_leather:#20120c;
  --2026hc_menu_leather2:#3a2116;
  --2026hc_menu_gold:#b89659;
  --2026hc_menu_gold2:#e0c78b;
  --2026hc_menu_paper:#f8f1df;
  --2026hc_menu_paper2:#efe1c1;
  --2026hc_menu_ink:#2b2018;
  --2026hc_menu_muted:#75654c;
}
.\32 026hc_menu_demo_body{margin:0;font-family:"Yu Gothic","游ゴシック",YuGothic,"Noto Sans JP",system-ui,sans-serif;color:var(--2026hc_menu_ink);min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#6b4a31,#1b100c 65%,#0d0806)}
.\32 026hc_menu_demo_box{box-sizing:border-box;font-family:"Yu Gothic","游ゴシック",YuGothic,"Noto Sans JP",system-ui,sans-serif;width:min(92vw,760px);padding:70px 42px;text-align:center;border:1px solid rgba(224,199,139,.5);background:linear-gradient(145deg,rgba(58,33,22,.95),rgba(20,11,8,.96));box-shadow:0 35px 90px rgba(0,0,0,.45),inset 0 0 0 8px rgba(184,150,89,.08);border-radius:24px;color:#fff6df}
.\32 026hc_menu_demo_box h2{font-family:serif;font-size:clamp(36px,6vw,64px);line-height:1.25;margin:8px 0 20px;letter-spacing:.08em}
.\32 026hc_menu_demo_box p{color:#e8d8b5}.\32 026hc_menu_eyebrow{letter-spacing:.22em;font-size:12px;color:var(--2026hc_menu_gold2);margin:0 0 10px}.\32 026hc_menu_open_button{appearance:none;border:1px solid var(--2026hc_menu_gold2);background:linear-gradient(135deg,#cfaf69,#8d6933);color:#1d120b;border-radius:999px;padding:17px 42px;font-weight:700;letter-spacing:.12em;cursor:pointer;box-shadow:0 14px 35px rgba(0,0,0,.28);transition:.25s}.\32 026hc_menu_open_button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.\32 026hc_menu_body{margin:0;font-family:"Yu Gothic","游ゴシック",YuGothic,"Noto Sans JP",system-ui,sans-serif;color:var(--2026hc_menu_ink);background:#160d09;min-height:100vh;overflow-y:auto}.\32 026hc_menu_leather_shell{box-sizing:border-box;width:min(100%,800px);min-height:100vh;margin:0 auto;padding:30px;background:radial-gradient(circle at 15% 0,rgba(255,230,166,.12),transparent 34%),linear-gradient(145deg,var(--2026hc_menu_leather2),var(--2026hc_menu_leather));position:relative;box-shadow:0 0 0 1px rgba(224,199,139,.28),0 22px 80px rgba(0,0,0,.55),inset 0 0 0 10px rgba(10,5,3,.18)}
.\32 026hc_menu_leather_shell:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(35deg,rgba(255,255,255,.04) 0 1px,transparent 1px 5px),repeating-linear-gradient(125deg,rgba(0,0,0,.15) 0 1px,transparent 1px 6px)}
.\32 026hc_menu_header{position:relative;z-index:1;display:flex;justify-content:space-between;gap:22px;align-items:flex-end;padding:18px 18px 24px;border:1px solid rgba(224,199,139,.55);border-radius:18px;background:linear-gradient(135deg,rgba(0,0,0,.18),rgba(255,255,255,.04));color:#fff5dc}.\32 026hc_menu_header h1{font-family:"Yu Mincho","游明朝",serif;font-size:38px;line-height:1.18;letter-spacing:.14em;margin:0}.\32 026hc_menu_header h1 span{font-size:26px;color:var(--2026hc_menu_gold2)}.\32 026hc_menu_note{max-width:310px;margin:0;color:#ddc99c;font-size:13px;line-height:1.8}
.\32 026hc_menu_category_nav{position:sticky;top:0;z-index:5;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;padding:14px 2px 16px;margin:0 -2px;scrollbar-width:none;touch-action:pan-x;background:linear-gradient(180deg,rgba(32,18,12,.98),rgba(32,18,12,.82) 72%,rgba(32,18,12,0))}.\32 026hc_menu_category_nav::-webkit-scrollbar{display:none}.\32 026hc_menu_category_nav.\32 026hc_menu_is-dragging{cursor:grabbing}.\32 026hc_menu_cat_btn{flex:0 0 auto;white-space:nowrap;border:1px solid rgba(224,199,139,.42);background:rgba(28,16,10,.78);color:#f5e6bd;border-radius:999px;padding:10px 18px;font-size:12px;text-decoration:none;letter-spacing:.08em;transition:.25s}.\32 026hc_menu_cat_btn:hover,.\32 026hc_menu_cat_btn.\32 026hc_menu_is-active{background:linear-gradient(135deg,#c6a360,#7b572b);color:#1d120b}
.\32 026hc_menu_book{position:relative;z-index:1;display:grid;gap:30px;perspective:1800px;padding-bottom:35px}.\32 026hc_menu_page{box-sizing:border-box;min-height:760px;scroll-margin-top:72px;padding:38px 42px;border-radius:14px;background:linear-gradient(90deg,rgba(80,54,25,.12),transparent 8%,transparent 92%,rgba(80,54,25,.16)),linear-gradient(180deg,var(--2026hc_menu_paper),var(--2026hc_menu_paper2));border:1px solid rgba(255,246,220,.6);box-shadow:0 22px 60px rgba(0,0,0,.38),inset 0 0 40px rgba(116,77,28,.14);transform-origin:left center;transform:rotateY(6deg) translateY(16px);opacity:.55;transition:transform .9s cubic-bezier(.16,.78,.18,1),opacity .75s,filter .75s,box-shadow .75s}.\32 026hc_menu_page.\32 026hc_menu_is-visible{transform:rotateY(0) translateY(0);opacity:1}.\32 026hc_menu_page_head{display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid rgba(93,65,32,.32);padding-bottom:18px;margin-bottom:20px}.\32 026hc_menu_page_title{font-family:"Yu Mincho","游明朝",serif;font-size:30px;letter-spacing:.08em;margin:0}.\32 026hc_menu_page_no{font-family:serif;color:var(--2026hc_menu_gold);font-size:14px;letter-spacing:.18em}.\32 026hc_menu_list{display:grid;gap:8px}.\32 026hc_menu_item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;min-height:64px;padding:13px 0;text-decoration:none;color:inherit;border-bottom:1px solid rgba(83,56,26,.18);opacity:0;transform:translateY(14px);animation:hcMenu2026Fade .65s forwards;animation-delay:calc(var(--i)*.035s)}.\32 026hc_menu_item:hover{background:rgba(184,150,89,.1);padding-left:12px;padding-right:12px;border-radius:10px}.\32 026hc_menu_name{display:block;font-weight:700;font-size:16px;line-height:1.55;letter-spacing:.03em}.\32 026hc_menu_icons{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.\32 026hc_menu_icon{display:inline-flex;align-items:center;justify-content:center;min-width:52px;border:1px solid rgba(184,150,89,.48);border-radius:999px;padding:3px 9px;color:#6e542c;font-size:11px;background:rgba(255,255,255,.28)}.\32 026hc_menu_price{font-family:Georgia,serif;color:#4c351f;font-size:17px;white-space:nowrap;font-weight:700}.\32 026hc_menu_foot{margin-top:26px;text-align:right;color:var(--2026hc_menu_muted);font-size:12px;letter-spacing:.12em}@keyframes hcMenu2026Fade{to{opacity:1;transform:translateY(0)}}
@media (max-width:767px){.\32 026hc_menu_body{margin:0;font-family:"Yu Gothic","游ゴシック",YuGothic,"Noto Sans JP",system-ui,sans-serif;color:var(--2026hc_menu_ink);background:var(--2026hc_menu_leather)}.\32 026hc_menu_leather_shell{width:100%;max-width:none;padding:14px;box-shadow:none}.\32 026hc_menu_header{display:block;padding:22px 18px}.\32 026hc_menu_header h1{font-size:30px}.\32 026hc_menu_header h1 span{font-size:21px}.\32 026hc_menu_note{max-width:none;margin-top:12px;font-size:12px}.\32 026hc_menu_category_nav{top:0;padding:12px 0}.\32 026hc_menu_cat_btn{padding:9px 13px;font-size:11px}.\32 026hc_menu_book{gap:18px;perspective:none}.\32 026hc_menu_page{min-height:100vh;padding:28px 18px;border-radius:12px;transform:none;opacity:1}.\32 026hc_menu_page_head{display:block}.\32 026hc_menu_page_title{font-size:24px;line-height:1.35}.\32 026hc_menu_page_no{display:block;margin-top:8px}.\32 026hc_menu_item{grid-template-columns:1fr;gap:6px;min-height:84px;padding:14px 0}.\32 026hc_menu_name{font-size:15px}.\32 026hc_menu_price{font-size:18px}.\32 026hc_menu_icon{font-size:10px;min-width:auto}.\32 026hc_menu_demo_box{box-sizing:border-box;font-family:"Yu Gothic","游ゴシック",YuGothic,"Noto Sans JP",system-ui,sans-serif;padding:48px 22px}.\32 026hc_menu_demo_box h2{font-size:34px}}


/* ver2 nav click final fix */
.\32 026hc_menu_category_nav{scroll-behavior:smooth;}
.\32 026hc_menu_cat_btn{position:relative;z-index:10;pointer-events:auto;}

/* V3 static HTML: natural page-turn motion. Product markup is real HTML; JS only controls motion/nav. */
.\32 026hc_menu_book{perspective:1900px;}
.\32 026hc_menu_page{backface-visibility:hidden;will-change:transform,opacity,filter;}
.\32 026hc_menu_page.\32 026hc_menu_is-turning{
  animation:hcMenu2026NaturalPageTurn .92s cubic-bezier(.18,.76,.16,1) both;
}
@keyframes hcMenu2026NaturalPageTurn{
  0%{transform:rotateY(-16deg) translateX(-18px) translateY(4px);opacity:.72;filter:drop-shadow(22px 14px 18px rgba(0,0,0,.28));}
  42%{transform:rotateY(-4deg) translateX(-5px) translateY(1px);opacity:.94;filter:drop-shadow(15px 10px 14px rgba(0,0,0,.2));}
  72%{transform:rotateY(2.5deg) translateX(2px) translateY(0);opacity:1;filter:drop-shadow(7px 5px 8px rgba(0,0,0,.12));}
  100%{transform:rotateY(0) translateX(0) translateY(0);opacity:1;filter:none;}
}
@media (max-width:767px){.\32 026hc_menu_page.\32 026hc_menu_is-turning{animation:none}}
