@charset "UTF-8";

/* ================================================================
   style.css — ACJ Modern UI Layer
   Design override loaded after existing CSS files.
   ================================================================ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  --c-primary:       #1b5e35;
  --c-primary-dark:  #0e3c1f;
  --c-primary-light: #e8f5ed;
  --c-accent:        #c0392b;
  --c-accent-light:  #fdf2f1;
  --c-text:          #2d3436;
  --c-text-mid:      #636e72;
  --c-link:          #1a6fa5;
  --c-link-hover:    #c0392b;
  --c-bg:            #f4f6f8;
  --c-white:         #ffffff;
  --c-border:        #d8dde2;
  --radius:          5px;
  --trans:           0.2s ease;
}

/* ── Typography & Base ─────────────────────────────────────────── */
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
               "Yu Gothic UI", "Yu Gothic", "Meiryo UI", "Meiryo",
               "MS PGothic", sans-serif;
  background-color: var(--c-bg);
  color: var(--c-text);
}

a:link, a:visited {
  color: var(--c-link);
  transition: color var(--trans);
}

a:hover, a:active {
  color: var(--c-link-hover);
}

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

/* ── Container ─────────────────────────────────────────────────── */
#container {
  background-color: var(--c-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
  max-width: 1060px;
  margin: 0 auto;
}

/* Override rigid min-width from layout.css */
.col1 #container, .col1 #top, .col1 #header,
.col1 #global-nav, .col1 #main, .col1 #main-image,
.col1 #footer, .col1 .copyright,
.col2 #container, .col2 #top, .col2 #header,
.col2 #global-nav, .col2 #main, .col2 #main-image,
.col2 #footer, .col2 .copyright,
.col2r #container, .col2r #top, .col2r #header,
.col2r #global-nav, .col2r #main, .col2r #main-image,
.col2r #footer, .col2r .copyright {
  min-width: 0;
  width: 100%;
}

/* Inner widths — fluid up to 1040px */
.col1 #top-in, .col1 #header-in, .col1 #global-nav-in,
.col1 #main-in, .col1 #footer-in, .col1 .copyright p,
.col2 #top-in, .col2 #header-in, .col2 #global-nav-in,
.col2 #main-in, .col2 #footer-in, .col2 .copyright p,
.col2r #top-in, .col2r #header-in, .col2r #global-nav-in,
.col2r #main-in, .col2r #footer-in, .col2r .copyright p {
  width: 96%;
  max-width: 1040px;
}

/* ── Header ────────────────────────────────────────────────────── */
#header {
  background: linear-gradient(to right, var(--c-primary), var(--c-primary-dark));
  padding: 10px 0;
}

#header #header-title {
  float: none;
  width: 100%;
}

#header h1 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  margin: 3px 0 0;
  padding-left: 4px;
  letter-spacing: 0.04em;
}

.header-logo a          { text-decoration: none; }
.header-logo a:link,
.header-logo a:visited  { color: #fff; }
.header-logo a:hover,
.header-logo a:active   { color: rgba(255, 255, 255, 0.8); }

.header-logo img { max-height: 80px; width: auto; }

/* ── Global Navigation ─────────────────────────────────────────── */
#global-nav {
  background-color: var(--c-primary);
  border-bottom: 3px solid var(--c-accent);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

#global-nav #menu li {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: normal;
}

#global-nav #menu li.first {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

#global-nav #menu li a {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.85em 1.3em;
  font-size: 13.5px;
  transition: background-color var(--trans);
}

#global-nav #menu li a:link,
#global-nav #menu li a:visited {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}

#global-nav #menu li a:hover,
#global-nav #menu li a:active {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

/* Dropdown */
#global-nav #menu li ul {
  background-color: var(--c-primary-dark);
  border-top: 2px solid var(--c-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

#global-nav #menu li ul li {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-right: none;
}

#global-nav #menu li ul li a:link,
#global-nav #menu li ul li a:visited {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  padding: 0.75em 1.2em;
}

#global-nav #menu li ul li a:hover,
#global-nav #menu li ul li a:active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

/* Mobile hamburger */
#global-nav .btn-gnav {
  background-color: var(--c-primary);
  color: #fff;
}

/* ── Main Area ─────────────────────────────────────────────────── */
#main {
  background-color: var(--c-white);
}

#main-in {
  padding-top: 1.2em;
  padding-bottom: 1.5em;
}

/* ── Main Content Typography ───────────────────────────────────── */
#main-contents {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
}

/* H2 */
#main-contents h2 {
  font-size: 18px;
  background: linear-gradient(to right, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 20px 0 14px;
  line-height: 1.4;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* H3 */
#main-contents h3 {
  font-size: 15px;
  background-color: var(--c-accent);
  color: #fff;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 18px 0 12px;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* H4 */
#main-contents h4 {
  font-size: 14px;
  border-left: 4px solid var(--c-primary);
  color: var(--c-text);
  font-weight: bold;
  padding-right: 0;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Heading links */
#main-contents h2 a:link, #main-contents h2 a:visited,
#main-contents h3 a:link, #main-contents h3 a:visited {
  color: #fff;
}

