/* Small compatibility layer for GoBlog's dynamic content. The layout itself
   comes from the archived Shizuoka Police stylesheets. */
#tab button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  font-weight: bold;
  height: 100%;
  padding: 12px 18px;
  width: 100%;
}

#tab li.active button {
  color: #003d79;
}

.paging button {
  background: #fff;
  border: 2px solid #14508b;
  border-radius: 50%;
  cursor: pointer;
  height: 12px;
  padding: 0;
  width: 12px;
}

.image_reel .main[hidden],
#topics1[hidden],
#topics2[hidden] {
  display: none !important;
}

.police-content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1165px;
  min-height: 50vh;
  padding: 35px 24px 60px;
}

.police-content h1 {
  background: #073b76;
  border-left: 9px solid #f0cf35;
  color: #fff;
  font-size: 1.7rem;
  margin: 0 0 28px;
  padding: 14px 18px;
}

.police-content h2,
.police-content h3 {
  border-bottom: 3px solid #1b5790;
  color: #143c65;
  margin-top: 28px;
  padding-bottom: 8px;
}

.police-content a {
  color: #064f99;
  text-decoration: underline;
}

.police-content img,
.police-content video {
  height: auto;
  max-width: 100%;
}

.police-content .post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.police-content .post-list li {
  border-bottom: 1px dotted #8d8d8d;
  padding: 16px 8px;
}

.police-content .post-date {
  color: #555;
  display: inline-block;
  margin-right: 18px;
}

.public-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

.public-form input,
.public-form textarea {
  border: 1px solid #777;
  box-sizing: border-box;
  max-width: 620px;
  padding: 9px;
  width: 100%;
}

.public-form button {
  background: #073b76;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 28px;
}

.honeypot {
  display: none;
}

/* =========================================================================
   Mobile / Responsive
   ========================================================================= */
