/* akatombo-oita.jp temporary site (balanced UI) */
:root{
  --primary: #b83a3a;        /* 落ち着いた赤 */
  --primary-dark: #922d2d;
  --accent: #f6efe7;         /* 温かみベージュ */
  --bg: #ffffff;
  --bg-soft: #f8f8f8;
  --text: #333333;
  --border: #e3e3e3;

  --container: 1200px;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.05);
  --shadow-strong: 0 12px 32px rgba(0,0,0,0.10);
  --focus: 0 0 0 4px rgba(184,58,58,0.18);
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size:16px;
  line-height:1.8;
  letter-spacing:0.02em;
  color:var(--text);
  background:var(--bg);
}

a{color:var(--primary); text-underline-offset: 3px;}
a:hover{color:var(--primary-dark)}
img{max-width:100%; height:auto}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 14px; background:#111; color:#fff;
  border-radius:10px; z-index:9999;
}
:focus-visible{outline:none; box-shadow: var(--focus); border-radius: 10px}

/* header */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.03);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 12px 0;
}
.brand{
  flex: 0 0 auto;
  min-width: 0;
}
.brand-link{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color:inherit;
}
.brand-logo{
  height: 36px;
  width: auto;
  border-radius: 0;
}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-name{font-weight:900; font-size:1.2rem; letter-spacing:0.04em}
.brand-sub{display:none}

/* nav */
.nav-toggle{
  margin-left:auto;
  min-height:44px;
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  line-height:1;
  border:1px solid var(--border, rgba(0,0,0,.18));
  background:#fff;
  border-radius: 999px;
  cursor:pointer;
}
.nav-toggle::before{
  content:"";
  width:18px;
  height:12px;
  background:
    linear-gradient(currentColor 0 0) top,
    linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) bottom;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}
.global-nav{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  justify-content:flex-end;
}
.global-nav ul{
  display:flex;
  gap: 10px;
  list-style:none;
  padding:0;
  margin:0;
  align-items:center;
  flex-wrap:nowrap;
}
.global-nav a{
  position: relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding: 8px 8px;
  text-decoration:none;
  color:inherit;
  border-radius: 12px;
  white-space: nowrap;
  font-size: 0.95rem;
  transition: background-color .3s ease, color .3s ease;
}
.global-nav a::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.global-nav a:hover{background: var(--accent)}
.global-nav a:hover::after{transform: scaleX(1)}

/* main */
.site-main{
  padding: 28px 0 56px;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}

