/* Mobile-only responsive enhancements (2026). Desktop layout unchanged. */
@media screen and (max-width: 767px) {
 html,body {width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden;}
 body { -webkit-text-size-adjust:100%; }
 *, *::before, *::after {box-sizing:border-box;}
 #wrapper {width:100%;max-width:750px;min-height:0;height:auto;margin:0 auto;position:relative;}
 #top #wrapper #header {width:100%;height:auto;min-height:0;aspect-ratio:750 / 386;padding:0;position:relative;background-size:100% 100%;}
 #top #wrapper #header ul {position:absolute;right:0;bottom:0;width:20%;height:8%;margin:0;}
 #top #wrapper #header ul li, #top #wrapper #header ul li a {width:100%;height:100%;display:block;}
 #top #wrapper #header ul li a:hover {background-size:100% 100%;}
 #common #header {width:100%;height:auto;min-height:45px;display:flex;align-items:center;flex-wrap:wrap;background-size:auto 45px;}
 #common #header h1 {float:none;width:auto;max-width:66%;height:auto;min-height:45px;}
 #common #header h1 a,#common #header h1 img {display:block;max-width:100%;height:auto;}
 #header #mail {float:none;margin-left:auto;width:33%;max-width:246px;height:45px;background-size:100% 45px;}
 #header #mail p a {width:100%;height:45px;}
 #header #mail p a:hover {background-size:100% 45px;}
 #nav {width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:#242432;}
 #nav li, #top #wrapper #nav li {float:none;width:auto;height:auto;min-width:0;min-height:44px;text-indent:0;display:flex;align-items:stretch;justify-content:stretch;background:#252538 !important;color:#fff;}
 #nav li a, #top #wrapper #nav li a, #common #wrapper #nav li a {display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:44px;text-indent:0;text-align:center;background-image:none !important;color:#fff;font-size:13px;letter-spacing:.02em;text-decoration:none;padding:8px 3px;overflow-wrap:anywhere;}
 #nav li[id^="now"] {align-items:center;justify-content:center;background:#44435b !important;font-size:13px;padding:8px 3px;text-align:center;}
 #nav li:last-child:nth-child(odd) {grid-column:1/-1;}
 #topcontent {width:100%;height:auto;padding:8px 12px;}
 #topcontent dt {float:none;width:100%;height:auto;min-height:28px;text-indent:0;background-image:none !important;color:#fff;font-size:15px;font-weight:bold;padding:6px 0;}
 #topcontent #whatnew,#topcontent dd {width:100%;max-width:100%;height:auto;max-height:none;overflow:visible;margin:0;padding:8px 0;font-size:14px;line-height:1.7;overflow-wrap:anywhere;}
 #topcontent h3 {line-height:1.65;overflow-wrap:anywhere;}
 #topcontent dd img {max-width:40%;height:auto;float:right;margin:4px 0 6px 10px;}
 #common #content,#common #ex_content,#common #pb_content,#common #pro-content,#common #saku_content {width:100%;height:auto;min-height:0;position:static;top:auto;padding:10px 12px;overflow:visible;}
 #asistnav,#pro-content #asistnav {float:none;width:100%;max-width:100%;height:auto;margin:0 0 16px;padding:6px 0 12px;display:flex;flex-wrap:wrap;gap:5px;border-bottom:1px solid #666;}
 #asistnav li {display:inline-block;text-align:left;font-size:12px;padding:0;margin:0;}
 #asistnav li a,#asistnav #now {display:block;padding:7px 9px;border:1px solid #666;border-radius:3px;min-height:34px;line-height:1.4;}
 #asistnav #now {border-color:#96A8CE;}
 #show,#publication-cont {float:none;width:100%;max-width:100%;height:auto;min-height:0;overflow:visible;padding:0;margin:0;}
 #pro-content #show {margin-top:0;padding:0;}
 #show h2 {float:none;overflow-wrap:anywhere;}
 #show img,#content img,#ex_content img,#pb_content img,#pro-content img,#saku_content img {max-width:100%;height:auto;}
 #show table,#pro-content table {max-width:100%;width:auto;}
 #show td,#show th,#pro-content td,#pro-content th {overflow-wrap:anywhere;}
 iframe,video,embed,object {max-width:100%;}
 a {overflow-wrap:anywhere;}
}

/* Fix: preserve the English label embedded in the original hero image.
   Keep the link tappable without rendering its text over the photograph. */
@media screen and (max-width: 767px) {
 #top #wrapper #header ul li a,
 #top #wrapper #header ul li a:hover {
   text-indent:-9999px;
   overflow:hidden;
   white-space:nowrap;
   background:none !important;
 }
}

/* 2026-10-22: common-page header mobile overlap correction.
   The old headerbg.jpg contains lettering already; displaying it behind
   tohome.jpg duplicated the title. Keep the original artwork and mail image
   on separate lines only on small screens. */
@media screen and (max-width: 767px) {
  #common #wrapper #header {
    background: #151515 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    height: auto;
    min-height: 0;
    padding: 0;
  }
  #common #wrapper #header h1 {
    float: none;
    width: 100%;
    max-width: 489px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  #common #wrapper #header h1 a,
  #common #wrapper #header h1 img {
    display: block;
    width: 100%;
    max-width: 489px;
    height: auto;
  }
  #common #wrapper #header #mail {
    float: none;
    align-self: flex-end;
    flex: none;
    width: min(246px, 65%);
    max-width: 246px;
    height: 32px;
    margin: 0;
    background-image: url(img/mail.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
  }
  #common #wrapper #header #mail p,
  #common #wrapper #header #mail p a {
    display: block;
    width: 100%;
    height: 32px;
    margin: 0;
    overflow: hidden;
  }
  #common #wrapper #header #mail p a {
    font-size: 0;
    text-indent: -9999px;
  }
  #common #wrapper #header #mail p a:hover {
    background: none;
  }
}

/* Final mobile common header: one continuous original 750x45 banner,
   with invisible home link and the original email artwork on the right. */
@media screen and (max-width:767px) {
 #common #wrapper #header {
   display:block !important; position:relative; width:100%;
   height:auto !important; min-height:0 !important; aspect-ratio:750 / 45;
   padding:0 !important; margin:0 !important; overflow:hidden;
   background-image:url(img/headerbg.jpg) !important;
   background-color:transparent !important; background-size:100% 100% !important;
   background-position:center !important; background-repeat:no-repeat !important;
 }
 #common #wrapper #header h1 {
   position:absolute; left:0; top:0; width:65.2%; max-width:none;
   height:100% !important; min-height:0 !important; margin:0; overflow:hidden;
 }
 #common #wrapper #header h1 a {display:block;width:100%;height:100%;}
 #common #wrapper #header h1 img {opacity:0;width:100%;height:100%;}
 #common #wrapper #header #mail {
   position:absolute; top:0; right:0; width:32.8%; max-width:none;
   height:100% !important; margin:0; align-self:auto;
   background-image:url(img/mail.jpg) !important;
   background-size:100% 100% !important; background-position:center;
 }
 #common #wrapper #header #mail p,
 #common #wrapper #header #mail p a {width:100%;height:100% !important;margin:0;}
}