/* Existing official header and dialogs, isolated from the customer page. */
.global-shell{font-family:"Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;font-size:15px;line-height:1.9;color:#112f2a;}
.global-shell .brand{align-items:initial;gap:0;}
.global-shell h1,.global-shell h2,.global-shell h3{font-family:inherit;}

.global-shell{--ink:#102c27;--muted:#66756e;--green:#064c3d;--deep:#052f28;--paper:#fff;--off:#f5f6f0;--line:#dce3dd;--lime:#dcf596;--max:1320px;--pad:clamp(22px,4.4vw,84px);--head:88px;--sans:"Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;--latin:Arial,Helvetica,sans-serif}
.global-shell *,.global-shell *::before,.global-shell *::after{box-sizing:border-box}
.global-shell h1,.global-shell h2,.global-shell h3,.global-shell h4,.global-shell p,.global-shell figure{margin:0}
.global-shell h1,.global-shell h2,.global-shell h3{line-height:1.5;letter-spacing:-.035em;font-weight:800;overflow-wrap:anywhere}
.global-shell a{color:inherit;text-decoration:none}
.global-shell button,.global-shell input,.global-shell textarea,.global-shell select{font:inherit;color:inherit}
.global-shell button,.global-shell a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.global-shell button{cursor:pointer;background:none;border:0}
.global-shell button:disabled{opacity:.5;cursor:not-allowed}
.global-shell img,.global-shell svg{display:block;max-width:100%}
.global-shell img{object-fit:cover}
.global-shell button:focus-visible,.global-shell a:focus-visible,.global-shell input:focus-visible,.global-shell textarea:focus-visible,.global-shell select:focus-visible,.global-shell summary:focus-visible{outline:3px solid #af7623;outline-offset:5px}
.global-shell [hidden],dialog.global-shell:not([open]){display:none!important}
.global-shell .mono{font-family:var(--latin);font-size:10px;letter-spacing:.1em;line-height:1.6}
.global-shell .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.global-shell .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.global-shell .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:53px;border:1px solid var(--green);padding:13px 25px;color:#fff;background:var(--green);font-size:13px;font-weight:700;line-height:1.6;transition:background .2s,transform .2s}
.global-shell .btn:hover{background:#102c27;transform:translateY(-2px)}
.global-shell.header{height:var(--head);position:sticky;top:0;z-index:60;background:#fffffff5;border-bottom:1px solid #dde4de;backdrop-filter:blur(16px)}
.global-shell .header-inner{height:100%;display:flex;align-items:center;gap:25px;padding-inline:var(--pad)}
.global-shell .brand{display:flex;flex-direction:column;flex:none;line-height:1}
.global-shell .brand strong{font-family:var(--latin);font-size:25px;letter-spacing:-.04em;font-weight:900}
.global-shell .brand small{font-size:8px;letter-spacing:.18em;line-height:1.4;margin-top:8px;font-weight:700}
.global-shell .main-nav{display:flex;align-items:center;gap:22px;margin-left:auto;white-space:nowrap}
.global-shell .main-nav a{font-size:11px;font-weight:700;min-height:44px;display:flex;align-items:center;position:relative}
.global-shell .main-nav a:after{position:absolute;content:"";bottom:0;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transition:transform .2s}
.global-shell .main-nav a:hover:after,.global-shell .main-nav a[aria-current=page]:after{transform:scaleX(1)}
.global-shell .header-actions{display:flex;align-items:center;gap:10px}
.global-shell .icon-button{width:44px;height:44px;display:grid;place-items:center;flex:none}
.global-shell .header-cta{font-size:11px;font-weight:700;padding:12px 16px;min-height:44px;display:flex;align-items:center;gap:17px;background:var(--green);color:#fff}
.global-shell .header-cta .icon{width:16px;height:16px}
.global-shell .menu-button{display:grid;align-content:center;gap:4px;width:44px;height:44px;padding:8px}
.global-shell .menu-button>span{display:block;width:24px;height:1.5px;background:var(--ink);margin:auto}
.global-shell .menu-button small{font-family:var(--latin);font-size:7px;font-weight:700;letter-spacing:.07em;margin-top:2px}
.global-shell .header-progress{height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;position:absolute;bottom:-1px;left:0;width:100%;pointer-events:none}
.global-shell.dialog{border:0;padding:0;color:var(--ink);background:var(--off);width:min(1150px,calc(100% - 44px));max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 30px 100px #001f2755}
.global-shell.dialog::backdrop{background:#001f21bd;backdrop-filter:blur(8px)}
.global-shell .dialog-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:22px 33px;background:var(--off);border-bottom:1px solid var(--line)}
.global-shell .dialog-bar .brand strong{font-size:22px}
.global-shell .dialog-close{border:1px solid #c6d1c3;width:43px;height:43px;display:grid;place-items:center}
.global-shell .dialog-close:hover{background:#e0e8d9}
.global-shell .dialog-content{padding:30px 34px 36px}
.global-shell .menu-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:25px}
.global-shell .menu-heading strong{font-family:var(--latin);font-size:55px;line-height:1;font-weight:900;letter-spacing:-.04em}
.global-shell .menu-heading .btn{font-size:11px}
.global-shell .menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px}
.global-shell .menu-col{min-width:0}
.global-shell .menu-col h2{font-size:17px;border-bottom:2px solid var(--green);padding-bottom:12px;line-height:1.8}
.global-shell .menu-col>a{font-size:11px;display:block;min-height:37px;padding:8px 0;border-bottom:1px solid #dce2d7;line-height:1.8}
.global-shell .menu-col>a:hover{text-decoration:underline}
.global-shell .menu-bottom{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:27px}
.global-shell .menu-bottom a{font-size:11px;background:#e4ecdd;padding:14px 16px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.global-shell .menu-bottom .icon{width:15px;height:15px}
.global-shell.search-dialog{max-width:800px}
.global-shell .search-inner{padding:32px}
.global-shell .search-field{display:flex;align-items:center;gap:17px;background:#fff;border:1px solid #c4d1c4;padding:14px 19px}
.global-shell .search-field input{border:0;background:none;min-width:0;width:100%;font-size:17px;min-height:34px}
.global-shell .search-field .icon{width:22px;height:22px}
.global-shell .search-count{font-size:11px;color:var(--muted);margin:19px 0}
.global-shell .search-results{display:grid;gap:0}
.global-shell .search-result{padding:16px 0;border-top:1px solid var(--line);display:block}
.global-shell .search-result .mono{font-size:8px;color:var(--green)}
.global-shell .search-result strong{display:block;font-size:15px;margin:5px 0}
.global-shell .search-result p{font-size:11px;line-height:1.9;color:var(--muted)}
.global-shell .search-result:hover strong{text-decoration:underline}
.global-shell .empty-search{font-size:13px;color:var(--muted);padding:25px 0}
@media (min-width:1700px){.global-shell .header-inner{max-width:1700px;margin:auto}}
@media (max-width:1300px){.global-shell .main-nav{gap:15px}
.global-shell .main-nav a{font-size:10px}
.global-shell .header-inner{gap:18px}
.global-shell .header-cta{padding:12px 13px}
.global-shell .brand strong{font-size:23px}
.global-shell .header-actions{gap:3px}}
@media (max-width:1100px){.global-shell{--head:78px}
.global-shell .main-nav{display:none}
.global-shell .header-actions{margin-left:auto;gap:11px}
.global-shell .header-inner{gap:26px}}
@media (max-width:760px){.global-shell{--head:72px;--pad:23px}
.global-shell .brand strong{font-size:22px}
.global-shell .brand small{font-size:7px;margin-top:7px}
.global-shell .header-actions{gap:4px}
.global-shell .header-cta{font-size:10px;padding:10px 12px;gap:8px;min-height:39px}
.global-shell .header-cta .icon{display:none}
.global-shell .icon-button{width:37px;height:42px}
.global-shell .menu-button{width:37px;height:42px}
.global-shell .header-inner{gap:15px}
.global-shell .icon-button .icon{width:21px;height:21px}
.global-shell.dialog{width:calc(100% - 22px);max-height:calc(100dvh - 25px)}
.global-shell .dialog-bar{padding:15px 19px}
.global-shell .dialog-bar .brand strong{font-size:20px}
.global-shell .dialog-close{width:38px;height:38px}
.global-shell .dialog-close .icon{width:20px;height:20px}
.global-shell .dialog-content{padding:23px 20px}
.global-shell .menu-heading{margin-bottom:20px;gap:15px}
.global-shell .menu-heading strong{font-size:39px}
.global-shell .menu-heading .btn{font-size:9px;padding:10px 13px;min-height:41px;gap:14px}
.global-shell .menu-grid{grid-template-columns:1fr;gap:25px}
.global-shell .menu-col h2{font-size:18px;padding-bottom:10px}
.global-shell .menu-col>a{font-size:11px;min-height:42px;padding:11px 0}
.global-shell .menu-bottom{grid-template-columns:1fr;gap:9px;margin-top:26px}
.global-shell .menu-bottom a{font-size:10px;padding:13px 14px;min-height:46px}
.global-shell .search-inner{padding:22px 20px}
.global-shell .search-field{padding:10px 13px;gap:12px}
.global-shell .search-field input{font-size:15px;min-height:31px}
.global-shell .search-count{font-size:10px;margin-block:16px}
.global-shell .search-result{padding-block:14px}
.global-shell .search-result strong{font-size:13px;line-height:1.9}
.global-shell .search-result p{font-size:10px;line-height:1.9}
.global-shell .empty-search{font-size:11px}}
@media (max-width:370px){.global-shell{--pad:18px}
.global-shell .brand strong{font-size:20px}
.global-shell .header-cta{padding:10px 9px;font-size:9px}
.global-shell .header-inner{gap:7px}
.global-shell .header-actions{gap:1px}
.global-shell .icon-button,.global-shell .menu-button{width:34px}}
@media (prefers-reduced-motion:reduce){.global-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.global-shell .btn:hover{transform:none}}
@media  print{.global-shell.header{position:static}
.global-shell .header-actions,.global-shell .main-nav{display:none!important}}
.global-shell{--ink:#112f2a;--green:#075542;--deep:#062f29;--lime:#d9ee98;--off:#f5f6f0;--pad:clamp(22px,4.2vw,80px);--head:84px}
.global-shell a,.global-shell button{transition:color .2s,background .2s,border-color .2s}
.global-shell .header-inner{gap:22px}
.global-shell .brand strong{font-size:25px}
.global-shell .main-nav{gap:20px}
.global-shell .main-nav a{font-size:12px}
.global-shell .header-cta{font-size:12px}
.global-shell .brand small{font-size:9px}
.global-shell .menu-col>a{font-size:14px;min-height:44px;padding-block:10px}
.global-shell .menu-col h2{font-size:19px}
.global-shell .menu-bottom a{font-size:13px}
.global-shell .search-result strong{font-size:17px}
.global-shell .search-result p{font-size:13px}
.global-shell .search-field input{font-size:16px}
.global-shell .search-count{font-size:12px}
@media (max-width:1300px){.global-shell .main-nav{gap:13px}
.global-shell .main-nav a{font-size:11px}
.global-shell .header-inner{gap:17px}}
@media (max-width:1100px){.global-shell{--head:78px}
.global-shell .main-nav{display:none}
.global-shell .header-actions{margin-left:auto}}
@media (max-width:700px){.global-shell{--head:72px;--pad:22px}
.global-shell .brand strong{font-size:23px}
.global-shell .brand small{font-size:8px}
.global-shell .header-inner{gap:8px}
.global-shell .header-actions{gap:5px}
.global-shell .header-cta{font-size:11px;padding:10px 12px}
.global-shell .header-cta .icon{display:none}
.global-shell .header-actions .icon-button{width:40px}
.global-shell .menu-button{width:40px}
.global-shell .menu-col>a{font-size:14px;min-height:46px}
.global-shell .menu-heading strong{font-size:40px}
.global-shell .menu-heading .btn{font-size:11px;padding:12px 15px}
.global-shell .search-inner{padding:23px}
.global-shell .search-result strong{font-size:16px}
.global-shell .search-result p{font-size:12px}
.global-shell .search-field{padding:10px 12px;gap:10px}
.global-shell .search-field input{font-size:16px}}
@media (max-width:360px){.global-shell{--pad:18px}
.global-shell .brand strong{font-size:20px}
.global-shell .brand small{font-size:7px}
.global-shell .header-cta{font-size:10px;padding:10px}
.global-shell .header-actions{gap:1px}
.global-shell .header-actions .icon-button{width:35px}}
@media (prefers-reduced-motion:reduce){.global-shell *{scroll-behavior:auto!important}}
.global-shell{--hero-eyebrow-chip: 0;}
.global-shell{--head: 82px;}
.global-shell.header{background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #e4eae4;
  backdrop-filter: blur(18px) saturate(140%);}
.global-shell .header-inner{padding-inline: clamp(14px, 1.7vw, 30px);
  gap: clamp(10px, 1.4vw, 22px);}
.global-shell.header .brand strong,.global-shell .dialog-bar .brand strong{display: block;
  position: relative;                    
  width: clamp(156px, 13.5vw, 204px);
  aspect-ratio: 268 / 56;
  height: auto;
  background: url("logo-honki-mode-dark.png") no-repeat left center / contain;
  font-size: 0;
  color: transparent;}
.global-shell.header .brand small{font-size: 8px; margin-top: 7px; letter-spacing: .17em;}
.global-shell .main-nav{gap: clamp(11px, 1.35vw, 22px);}
.global-shell .main-nav a{font-size: 13px;
  padding-inline: 2px;
  transition: color .18s;}
.global-shell .main-nav a:hover{color: var(--green);}
.global-shell .main-nav a::after{height: 2px;}
.global-shell .header-cta{position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 10px 19px;
  font-size: 12px;
  gap: 11px;
  min-height: 42px;}
.global-shell .header-actions .menu-button{width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  align-content: center;
  gap: 4px;
  padding: 0;
  transition: background .2s, transform .2s;}
.global-shell .header-actions .menu-button:hover{background: var(--deep); transform: scale(1.05);}
.global-shell .header-actions .menu-button > span{background: #fff; width: 17px; height: 1.6px;}
.global-shell .header-actions .menu-button small{color: #fff; font-size: 6px; margin-top: 1px;}
.global-shell .header-actions .icon-button{width: 42px;}
.global-shell .header-actions .icon-button:hover{color: var(--green);}
@keyframes hm-logo-glint {
  0%, 68%   { background-position: 132% 0; }
  86%, 100% { background-position: -32% 0; }
}
.global-shell.header .brand strong::after{content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, .62) 46%,
    rgba(255, 255, 255, .86) 50%,
    rgba(255, 255, 255, .62) 54%,
    rgba(255, 255, 255, 0) 64%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 132% 0;
  -webkit-mask-image: url("logo-honki-mode-dark.png");
          mask-image: url("logo-honki-mode-dark.png");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  animation: hm-logo-glint 14s ease-in-out 1.6s infinite;}
@keyframes hm-bar-sheen {
  0%, 68%   { transform: translate3d(-170%, 0, 0) skewX(-16deg); }
  100%      { transform: translate3d(560%, 0, 0) skewX(-16deg); }
}
.global-shell.header{position: relative; overflow: hidden;}
.global-shell.header::after{content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 24%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(217, 238, 152, .55) 42%,
    rgba(255, 255, 255, .92) 54%,
    rgba(217, 238, 152, .38) 66%,
    rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-170%, 0, 0) skewX(-16deg);
  animation: hm-bar-sheen 14s cubic-bezier(.3, .6, .25, 1) 1.6s infinite;}
.global-shell.header .header-progress{bottom: 0;}
.global-shell .header-cta::after{content: "";
  position: absolute;
  top: -60%; bottom: -60%; left: -40%;
  width: 34%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, .46), rgba(255, 255, 255, 0));
  transform: skewX(-18deg) translateX(-260%);
  pointer-events: none;}
.global-shell .header-cta{animation: none;}
.global-shell .header-cta::after{animation: hm-sweep 1.15s ease-out 1.9s 1;}
.global-shell .header-cta:hover::after{animation: hm-sweep .85s ease-out 1;}
@keyframes hm-sweep {
  from { transform: skewX(-18deg) translateX(-260%); }
  to   { transform: skewX(-18deg) translateX(560%); }
}
@media  (prefers-reduced-motion: reduce) {.global-shell.header .brand strong{animation: none; background-position: 0 0;}
.global-shell .header-cta::after{animation: none !important; display: none;}
.global-shell.header .brand strong::after,.global-shell.header::after{animation: none !important; display: none;}
.global-shell .header-actions .menu-button:hover{transform: none;}}
@media  (max-width: 1023px) {.global-shell .header-actions .menu-button{width: 48px; height: 48px;}}
@media  (max-width: 420px) {.global-shell .header-inner{padding-inline: 8px; gap: 4px;}
.global-shell.header .brand strong{font-size: 17px;}
.global-shell.header .brand small{font-size: 6.5px; letter-spacing: .12em; margin-top: 4px;}
.global-shell .header-actions{gap: 4px;}
.global-shell .header-actions > *{flex: none;}
.global-shell .header-actions .icon-button{width: 34px;}
.global-shell .header-actions .menu-button{width: 40px; height: 40px;}
.global-shell .header-cta{padding: 8px 12px; font-size: 11px; gap: 6px; min-height: 40px;}
.global-shell .header-cta .icon{width: 13px; height: 13px;}}
@media  (max-width: 420px) {.global-shell.header .brand strong{width: 124px;}
.global-shell.header .brand small{font-size: 6px; letter-spacing: .1em; margin-top: 5px;}}
body.global-dialog-open{overflow:hidden}.global-shell.dialog{margin:auto}.global-shell .header-progress{display:block}.global-shell .icon{display:block}.global-shell .brand strong{max-width:100%}