/* MV (index) */
.mv{
  position: relative;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow-strong);
  background:#000;
  margin-bottom: 24px;
}
.mv-media img{
  display:block;
  width:100%;
  height: clamp(240px, 32vw, 360px);
  object-fit: cover;
}
.mv-overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 6px;
  padding: 18px 16px;
  color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55));
}
.mv-title{
  margin:0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.mv-sub{
  margin:0;
  max-width: 60ch;
  opacity: 0.95;
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* buttons / cards */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding: 10px 16px;
  border-radius: 24px;
  text-decoration:none;
  font-weight: 900;
  border:1px solid transparent;
  transition: background-color .3s ease, transform .2s ease;
}
.btn-primary{background: var(--primary); color:#fff}
.btn-primary:hover{background: var(--primary-dark); transform: translateY(-1px)}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
}

/* vacancy block */
.vacancy{margin: 18px 0 26px}
.vacancy-inner{padding: 16px 16px}
.vacancy-head{display:flex; flex-wrap:wrap; gap: 8px 14px; align-items:baseline; justify-content:space-between}
.vacancy-title{margin:0; font-size: 20px; font-weight: 900}
.vacancy-date{margin:0; color:#666}
.vacancy-body{margin:10px 0 0}
.vacancy-body strong{color: var(--primary-dark)}
.vacancy-note{margin:8px 0 0; color:#555}
.vacancy-cta{margin: 12px 0 0}

.section-heading{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  padding: 6px 0 8px 14px;
  border-left: 5px solid var(--primary);
  border-bottom: 1px solid var(--border);
}

/* legacy content */
.legacy-content{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.legacy-content h1,
.legacy-content h2,
.legacy-content h3{
  scroll-margin-top: 88px; /* sticky header offset */
}
.legacy-content h1{
  font-size: 32px;
  line-height: 1.35;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.06em;
}
.legacy-content h2{
  font-size: 24px;
  line-height: 1.45;
  margin: 30px 0 12px;
  padding: 10px 12px 10px 14px;
  border-left: 5px solid var(--primary);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--accent), rgba(246,239,231,0));
  border-radius: 12px;
}
.legacy-content h3{
  font-size: 20px;
  line-height: 1.5;
  margin: 22px 0 10px;
  padding-left: 18px;
  position: relative;
}
.legacy-content h3::before{
  content:"";
  position:absolute;
  left: 2px;
  top: 0.8em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(184,58,58,0.12);
  transform: translateY(-50%);
}
.legacy-content p{margin: 12px 0}
.legacy-content p + p{margin-top: 14px}
.legacy-content ul,
.legacy-content ol{margin: 12px 0; padding-left: 1.25em}
.legacy-content li{margin: 6px 0}
.legacy-content hr{border:none; border-top:1px solid var(--border); margin: 22px 0}

/* treat image headings as decoration on home */
#hmcontent .tsb1{display:none}

/* treat legacy image headings as decoration (do not rely on them as headings) */
.legacy-content #alhd{display:none}
.legacy-content .tsb1{display:none}

/* home cards: make the legacy table look like cards */
#hmcontent .topcm .table-scroll{border:none; border-radius:0; overflow: visible}
#hmcontent .topcm table{width:100%; border-collapse:separate; border-spacing:0}
#hmcontent .topcm tr{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
#hmcontent .topcm td{display:block}
#hmcontent .topcm td[style*="width: 14px"]{display:none}
#hmcontent .topcm a{display:block}
#hmcontent .topcm img{
  width:100%;
  height:auto;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
#hmcontent .topcm a:hover img{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}

/* tables */
.legacy-content .table-scroll{overflow:auto; border:1px solid var(--border); border-radius:12px}
.legacy-content table{border-collapse:collapse; width:100%; max-width:100%}
.legacy-content table td,.legacy-content table th{border:1px solid var(--border); padding:12px; vertical-align:top}
.legacy-content table thead th{background: var(--accent)}

/* footer */
.site-footer{
  border-top:1px solid var(--border);
  padding: 28px 0 72px;
  background: var(--bg-soft);
}
.footer-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px}
.footer-info{
  border:1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  box-shadow: var(--shadow);
  padding: 14px 14px;
}
.footer-title{margin:0; font-weight:900}
.footer-address,.footer-tel{margin: 6px 0 0; color:#555}
.footer-tel a{font-weight:900; color: var(--primary-dark); text-decoration:none}
.footer-links{margin-top:6px; color:#555}
.footer-links a{color:inherit}
.footer-copy{grid-column: 1 / -1; margin: 8px 0 0; text-align:center; color:#666; font-size:.95rem}

/* responsive */
@media (max-width: 1280px){
  .global-nav ul{gap: 6px}
  .global-nav a{padding: 8px 6px; font-size:0.9rem}
}

@media (max-width: 1024px){
  .mv-title{font-size: 22px}

  .global-nav{
    position: fixed;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.56);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 60;
  }
  .global-nav ul{
    width:100%;
    max-width:520px;
    max-height: calc(100vh - 48px);
    overflow:auto;
    background:#fff;
    border-radius: 16px;
    box-shadow: var(--shadow-strong, 0 12px 30px rgba(0,0,0,.18));
    padding: 24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap: 8px;
  }
  .global-nav a{
    width:100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size:1rem;
  }
  .global-nav a::after{display:none}

  body.is-menu-open{
    overflow:hidden;
  }
  body.is-menu-open .global-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.is-menu-open .nav-toggle{
    position:relative;
    z-index:70;
  }

  #hmcontent .topcm tr{grid-template-columns: 1fr}

  .footer-inner{grid-template-columns: 1fr}
}

@media (min-width: 1025px){
  .nav-toggle{display:none}
}