/* RESPONSIVE SHELL */
#main, #openwin {box-sizing:border-box; width:calc(100% - 32px); max-width:955px; height:auto;}
#openwin {max-width:620px;}
#main img, #openwin img {max-width:100%; height:auto; box-sizing:border-box;}
#main #header {height:auto; min-height:80px; display:flow-root;}
#footer {box-sizing:border-box; width:calc(100% - 32px); max-width:955px; margin-left:auto; margin-right:auto; display:flow-root; overflow-wrap:anywhere;}
#main #footer, #openwin #footer {width:100%;}
#main #content {display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px;}
#main #content > #cont-left {box-sizing:border-box; flex:0 0 204px; min-width:0;}
#main #content > #cont-cent {float:none; flex:1 1 0%; min-width:0; width:auto !important; margin:0 !important;}
#main #content > #cont-right {float:none; flex:0 0 200px; min-width:0;}
#main #content > .responsive-empty {display:none;}
#main #content.responsive-three-columns > #cont-cent {flex-basis:calc(100% - 448px);}
#main #content, #main #head_txt, #openwin, .responsive-document {overflow-wrap:anywhere;}
#main #content > :not(#cont-left):not(#cont-cent):not(#cont-right) {max-width:100%; min-width:0;}
#main #home-menu {width:100% !important;}
#main input, #main select, #main textarea, #openwin input, #openwin select, #openwin textarea {box-sizing:border-box; max-width:100%;}
#main #cont-cent p, #main #content > p, #openwin p {line-height:1.6;}
#main #cont-cent, #main #content.responsive-article, #openwin {font-size:16px;}
#main h1, #openwin h1 {font-size:28px; line-height:1.25;}
#main h2, #openwin h2 {line-height:1.3;}
#main #home-menu {font-size:14px;}
#main #home-menu h2 {font-size:16px;}
#main #home-menu li {line-height:1.5;}
#main #home-menu ul.menu-2 {margin-left:0;}
#main #head_txt {display:flow-root;}
#main #content.responsive-article {display:block;}
#main #content.responsive-article h1 {clear:both;}
#main :focus-visible, #openwin :focus-visible, .responsive-document :focus-visible {outline:2px solid #1693bf; outline-offset:3px;}