#main-contents h2 a:hover, #main-contents h2 a:active,
#main-contents h3 a:hover, #main-contents h3 a:active {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* Paragraphs */
#main-contents p {
  margin-bottom: 1em;
  color: var(--c-text);
}

/* Lists */
#main-contents ul,
#main-contents ol {
  margin: 0 0.8em 1.2em 1.5em;
}

/* Tables */
#main-contents table {
  border-top: 2px solid var(--c-primary);
  border-left: 2px solid var(--c-primary);
  width: 100%;
  font-size: 14px;
}

#main-contents th {
  background-color: var(--c-primary-light);
  color: var(--c-primary-dark);
  font-weight: bold;
  padding: 10px 14px;
}

#main-contents td {
  padding: 10px 14px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

/* News list */
#main-contents dl.news dt {
  color: var(--c-text-mid);
  font-size: 13px;
}

#main-contents dl.news dd {
  border-bottom: 1px solid var(--c-border);
}

/* Category badge colors */
#main-contents dl.news dd.cat.color01 { background: #3498db; }
#main-contents dl.news dd.cat.color02 { background: #e67e22; }
#main-contents dl.news dd.cat.color03 { background: #27ae60; }

/* Blockquote */
#main-contents blockquote {
  border: 2px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg);
  padding: 12px 16px;
  margin: 12px 0 16px;
  color: var(--c-text-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Inline Tab Menu (ac/index.html #menu2) ───────────────────── */
#menu2 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

#menu2 li {
  float: none;
  padding: 0;
  margin: 0;
}

#menu2 li a {
  display: inline-block;
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  width: auto;
  height: auto;
  font-size: 12px;
  padding: 6px 12px;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color var(--trans), color var(--trans);
}

#menu2 li a:hover {
  background: var(--c-primary);
  color: #fff;
  text-decoration: none;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sub-column {
  font-size: 14px;
}

.sub-column .contents {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
  margin-bottom: 14px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Sidebar heading */
.sub-column h3 {
  background-color: var(--c-primary);
  color: #fff;
  border: none;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.03em;
  margin: 0;
}

.sub-column .contents h3 {
  margin: 0;
  border-radius: 0;
  color: #fff;
}

/* Sidebar menu */
.sub-column .side-menu {
  padding: 4px 0;
  margin: 0;
}

.sub-column .side-menu li a {
  color: var(--c-text);
  padding: 6px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f2f4;
  transition: background-color var(--trans), color var(--trans);
  background-image: none;
  display: block;
}

.sub-column .side-menu li a:link,
.sub-column .side-menu li a:visited {
  color: var(--c-text);
  background-image: none;
}

.sub-column .side-menu li a:active,
.sub-column .side-menu li a:hover {
  background-color: var(--c-primary-light);
  color: var(--c-primary);
  text-decoration: none;
  background-image: none;
}

/* Second level */
.sub-column .side-menu li li a:link,
.sub-column .side-menu li li a:visited {
  color: var(--c-text-mid);
  padding-left: 22px;
  font-size: 12px;
  background-image: none;
}

.sub-column .side-menu li li a:hover,
.sub-column .side-menu li li a:active {
  background-color: var(--c-primary-light);
  background-image: none;
}

/* Third level */
.sub-column .side-menu li li li a:link,
.sub-column .side-menu li li li a:visited {
  color: #888;
  padding-left: 30px;
  font-size: 11px;
  background-image: none;
}

.sub-column .side-menu li li li a:hover,
.sub-column .side-menu li li li a:active {
  background-color: var(--c-primary-light);
  background-image: none;
}

/* Sidebar images */
.sub-column > a img,
#sidebar-in > a img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: var(--radius);
}

/* ── Footer ─────────────────────────────────────────────────────── */
#footer {
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-dark));
  padding: 28px 0 14px;
  font-size: 13px;
}

#footer a:link,
#footer a:visited {
  color: rgba(255, 255, 255, 0.75);
}

#footer a:hover,
#footer a:active {
  color: #fff;
  text-decoration: underline;
}

/* Copyright bar */
.copyright {
  background-color: var(--c-primary-dark);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  padding: 10px 0;
}

/* ── Page Top Button ───────────────────────────────────────────── */
.page-top a:link,
.page-top a:visited {
  background-color: var(--c-primary);
  background-image: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-right: 0;
  transition: background-color var(--trans);
}

.page-top a:hover,
.page-top a:active {
  background-color: var(--c-accent);
  background-image: none;
  color: #fff;
}

/* ── Breadcrumb ────────────────────────────────────────────────── */
span.f08em {
  display: block;
  font-size: 12px;
  padding: 7px 12px 9px;
  color: var(--c-text-mid);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 8px;
  background-color: var(--c-bg);
}

