/* Compatibility and small-screen fixes, school maintenance 2026-10-26. */
a:focus-visible, button:focus-visible, input:focus-visible {outline:3px solid #155595;outline-offset:3px;}
.headernav .nav .menu-item:focus-within > .sub-menu {display:block;}
@media (max-width:1232px) {
  #header .container, .headernav .nav, #body .container, #footer .container,
  #footer .quitenav .nav, .mypage {width:calc(100% - 32px);max-width:1200px;}
  #banner, #footer, #body .ad {min-width:0;}
  #header .logo {width:28%;}
  #header .info {width:47%;font-size:15px;}
  #header .search {width:22%;}
  #header .search .form {width:100%;display:flex;}
  #header .search .form input[type=text] {width:calc(100% - 40px);min-width:0;}
  #body .one .content .left {width:44%;}
  #body .one .content .right {margin-left:48%;}
  #footer .footerinfo .left {max-width:calc(100% - 280px);}
  .mypage .left {width:220px;}
  .mypage .right {margin-left:250px;min-width:0;}
  .mypage .right .content {overflow-wrap:anywhere;}
  .mypage .right .content table {max-width:100%;}
}
@media (max-width:800px) {
  #header {padding:22px 0;}
  #header .logo {float:none;width:280px;max-width:100%;}
  #header .info {float:none;width:100%;padding:12px 0;font-size:14px;}
  #header .search {position:static;width:100%;max-width:360px;}
  #header .search .form {float:none;}
  #header .search .form input[type=text] {height:40px;font-size:16px;}
  #header .search .form button {width:40px;min-height:40px;}
  .headernav .nav > ul {display:flex;flex-wrap:wrap;}
  .headernav .nav > ul > .menu-item {float:none;width:20%;}
  .headernav .nav > ul > .menu-item > a {display:block;line-height:44px;}
  #banner {margin-bottom:24px;}
  #body .one .content .left, #body .one .content .right,
  #body .three .content .left, #body .three .content .right {float:none;width:100%;margin-left:0;padding:0;}
  #body .one .content .left {margin-bottom:24px;}
  #body .three .content .right {margin-top:30px;}
  #body .title .name {font-size:26px;}
  #body .more {font-size:14px;width:auto;max-width:155px;padding:4px 10px;}
  #body .three {padding-top:18px;}
  #body .three .left .newlisttitlecon, #body .three .right .newlisttitlecon {padding-left:0;}
  #body .one .content .right .newlist, #body .three .left .newlist, #body .three .right .newlist {padding:0;}
  #body .one .content .right .newlist .item .itemtitle,
  #body .three .left .newlist .item .itemtitle, #body .three .right .newlist .item .itemtitle {white-space:normal;line-height:24px;}
  #body .two .product-list .item {width:50%;padding:8px;}
  #body .two .product-list .item .imgcon {height:auto;aspect-ratio:16/9;}
  #body .two .product-list .item .imgcon img {height:100%;object-fit:cover;}
  #body .ad .info {width:90%;left:5%;margin-left:0;top:20%;}
  #body .ad .info1 {font-size:24px;margin-bottom:10px;}
  #body .ad .info2 {font-size:14px;}
  #footer .quitenav .nav ul {display:flex;flex-wrap:wrap;}
  #footer .quitenav .nav .menu-item {float:none;width:20%;}
  #footer .footerinfo .left {float:none;width:100%;max-width:none;}
  #footer .qrcode {float:none;margin:24px 0 0;width:250px;max-width:100%;}
  #footer .footnav #menu-footer-menu > li {margin:0 15px 12px 0;}
  #footer .beian {overflow-wrap:anywhere;}
  .mypage .left, .mypage .right {float:none;width:100%;margin-left:0;}
  .mypage .left {margin-bottom:24px;}
  .mypage .left .address {display:none;}
  .mypage .left .infonav {margin-bottom:0;}
  .mypage .right .content {line-height:1.9;}
  .newlist .content .newitem .time {float:none;display:block;color:#666;}
}
@media (max-width:480px) {
  .headernav .nav > ul > .menu-item {width:33.333%;}
  #footer .quitenav .nav .menu-item {width:33.333%;}
  #body .more {max-width:145px;}
  #body .title .name {font-size:24px;}
  #body .ad .info1 {font-size:18px;}
}

@media (max-width:1232px) {
  #header .search .form form {display:flex;width:100%;margin:0;}
  #header .search .form input[type=text] {flex:1;width:0;padding:0 8px;}
  #header .search .form button {flex:0 0 40px;padding:8px;}
}
@media (max-width:800px) {
  .headernav .nav #menu-header-menu > li {padding:0;}
  .headernav .nav .menu-item .sub-menu {top:44px;}
  .headernav .nav #menu-header-menu > li:focus-within .sub-menu {height:auto;min-height:44px;background:#dfdfdf;}
}

/* QR position and article image indentation. */
@media(max-width:800px){#footer .qrcode{position:static;left:auto;bottom:auto;} .mypage .right .content img{display:block;margin-left:auto;margin-right:auto;}}