/* WIDE CONTENT STAYS SCROLLABLE INSIDE THE PAGE */
.responsive-table {box-sizing:border-box; width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; margin:16px 0;}
.responsive-table > table {margin:0; min-width:100%; max-width:none; overflow-wrap:normal;}
.responsive-table:focus-visible {outline:2px solid #1693bf; outline-offset:2px;}
#main iframe, #main video, #main embed, #main object, #openwin iframe, #openwin video {max-width:100%;}
#main iframe.responsive-video, #main video.responsive-video {width:100%; height:auto; aspect-ratio:16 / 9;}
#main pre, #openwin pre {max-width:100%; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere;}
.responsive-fixed-block {box-sizing:border-box; max-width:100% !important;}

/* SECTION MENU: THE BUTTON IS ADDED ONLY WHEN A SIDEBAR EXISTS */
.responsive-menu-toggle {display:none;}

@media screen and (max-width:987px) {
  #main #images {height:auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(100px, auto)); gap:2px;}
  #main #news_site {grid-column:1; grid-row:1 / 3; width:auto; height:100%;}
  #main #news_site img {display:block; width:100%; height:100%; object-fit:cover;}
  #main #img_red, #main #img_blue, #main #img_yellow, #main #img_green {float:none; width:auto; height:auto; min-width:0; margin:0; background-position:right center; background-size:cover;}
  #main #img_red {grid-column:2; grid-row:1;}
  #main #img_yellow {grid-column:3; grid-row:1;}
  #main #img_blue {grid-column:2; grid-row:2;}
  #main #img_green {grid-column:3; grid-row:2;}
  #main #images > br {display:none;}
  #main #images p a {box-sizing:border-box; min-height:100px; padding:24px 12px; font-size:14px; line-height:1.3; background-color:rgba(0, 0, 0, 0.12);}
  #main #home-menu {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; height:auto;}
  #main #home-menu tbody, #main #home-menu tr {display:contents;}
  #main #home-menu col, #main #home-menu colgroup, #main #home-menu td:not(.responsive-home-cell) {display:none;}
  #main #home-menu td.responsive-home-cell {display:block; box-sizing:border-box; min-width:0; width:auto; height:auto !important; padding:20px !important; border:2px solid #4ea1c3 !important;}
  #main #home-menu td.responsive-home-bases {border-color:#d76747 !important;}
  #main #home-menu td.responsive-home-general {border-color:#f2b05a !important;}
  #main #home-menu td.responsive-home-omni {grid-column:1 / -1; border-color:#859451 !important;}
  #main #home-menu h2 {margin:0 0 16px;}
  #main #home-menu .responsive-home-omni > div {width:50%; box-sizing:border-box; padding-right:12px;}
  #main #content > #cont-right {flex-basis:100%; width:100%;}
  #main #mailform > div {float:none !important; width:100% !important; box-sizing:border-box;}
  #main #mailform input.txt, #main #mailform select, #main #mailform textarea {box-sizing:border-box; width:100% !important; max-width:100%;}
}

@media screen and (max-width:800px) {
  #main #content {gap:16px;}
  #main #content > #cont-left {flex:0 0 100%; width:100%; padding:0;}
  #main #content > #cont-cent, #main #content.responsive-three-columns > #cont-cent {flex:0 0 100%; width:100%;}
  .responsive-menu-toggle {display:block; box-sizing:border-box; width:100%; padding:14px 16px; border:0; color:#333; background:#faf9f8; font:bold 16px Verdana, Arial, Helvetica, sans-serif; text-align:left; cursor:pointer;}
  .responsive-menu-toggle::after {content:'+'; float:right; margin-left:12px;}
  .responsive-menu-toggle[aria-expanded='true']::after {content:'−';}
  #cont-left.responsive-menu-collapsed > :not(.responsive-menu-toggle) {display:none !important;}
  #main #cont-left h2 {margin:16px; font-size:18px;}
  #main #cont-left ul.menu-2 {margin:0 16px;}
  #main #cont-left .menu-2 li {padding-bottom:0;}
  #main #cont-left a.menu-2, #main #cont-left a.menu-3 {display:block; padding:10px 0; line-height:1.5; font-size:14px;}
  #main #cont-left ul.submenu {float:none; width:auto; padding:0 0 8px;}
  #main #cont-left .submenu li {font-size:14px;}
  #main #home-menu {grid-template-columns:repeat(2, minmax(0, 1fr));}
  #main #home-menu td.responsive-home-general {grid-column:1 / -1;}
  #main #mailform > div {float:none !important; width:100% !important; box-sizing:border-box;}
  #main #mailform input:not([type='checkbox']):not([type='radio']):not([type='hidden']), #main #mailform select, #main #mailform textarea {box-sizing:border-box; max-width:100%; font-size:16px;}
  #main #mailform input.txt, #main #mailform select, #main #mailform textarea {width:100% !important;}
  #main #mailform input.txt, #main #mailform select {min-height:44px;}
  #main #mailform textarea {min-height:120px;}
  #main #mailform .submit {min-height:44px; width:auto; padding:10px 16px; margin-bottom:12px;}
  #main #mailform label {line-height:1.6;}
  #main #mailform p {margin-bottom:12px;}
  #main #content p[align='justify'], #openwin p[align='justify'] {text-align:left;}
  #main .f9, #main .f10, #main .f11, #main .f12 {font-size:13px;}
  #main .btn {min-height:44px;}
}

@media screen and (max-width:600px) {
  #main #header {display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 0 16px;}
  #main #search {order:3; width:100%; margin:0;}
  #main #search:empty {display:none;}
  #main #logo {float:none; width:100%; margin:0;}
  #main #logo img {display:block; width:auto; max-width:100%;}
  #main #regBtn {float:none; width:100%; margin:0; text-align:left;}
  #main #regBtn a {display:inline-block; min-height:44px;}
  #main #images {grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:auto; margin-bottom:20px;}
  #main #news_site {display:none;}
  #main #img_red {grid-column:1; grid-row:1;}
  #main #img_yellow {grid-column:2; grid-row:1;}
  #main #img_blue {grid-column:1; grid-row:2;}
  #main #img_green {grid-column:2; grid-row:2;}
  #main #images p a {min-height:112px; padding:24px 12px; background-color:rgba(0, 0, 0, 0.22);}
  #main #home-menu {grid-template-columns:minmax(0, 1fr);}
  #main #home-menu td.responsive-home-general {grid-column:auto;}
  #main #home-menu .responsive-home-omni > div {float:none !important; width:100%; padding:0;}
  #main #home-menu .responsive-home-omni > div + div {margin-top:16px;}
  #main #home-menu li a {display:inline-block; padding:5px 0;}
  #main h1, #openwin h1 {font-size:26px;}
  #footer #address, #footer #nav-down {float:none; width:100%; text-align:left;}
  #footer #address p, #footer #nav-down p {padding:12px 16px; margin:0;}
  #main #footban {height:auto; display:flex; flex-wrap:wrap; gap:12px;}
  #main #footban img {margin:0;}
  #main #head_txt #logo {width:100%;}
  #main #close_print {float:none !important; display:flex; gap:20px; margin:12px 0 !important;}
  #main #close_print img {float:none !important; margin:0 !important;}
  #main #cont-cent > p > img, #main #content.responsive-article p > img {max-width:100%;}
  #main ul.marker {display:flex; flex-wrap:wrap; height:auto; background:none;}
  #main ul.marker li {float:none;}
  #main a.marker {float:none; display:block; padding:10px; font-size:13px;}
  .fancybox-wrap {max-width:calc(100vw - 24px);}
  .fancybox-inner {max-width:100%; overflow-wrap:anywhere;}
  .fancybox-inner .inline {max-width:100%;}
  .responsive-document {margin:16px; font-size:16px; line-height:1.6;}
  .responsive-document img {max-width:100%; height:auto;}
  .responsive-document > table, .responsive-document > table table {box-sizing:border-box; width:100% !important; max-width:100%; table-layout:fixed;}
  .responsive-document > table td {overflow-wrap:anywhere;}
  .responsive-document > table > tbody > tr > td {padding-left:12px !important; padding-right:12px !important;}
}

@media (prefers-reduced-motion:reduce) {
  #main .slide {transition:none;}
}