/* Shared header for every 野球ドリル！ page — v6.4.5 */
.yd-site-header{position:relative!important;z-index:50!important;background:#002a19!important;color:#fff!important;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))!important;padding-top:max(8px,env(safe-area-inset-top))!important;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif!important;box-sizing:border-box!important;}
.yd-site-header *{box-sizing:border-box;}
.yd-site-header .yd-header-inner{width:100%!important;max-width:1060px!important;min-height:50px!important;margin:0 auto!important;padding:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;}
.yd-site-header .yd-brand{display:flex!important;flex:1 1 auto!important;align-items:center!important;gap:10px!important;min-width:0!important;color:#fff!important;text-decoration:none!important;}
.yd-site-header.site-header .yd-brand.brand .yd-logo.new-logo{display:block!important;width:185px!important;max-width:185px!important;height:auto!important;max-height:50px!important;object-fit:contain!important;object-position:left center!important;flex-shrink:0!important;}
.yd-site-header .yd-subtitle{display:block!important;align-self:center!important;font-size:13px!important;font-weight:500!important;line-height:1.2!important;letter-spacing:-.01em!important;color:#e2ece5!important;white-space:nowrap!important;}
.yd-site-header .yd-furigana-button{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:0 0 auto!important;min-width:90px!important;min-height:39px!important;width:auto!important;height:auto!important;margin:0!important;padding:5px 8px!important;font-family:inherit!important;font-size:12px!important;font-weight:800!important;line-height:1.2!important;white-space:nowrap!important;color:#fff!important;background:#164a36!important;border:1px solid #638a76!important;border-radius:24px!important;cursor:pointer!important;}
.yd-site-header .yd-furigana-button b{display:inline-block!important;flex:0 0 auto!important;min-width:0!important;margin:0!important;padding:4px 6px!important;border-radius:14px!important;background:#ffa345!important;color:#0b3725!important;font-weight:850!important;font-size:12px!important;line-height:1.2!important;}
.yd-site-header .yd-menu-button{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;flex:0 0 42px!important;order:3!important;width:42px!important;height:42px!important;margin:0!important;padding:7px!important;color:#fff!important;background:#174a36!important;border:1px solid #6b9382!important;border-radius:14px!important;cursor:pointer!important;transition:background-color .24s ease,border-color .24s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1)!important;}
.yd-site-header .yd-menu-button span{display:block!important;width:21px!important;height:2px!important;border-radius:2px!important;background:currentColor!important;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .22s ease!important;transform-origin:center!important;}
.yd-site-header .yd-menu-button[aria-expanded="true"]{background:#276448!important;box-shadow:0 2px 12px #0003!important;}
.yd-site-header .yd-menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
.yd-site-header .yd-menu-button[aria-expanded="true"] span:nth-child(2){opacity:0!important;transform:scaleX(.45)!important;}
.yd-site-header .yd-menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}
.yd-site-header .yd-site-menu{position:absolute!important;z-index:60!important;display:flex!important;flex-direction:column!important;gap:3px!important;top:100%!important;right:max(12px,calc((100vw - 1060px)/2))!important;left:auto!important;width:min(340px,calc(100vw - 24px))!important;max-width:340px!important;margin:0!important;padding:11px!important;border:1px solid #c5dacc!important;border-radius:0 0 20px 20px!important;box-shadow:0 18px 38px #00190e36!important;background:#fff!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-10px) scale(.975)!important;transform-origin:top right!important;transition:opacity .28s ease,transform .36s cubic-bezier(.22,1,.36,1),visibility .36s!important;will-change:transform,opacity!important;}
.yd-site-header .yd-site-menu.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0) scale(1)!important;}
.yd-site-header .yd-site-menu[hidden]{display:none!important;}
.yd-site-header .yd-site-menu a{display:block!important;width:100%!important;margin:0!important;padding:15px 15px!important;font-family:inherit!important;font-size:17px!important;font-weight:750!important;line-height:1.45!important;text-align:left!important;text-decoration:none!important;color:#123c28!important;background:transparent!important;border:0!important;border-radius:9px!important;}
.yd-site-header .yd-site-menu a{transition:background-color .22s ease,transform .24s cubic-bezier(.22,1,.36,1)!important;}
.yd-site-header .yd-site-menu a:hover,.yd-site-header .yd-site-menu a:focus-visible{background:#edf5eb!important;}
@media(hover:hover){.yd-site-header .yd-site-menu a:hover{transform:translateX(3px)!important;}}
@media(prefers-reduced-motion:reduce){.yd-site-header .yd-site-menu,.yd-site-header .yd-menu-button,.yd-site-header .yd-menu-button span,.yd-site-header .yd-site-menu a{transition:none!important;animation:none!important;}}
.yd-site-header .yd-brand:focus-visible,.yd-site-header .yd-furigana-button:focus-visible,.yd-site-header .yd-menu-button:focus-visible,.yd-site-header .yd-site-menu a:focus-visible{outline:3px solid #ffae53!important;outline-offset:3px!important;}
@media(max-width:620px){
 .yd-site-header .yd-subtitle{display:none!important;}
 .yd-site-header.site-header .yd-brand.brand .yd-logo.new-logo{width:clamp(112px,35vw,154px)!important;max-width:154px!important;}
 .yd-site-header .yd-header-inner{gap:7px!important;min-height:43px!important;}
 .yd-site-header{padding:6px 9px!important;padding-top:max(6px,env(safe-area-inset-top))!important;}
 .yd-site-header .yd-furigana-button{min-width:86px!important;min-height:37px!important;padding:5px 6px!important;font-size:11px!important;}
 .yd-site-header .yd-furigana-button b{padding:4px 5px!important;font-size:11px!important;}
 .yd-site-header .yd-menu-button{width:40px!important;height:40px!important;flex-basis:40px!important;}
}
/* Sound switch belongs to the PLAYING FIELD, not to the shared site header. */
.field-container{position:relative;}
.field-container .yd-field-sound{position:absolute;top:11px;left:11px;z-index:9;}
.field-container .yd-game-sound-button{display:grid;place-items:center;width:39px;height:39px;padding:4px;background:#174a36;color:#fff;border:1px solid #7fa58f;border-radius:14px;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 5px #002a192b;}
.field-container .yd-game-sound-button:focus-visible{outline:3px solid #ffae53;outline-offset:3px;}
@media(max-width:620px){.field-container .yd-field-sound{top:8px;left:8px;}.field-container .yd-game-sound-button{width:34px;height:34px;font-size:17px;}}


/* v6.4.6 — high-contrast dark-gray menu and thumb-friendly mobile bottom sheet. */
.yd-site-header .yd-site-menu a{color:#30343a!important;font-weight:800!important;font-size:18px!important;}
.yd-site-header .yd-site-menu a:hover,.yd-site-header .yd-site-menu a:focus-visible{color:#24272b!important;background:#f0f2ef!important;}
.yd-site-header .yd-menu-sheet-top{display:none!important;}
.yd-menu-backdrop{position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s ease;}
.yd-menu-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto;}
@media(max-width:620px){
 .yd-site-header .yd-site-menu{
  position:fixed!important;left:12px!important;right:12px!important;top:auto!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  width:auto!important;max-width:none!important;max-height:calc(100dvh - 40px)!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  border-radius:22px!important;padding:13px!important;
  box-shadow:0 17px 50px #0005!important;
  background:#fff!important;
  transform:translateY(24px) scale(.985)!important;
  transform-origin:bottom center!important;
  transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility .38s!important;
 }
 .yd-site-header .yd-site-menu.is-open{transform:translateY(0) scale(1)!important;}
 .yd-site-header .yd-menu-sheet-top{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;padding:6px 7px 13px!important;border-bottom:1px solid #e5e8e5!important;margin-bottom:6px!important;}
 .yd-site-header .yd-menu-sheet-title{color:#30343a!important;font-size:21px!important;font-weight:900!important;}
 .yd-site-header .yd-menu-close{background:#f0f2f0!important;border:1px solid #e0e4e0!important;border-radius:24px!important;padding:9px 15px!important;font-size:16px!important;font-weight:800!important;color:#30343a!important;min-height:43px!important;cursor:pointer!important;}
 .yd-site-header .yd-site-menu a{font-size:19px!important;padding:17px 14px!important;line-height:1.35!important;min-height:60px!important;border-radius:11px!important;}
 .yd-site-header .yd-site-menu a+a{border-top:1px solid #eff1ef!important;}
}
@media(prefers-reduced-motion:reduce){.yd-menu-backdrop{transition:none!important;}}

/* v6.4.7 — unified pixel-art icons in navigation, shared by game, quiz and about */
.yd-site-header .yd-site-menu a{
 display:flex!important;align-items:center!important;gap:13px!important;
 color:#30343a!important;
}
.yd-site-header .yd-site-menu a .yd-menu-icon{
 display:block!important;flex:0 0 42px!important;
 width:42px!important;height:42px!important;
 object-fit:contain!important;image-rendering:pixelated!important;
 background:#f5f7f3!important;border-radius:10px!important;
 padding:3px!important;
}
.yd-site-header .yd-site-menu a .yd-menu-label{
 display:block!important;flex:1 1 auto!important;min-width:0!important;
 text-align:left!important;line-height:1.35!important;
 color:#30343a!important;
}
@media(max-width:620px){
 .yd-site-header .yd-site-menu a{gap:14px!important;padding:12px 14px!important;min-height:70px!important;}
 .yd-site-header .yd-site-menu a .yd-menu-icon{width:46px!important;height:46px!important;flex-basis:46px!important;}
}