@media screen and (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* --- Global width reset ------------------------------------------------ */
  html,
  body,
  #wrapbg,
  #wrap,
  #header,
  #gnavi,
  #toppagebody,
  #content3,
  #topimg,
  #content3 > .container,
  #rightbox,
  #leftbox,
  #topics,
  #tmenubg,
  #tmenu,
  #tmenubox,
  #topnews,
  #incident,
  #topmenu,
  #policelist,
  #pickup,
  #scroll_a,
  .main_view,
  .window,
  .image_reel,
  #sad,
  #guide,
  #footer,
  #footernavi,
  #footerbg,
  #footernavibg,
  #topfooterbg {
    box-sizing: border-box;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .pconly {
    display: none !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* --- Header ------------------------------------------------------------ */
  #topheaderbg {
    min-width: 0 !important;
  }

  #header {
    flex-direction: column !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 28px 14px 14px !important;
  }

  #tlogo,
  #tlogo h1 {
    float: none !important;
    margin: 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 240px !important;
    text-align: center;
  }

  #tlogo img {
    height: auto;
    max-width: 100%;
  }

  #util {
    display: none !important;
  }

  /* --- Navigation -------------------------------------------------------- */
  #topgnavibg {
    min-width: 0 !important;
  }

  #gnavi ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 !important;
    padding: 0 !important;
  }

  #gnavi li {
    border-bottom: 1px solid #83b7dc;
    box-sizing: border-box;
    float: none !important;
    width: auto !important;
    font-size: 100% !important;
    line-height: 1.3 !important;
    border-left: none !important;
    border-right: none !important;
  }

  #gnavi li:nth-child(odd) {
    border-right: 1px solid #83b7dc !important;
  }

  #gnavi a {
    box-sizing: border-box;
    height: auto !important;
    min-height: 48px;
    padding: 12px 8px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Top page body ----------------------------------------------------- */
  #toppagebody {
    padding: 10px 8px !important;
    background-size: cover !important;
  }

  /* --- Top images -------------------------------------------------------- */
  #topimg {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    padding: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }

  #topimg p {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #topimg p:first-child {
    margin-right: 0 !important;
  }

  #topimg img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  /* --- Two-column → single-column stack ---------------------------------- */
  #content3 > .container {
    flex-direction: column !important;
    padding: 10px 0 !important;
  }

  #rightbox {
    width: 100% !important;
    padding-top: 14px !important;
    order: 1;
  }

  #leftbox {
    width: 100% !important;
    padding-top: 14px !important;
    order: 2;
  }

  /* --- Tabs --------------------------------------------------------------- */
  #tab {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  #tab li {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
  }

  #tab li:first-child {
    margin: 0 !important;
  }

  #tab button {
    font-size: 14px;
    padding: 10px 8px;
  }

  /* --- Topics / News box ------------------------------------------------- */
  #tmenu {
    padding: 18px 14px 14px !important;
  }

  #tmenu ul li {
    padding-left: 20px !important;
    font-size: 100% !important;
  }

  #tmenu ul li .date {
    display: block !important;
    width: auto !important;
    margin-bottom: 2px;
    font-size: 90%;
    color: #555;
  }

  #tmenu ul li .newsli {
    display: block !important;
    width: 100% !important;
  }

  /* --- Incident / event area --------------------------------------------- */
  #topnews {
    flex-wrap: wrap !important;
  }

  #incident {
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  #incident ul {
    padding-left: 20px !important;
    background: none !important;
  }

  #incident h2 {
    padding-left: 15px !important;
    background-image: none !important;
    font-size: 110% !important;
  }

  /* --- Banner images (generic) ------------------------------------------- */
  #topnews .bannerimg ul,
  #topmenu .flexstyle1,
  #policelist .flexstyle3,
  .bannerimg ul,
  #sad ul {
    display: grid !important;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0 !important;
  }

  .bannerimg li,
  #topmenu li,
  #policelist li,
  #sad li {
    box-sizing: border-box;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
  }

  .bannerimg img,
  #topmenu img,
  #sad img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  /* --- Top menu icons ---------------------------------------------------- */
  #topmenu {
    padding: 14px 10px 6px !important;
    margin-bottom: 18px !important;
  }

  #topmenu .flexstyle1 li a {
    padding: 16px 4px !important;
    font-size: 105% !important;
  }

  #topmenu .flexstyle1 li a img {
    margin-bottom: 10px !important;
    max-width: 60px;
  }

  /* --- Police station list ----------------------------------------------- */
  #policelist {
    margin-bottom: 18px !important;
  }

  #policelist .flexstyle3 li {
    min-height: 44px !important;
    font-size: 100% !important;
  }

  #policelist .flexstyle3 li a {
    padding: 8px !important;
  }

  /* --- Carousel / Slideshow ---------------------------------------------- */
  #toppagebody #pickup {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  #toppagebody #pickup #scroll_a {
    margin-bottom: 0 !important;
  }

  #toppagebody .main_view,
  #toppagebody #scroll_a.main_view {
    width: 100% !important;
    height: auto !important;
  }

  #toppagebody #pickup .window,
  #toppagebody #scroll_a .window {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #toppagebody #pickup .window::before,
  #toppagebody #pickup .window::after,
  #toppagebody #scroll_a .window::before,
  #toppagebody #scroll_a .window::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    padding: 0 !important;
  }

  #toppagebody #pickup .main,
  #toppagebody #scroll_a .main {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #toppagebody #pickup .main p.photoleft,
  #toppagebody #scroll_a .main p.photoleft,
  .image_reel .main,
  .image_reel .photoleft {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .image_reel img {
    height: auto !important;
    width: 100% !important;
  }

  #toppagebody #scroll_a p.btn {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 8px;
    width: auto !important;
    display: flex !important;
    gap: 4px;
  }

  #toppagebody #scroll_a p.btn button {
    flex: 1;
    text-align: center !important;
    padding-left: 30px !important;
  }

  #toppagebody #scroll_a .paging {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    display: block !important;
    margin-top: 8px;
    text-align: center;
  }

  #toppagebody #scroll_a .paging ul {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
  }

  #toppagebody #scroll_a .paging li {
    float: none !important;
    margin: 0 !important;
  }

  #scroll_a .more {
    font-size: 75% !important;
    padding: 3px 6px !important;
    right: 6px !important;
    bottom: 6px !important;
  }

  /* --- Left sidebar banners ---------------------------------------------- */
  #leftbox .bannerimg {
    margin-bottom: 14px !important;
    padding: 10px !important;
  }

  #leftbox .bannerimg ul {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 0 !important;
  }

  #leftbox .bannerimg ul li {
    margin: 0 !important;
    width: auto !important;
  }

  #leftbox .bannerimg ul li img {
    width: 100%;
    height: auto;
  }

  /* --- Footer ------------------------------------------------------------ */
  #footerbg,
  #footernavibg,
  #topfooterbg {
    min-width: 0 !important;
  }

  #footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 14px !important;
    gap: 14px;
  }

  #footer h2 {
    width: 100% !important;
    font-size: 130% !important;
    margin-bottom: 0 !important;
  }

  #add {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding: 14px 0 0 0 !important;
  }

  #addlink {
    width: 100% !important;
    margin-top: 10px;
  }

  #addlink img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  #footernavi {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 14px !important;
    gap: 10px;
  }

  #footernavi ul {
    text-align: left !important;
    padding: 10px 0 0 !important;
  }

  #footernavi ul li {
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  #copy {
    text-align: left !important;
  }

  /* --- Ad banner area (#sad) --------------------------------------------- */
  #sad {
    min-width: 0 !important;
    padding: 10px !important;
  }

  #sad h2 {
    float: none !important;
    margin: 0 0 6px 0 !important;
  }

  #sad p {
    float: none !important;
    padding: 0 0 6px !important;
  }

  #sad ul {
    grid-template-columns: 1fr !important;
  }

  #sad ul li img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* --- Guide (back to top) ----------------------------------------------- */
  #guide {
    padding: 14px !important;
    display: flex !important;
    justify-content: center !important;
  }

  #guide p.pagetop {
    width: 100% !important;
    max-width: 300px;
  }

  #guide p.pagetop a {
    padding: 14px 40px 14px 55px !important;
    font-size: 90%;
    text-align: center;
  }

  /* --- Top guide bg ------------------------------------------------------ */
  #topguidebg {
    min-width: 0 !important;
  }

  /* --- Police content pages ---------------------------------------------- */
  .police-content {
    padding: 16px 12px 32px;
  }

  .police-content h1 {
    font-size: 1.2rem;
    padding: 10px 12px;
  }

  .police-content h2,
  .police-content h3 {
    font-size: 1.1rem;
  }

  .police-content .post-list li {
    padding: 12px 4px;
  }

  .police-content .post-date {
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 90%;
  }

  /* --- Search form ------------------------------------------------------- */
  #sitesearch {
    margin-left: 0 !important;
    width: 100%;
  }

  #sitesearch form {
    width: 100%;
  }

  #sitesearch input#key {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1;
  }

  /* --- Tables overflow --------------------------------------------------- */
  .police-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #html table,
  #page-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet: adjust between 768px-1024px where the two-column layout can
   become cramped */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #gnavi ul li {
    font-size: 95% !important;
    line-height: 1.2 !important;
  }

  #gnavi ul li a {
    padding: 14px 4px !important;
    font-size: 12px !important;
  }

  #content3 > .container {
    flex-direction: column !important;
    padding: 20px 10px !important;
  }

  #rightbox {
    width: 100% !important;
  }

  #leftbox {
    width: 100% !important;
    margin-top: 20px;
  }

  #leftbox .bannerimg ul {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  #leftbox .bannerimg ul li {
    margin: 0 !important;
  }

  #leftbox .bannerimg ul li img {
    width: 100%;
    height: auto;
  }

  #toppagebody #pickup {
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto 40px !important;
  }

  #toppagebody .main_view,
  #toppagebody #scroll_a.main_view {
    width: 100% !important;
    height: auto !important;
  }

  #toppagebody #pickup .window,
  #toppagebody #scroll_a .window {
    width: 100% !important;
    height: auto !important;
  }

  #toppagebody #pickup .main,
  #toppagebody #scroll_a .main {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  #toppagebody #scroll_a .main p.photoleft {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  .image_reel img {
    width: 100% !important;
    height: auto !important;
  }

  #footer {
    flex-wrap: wrap !important;
  }

  #add {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 14px !important;
    padding-left: 0 !important;
    margin-top: 14px;
  }
}