span.f08em a:link,
span.f08em a:visited {
  color: var(--c-link);
}

span.f08em a:hover,
span.f08em a:active {
  color: var(--c-link-hover);
}

/* ── Global: prevent horizontal overflow ──────────────────────── */
html, body {
  overflow-x: hidden;
}

/* ── Global: box-sizing for all elements ─────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Global: responsive images ───────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Tablet (641px – 900px) ───────────────────────────────────── */
@media only screen and (max-width: 900px) {

  /* Unstick nav on small screens (hamburger menu handles it) */
  #global-nav {
    position: relative;
  }

  /* Stack 2-column layout vertically */
  .col2r #main-and-sub,
  .col2 #main-and-sub {
    float: none;
    width: 100%;
  }

  .col2r #sidebar,
  .col2 #sidebar {
    float: none;
    width: 100%;
    border-top: 2px solid var(--c-border);
    padding-top: 16px;
    margin-top: 8px;
  }

  /* Nav items: slightly compact */
  #global-nav #menu li a {
    padding: 0.75em 1em;
    font-size: 13px;
  }

  /* Inner width: more breathing room */
  .col2r #main-in,
  .col2 #main-in,
  .col1 #main-in {
    padding-left: 2%;
    padding-right: 2%;
  }
}

/* ── Mobile (≤640px) ──────────────────────────────────────────── */
@media only screen and (max-width: 640px) {

  /* ── Container ── */
  #container {
    box-shadow: none;
  }

  .col1 #container,
  .col2 #container,
  .col2r #container {
    min-width: 0;
    width: 100%;
  }

  /* ── Header ── */
  #header {
    padding: 8px 0;
  }

  #header h1 {
    font-size: 10px;
  }

  /* ── Global Nav ── */
  /* hamburger button — make it large and tappable */
  #global-nav .btn-gnav {
    font-size: 14px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: 0.05em;
  }

  /* Vertical menu items on mobile */
  #global-nav #global-nav-in #menu li a {
    padding: 14px 16px;          /* large touch target */
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  /* ── Main content ── */
  #main-contents {
    font-size: 14px;
    line-height: 1.75;
  }

  #main-contents h2 {
    font-size: 16px;
    padding: 10px 12px;
    margin: 14px 0 10px;
  }

  #main-contents h3 {
    font-size: 14px;
    padding: 7px 10px;
    margin: 12px 0 8px;
  }

  #main-contents h4 {
    font-size: 13px;
  }

  /* Contents inner padding */
  #main-contents .contents {
    padding-right: 6px;
    padding-left: 6px;
  }

  /* ── Responsive Tables ── */
  /* Outer wrapper: horizontal scroll */
  #main-contents table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 2px solid var(--c-primary);
    border-left: 2px solid var(--c-primary);
  }

  /* Profile / info table: stack th+td vertically */
  #main-contents table.table-style01 th,
  #main-contents table.table-style01 td,
  #main-contents table tr,
  #main-contents table tbody {
    display: block;
    width: 100%;
  }

  #main-contents table th {
    background-color: var(--c-primary-light);
    padding: 6px 12px;
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
  }

  #main-contents table td {
    padding: 8px 12px;
    border-right: none;
    word-break: break-word;
    font-size: 13px;
  }

  /* ── News list ── */
  #main-contents dl.news dt {
    font-size: 12px;
  }

  /* ── Blockquote ── */
  #main-contents blockquote {
    padding: 10px 12px;
    margin: 8px 0 12px;
    font-size: 13px;
  }

  /* ── Tab menu (#menu2) ── */
  #menu2 ul {
    gap: 3px;
  }

  #menu2 li a {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* ── Sidebar ── */
  .sub-column {
    font-size: 13px;
  }

  .sub-column .side-menu li a {
    padding: 9px 12px;    /* tappable */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sub-column .side-menu li li a {
    padding-left: 20px;
    min-height: 40px;
  }

  /* Sidebar images: full width */
  .sub-column > a img,
  #sidebar-in > a img {
    width: 100%;
  }

  /* ── Footer ── */
  #footer {
    font-size: 12px;
    padding: 20px 0 10px;
  }

  /* ── Page top button: full-width strip ── */
  .page-top {
    width: 100%;
    right: 0;
    bottom: 0;
    text-align: center;
  }

  .page-top a:link,
  .page-top a:visited,
  .page-top a:hover,
  .page-top a:active {
    display: block;
    padding: 12px;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background-color: var(--c-primary);
    background-image: none;
    color: #fff;
  }

  /* ── Banner images: center on mobile ── */
  #adbox0 {
    text-align: center;
  }

  #adbox0 a {
    display: inline-block;
    max-width: 100%;
  }

  #adbox0 img {
    width: 100%;
    height: auto;
  }

  /* ── Breadcrumb ── */
  span.f08em {
    font-size: 11px;
    padding: 5px 10px 7px;
  }
}