/* Responsive geometry only. Original colors, typefaces and text sizes inherit style.css. */
.member-section { padding: 0 0 24px; }
#c1 #main h2 { box-sizing: border-box; background-size: 100% 100%; }
@media screen and (max-width: 968px) {
  body { overflow: auto; }
  #container { width: auto; max-width: 966px; }
  #container, #container * { box-sizing: border-box; }
  #header { height: auto; padding: 15px 10px; }
  #header #logo { position: static; }
  #header #logo img { display: block; width: 100%; max-width: 950px; height: auto; }
  #header h1 { position: static; margin-top: 8px; }
  ul#menu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; background-size: auto 60px; }
  ul#menu li { float: none; min-width: 0; }
  ul#menu li a { width: 100%; height: auto; min-height: 60px; padding: 7px 4px; overflow: visible; }
  ul#menu li a:hover, ul#menu li#current a { background-size: 100% 60px; }
  #contents { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "sub main" "footer footer"; gap: 0 20px; width: auto; margin: 0 12px; }
  #main, #c1 #main { grid-area: main; float: none; width: auto; min-width: 0; }
  #sub { grid-area: sub; float: none; width: auto; min-width: 0; }
  #footer { grid-area: footer; width: 100%; overflow-wrap: anywhere; padding-right: 8px; padding-left: 8px; }
  #c1 #contents, #contents.no-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "footer"; }
  #main h2, #c1 #main h2 { width: 100%; height: auto; min-height: 45px; line-height: 1.8; padding: 8px 10px 8px 24px; overflow: visible; background-size: 100% 100%; }
  #main .box1, #main .box2 { width: 100%; }
  #main, #sub { overflow-wrap: anywhere; }
  #main img, #sub img, #main video { max-width: 100%; height: auto; }
  #main iframe, #main embed, #main object { max-width: 100%; }
  #main iframe[src*="google.com/maps"] { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  #main iframe[src*="docs.google.com/forms"] { width: 100%; }
  .ta1 { width: 100%; table-layout: fixed; }
  .ta1 th { width: 32%; }
  .ta1 td { width: auto; }
  .ta1 th, .ta1 td { padding: 8px; overflow-wrap: anywhere; }
  .research-figures { gap: 16px; }
  .research-figures figure { width: auto; min-width: 0; flex: 1 1 0; }
  #main .research-figures img { width: 100%; height: auto; aspect-ratio: 327 / 245; object-fit: contain; }
  #main .research-media figure { width: 640px; max-width: 100%; }
  #main .research-media img { width: 100%; height: auto; }
  #mainimg { height: auto; aspect-ratio: 966 / 290; }
  #slide_image, #slide_image2 { width: 100%; height: 100%; object-fit: contain; }
  #main .new { width: 100%; padding-left: 8px; padding-right: 8px; }
  #main .new dl { width: 100%; }
  #main .new dt { width: 100px; }
  #main .new dd { width: calc(100% - 100px); min-width: 0; }
  ul.submenu li a, ul.submenu li a:hover, #sub .box1 ul.submenu li a, #sub .box1 ul.submenu li a:hover { width: 100%; }
  ul.submenu li a { padding-top: 8px; padding-bottom: 8px; }
  input:not([type="hidden"]), select, textarea { max-width: 100%; }
}
@media screen and (max-width: 800px) {
  ul#menu { grid-template-columns: repeat(3, minmax(0, 1fr)); background-repeat: repeat; }
  ul#menu li a { background-image: url(../images/menu_bg.gif); background-repeat: repeat-x; border-bottom: 1px solid #d2d2d2; }
  ul#menu li:nth-child(3n) a { border-right: 0; }
  #contents { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "sub" "footer"; gap: 0; }
  #main, #c1 #main { padding-top: 20px; padding-bottom: 20px; }
  #sub { padding-top: 0; padding-bottom: 20px; }
  #main .box1 p.img, #main .box2 p.img { float: none; margin-bottom: 10px; }
  #main .box1 h3, #main .box1 p.text, #main .box2 h3, #main .box2 p.text { margin-left: 0; }
}
@media screen and (max-width: 560px) {
  .research-figures { flex-direction: column; gap: 14px; }
  .research-figures figure { flex: none; width: 100%; }
  #main .research-figures img { max-height: 300px; }
  #main .new dt, #main .new dd { float: none; width: 100%; }
  #main .new dd { padding-bottom: 8px; }
  .ta1 th { width: 34%; }
  .ta1 th, .ta1 td { padding: 6px; }
  #main p { padding-right: 4px; padding-left: 4px; }
}
@media screen and (max-width: 420px) {
  ul#menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul#menu li:nth-child(3n) a { border-right: 1px solid #d2d2d2; }
  ul#menu li:nth-child(2n) a { border-right: 0; }
  #contents { margin-right: 10px; margin-left: 10px; }
}