/* ============================================
   public-site.css — neetech.net 公開ページ共通 (2026-10-24 作り替え)
   色・書体・上の帯・ページ見出しの帯・フッター。
   トップ(index.php)・templates/public_green_header.php・templates/recruit_header.php・content/howto.php から読む。
   ============================================ */

:root{
  /* ロゴの3色(紺 #0d1445・青 #0063fb・水色 #1ad0e0)だけで組む */
  --nt-navy:#0d1445;
  --nt-navy-2:#1a2366;
  --nt-blue:#0063fb;
  --nt-blue-dark:#0050cc;
  --nt-cyan:#1ad0e0;
  --nt-ink:#141a33;
  --nt-muted:#5a6380;
  --nt-line:#dfe4ef;
  --nt-soft:#f3f6fb;

  /* 各ページの CSS が使っている前の名前(緑のなごり)。値は新しい色 */
  --green-dark:var(--nt-navy);
  --green:var(--nt-blue);
  --green-line:#d6deec;
  --green-bg:var(--nt-soft);
  --accent:var(--nt-blue);
  --link:var(--nt-blue);
  --text:var(--nt-ink);
}

body{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--nt-ink);
}
button,input,select,textarea{ font-family:inherit; }

/* ---------- パートナー(制作・開発の方)向けの細い帯 ---------- */
.partner-bar{ background:var(--nt-navy); color:rgba(255,255,255,.78); font-size:13px; line-height:1.4; }
.partner-bar-inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  height:38px;
}
.partner-bar-text{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.partner-bar-text .pb-sp{ display:none; }
.partner-bar-links{ display:flex; align-items:center; gap:6px; }
.partner-bar-links a{ text-decoration:none; font-weight:700; white-space:nowrap; border-radius:999px; }
.partner-bar-links .pb-reg{ background:var(--nt-cyan); color:var(--nt-navy); padding:4px 14px; }
.partner-bar-links .pb-reg:hover{ background:#4fdcea; text-decoration:none; }
.partner-bar-links .pb-login{ color:#fff; padding:4px 10px; }
.partner-bar-links .pb-login:hover{ color:var(--nt-cyan); text-decoration:none; }
@media (max-width:820px){
  .partner-bar{ font-size:12px; }
  .partner-bar-inner{ justify-content:space-between; gap:8px; padding:0 16px; height:40px; }
  .partner-bar-text .pb-pc{ display:none; }
  .partner-bar-text .pb-sp{ display:inline; }
  .partner-bar-links .pb-reg{ padding:4px 12px; }
  .partner-bar-links .pb-login{ padding:4px 6px; }
}
@media (max-width:360px){
  .partner-bar-text{ display:none; }
  .partner-bar-inner{ justify-content:flex-end; }
}

/* ---------- 上の帯 ---------- */
.site-header{
  background:#fff;
  color:var(--nt-ink);
  border-bottom:1px solid var(--nt-line);
  position:relative;
  z-index:20;
}
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  height:72px;
}
.site-header .logo{ margin:0; font-size:0; line-height:1; flex:0 0 auto; }
.site-header .logo a{ display:block; line-height:0; text-decoration:none; }
.site-header .logo-image{
  display:block;
  width:auto;
  height:34px;
  padding:0;
  background:none;
  border-radius:0;
  object-fit:contain;
}
.site-header .header-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
}
.site-header .header-nav a.navlink{
  color:var(--nt-ink);
  font-size:14px;
  font-weight:500;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
}
.site-header .header-nav a.navlink:hover{ color:var(--nt-blue); background:var(--nt-soft); text-decoration:none; }
.site-header .header-cta{
  display:inline-block;
  margin-left:8px;
  background:var(--nt-blue);
  color:#fff !important;
  font-size:14px;
  font-weight:700;
  padding:10px 20px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
}
.site-header .header-cta:hover{ background:var(--nt-blue-dark); text-decoration:none; }

/* スマホのメニュー(details) */
.site-header .header-menu{ display:none; }
.site-header .header-menu summary{
  list-style:none;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:var(--nt-ink);
  border:1px solid var(--nt-line);
  border-radius:999px;
  padding:7px 14px;
}
.site-header .header-menu summary::-webkit-details-marker{ display:none; }
.site-header .header-menu[open] summary{ background:var(--nt-soft); }
.site-header .header-menu-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  border-bottom:1px solid var(--nt-line);
  padding:8px 16px 16px;
}
.site-header .header-menu-panel a{
  display:block;
  padding:12px 4px;
  color:var(--nt-ink);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--nt-soft);
}
.site-header .header-menu-panel a:last-child{ border-bottom:0; }
.site-header .header-menu-panel a:hover{ color:var(--nt-blue); }
.site-header .menu-partner{ margin:8px 0 6px; padding:16px; border-radius:14px; background:var(--nt-soft); }
.site-header .menu-partner-for{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--nt-navy); }
.site-header .menu-partner-btns{ display:flex; gap:8px; }
.site-header .header-menu-panel .menu-partner-btns a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:11px 10px;
  border:0;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.site-header .header-menu-panel .menu-partner-reg{ flex:1 1 auto; background:var(--nt-navy); color:#fff; }
.site-header .header-menu-panel .menu-partner-reg:hover{ background:var(--nt-navy-2); color:#fff; }
.site-header .header-menu-panel .menu-partner-login{ flex:0 0 96px; background:#fff; color:var(--nt-navy); box-shadow:inset 0 0 0 1px var(--nt-navy); }
.site-header .header-menu-panel .menu-partner-login:hover{ background:#fff; color:var(--nt-blue); }

@media (max-width:1080px){
  .site-header .header-nav a.navlink.nav-sub{ display:none; }
}
@media (max-width:820px){
  .site-header .header-inner{ height:60px; padding:0 16px; gap:10px; }
  .site-header .logo-image{ height:26px; }
  .site-header .header-nav a.navlink{ display:none; }
  .site-header .header-cta{ margin-left:0; padding:8px 14px; font-size:13px; }
  .site-header .header-menu{ display:block; }
}

/* ---------- ページ見出しの帯(下のページ) ---------- */
.page-head{
  background:var(--nt-navy);
  border-bottom:0;
  color:#fff;
}
.page-head .wrap,
.page-head > div{ padding-top:36px; padding-bottom:36px; }
.page-head .page-title{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.4;
  color:#fff;
  letter-spacing:.02em;
}
.page-head .breadcrumb{ margin:10px 0 0; font-size:13px; color:rgba(255,255,255,.62); }
.page-head .breadcrumb a{ color:var(--nt-cyan); }
.page-head .page-lead{ margin:10px 0 0; font-size:14px; color:rgba(255,255,255,.75); line-height:1.8; }
@media (max-width:640px){
  .page-head .wrap,
  .page-head > div{ padding-top:26px; padding-bottom:26px; }
  .page-head .page-title{ font-size:22px; }
}

/* ---------- ページの先頭へ ---------- */
.pagetop{ text-align:right; padding:6px 0 18px; }
.pagetop a{ font-size:13px; color:var(--nt-muted); font-weight:500; text-decoration:none; }
.pagetop a:hover{ color:var(--nt-blue); }

/* ---------- フッター ---------- */
.site-footer{
  margin-top:28px;
  padding:56px 0 28px;
  background:var(--nt-navy);
  color:rgba(255,255,255,.72);
  border-top:0;
  font-size:14px;
  line-height:1.7;
}
.site-footer .footer-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(130px,1fr));
  align-items:start;
  gap:32px 32px;
}
.site-footer .foot-logo a{ display:block; line-height:0; width:max-content; max-width:100%; text-decoration:none; }
.site-footer .footer-logo-image{ display:block; width:auto; height:30px; object-fit:contain; }
.site-footer .foot-about{ margin:16px 0 0; font-size:13px; line-height:1.8; color:rgba(255,255,255,.6); }
.site-footer .foot-heading{ margin:0 0 12px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; }
.site-footer .foot-nav{ display:grid; gap:10px; margin:0; }
.site-footer .foot-nav a{ color:rgba(255,255,255,.72); text-decoration:none; font-size:13px; }
.site-footer .foot-nav a:hover{ color:var(--nt-cyan); text-decoration:none; }
.site-footer .copyright{
  grid-column:1 / -1;
  margin:16px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
  font-size:12px;
}
@media (max-width:960px){
  .site-footer .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .site-footer{ padding-top:40px; }
  .site-footer .footer-wrap{ padding:0 16px; }
  .site-footer .footer-grid{ gap:28px 16px; }
}