:root{
  /* イギリス的な緑（ブリティッシュレーシンググリーン寄り） */
  --green-900:#0b2f23;
  --green-800:#0f3a2b;
  --green-100:#eaf4ef;

  /* 明るい白っぽい背景 */
  --paper:#fbfbf9;

  /* アクセント赤（囲い/ライン） */
  --accent-red:#b5161b;

  --text:#102018;
  --muted:#4a5a52;

  --radius:0px;
  --shadow: 0 8px 26px rgba(0,0,0,.08);
  --border: 1px solid rgba(11,47,35,.18);

  --wrap: 1100px;
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, var(--green-100), var(--paper) 28%, var(--paper));
}

a{ color:inherit; }
.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.skipLink{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skipLink:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:#fff;
  border:2px solid var(--accent-red);
  border-radius:10px;
  z-index:9999;
}

/* utilities */
.pcOnly{ display:block; }
.redLine{
  height:3px;
  background: var(--accent-red);
  border-radius:999px;
}

/* header (PC) */
.siteHeader{
  background: linear-gradient(90deg, var(--green-900), var(--green-800));
  color:#fff;
  border-bottom: 3px solid var(--accent-red);
}
.headerInner{
  padding: 18px 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 0;
}
.logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  padding:6px;
}
.brandText{ min-width:0; }
.brandTitle{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .06em;
}
.brandSub{
  font-size: 13px;
  opacity: .92;
}
.headerAccent{
  width: 120px;
  height: 8px;
  border:2px solid var(--accent-red);
  border-left:none;
  border-right:none;
  opacity:.9;
}

/* nav */
.siteNav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(251,251,249,.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border);
}
.navList{
  list-style:none;
  margin:0;
  padding: 10px 0;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.navItem{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,47,35,.18);
  background: #fff;
  text-decoration:none;
  font-weight: 700;
}
.navItem:hover{
  border-color: rgba(181,22,27,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* layout */
.layout{
  padding: 22px 0 40px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* movie (PC) */
.movie{
  background:#fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.movieFrame{
  width:100%;
  aspect-ratio: 1280 / 360;
  background: #000;
}
.movieVideo{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* cards */
.card{
  background:#fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}
.pageTitle{
  margin:0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  display:flex;
  align-items:center;
  gap:10px;
}
.titleMark{
  width:10px;
  height:26px;
  background: var(--accent-red);
  border-radius: 999px;
  display:inline-block;
}
.lead{ margin:0; color:var(--muted); }

.sectionTitle{
  margin:0 0 10px;
  font-size: 18px;
  border-left: 4px solid var(--accent-red);
  padding-left: 10px;
}

.services{
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.8;
}
.noteSmall{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* services 内の「行政実態調査・公開サービス」行だけ右にボタンを置く */
.serviceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.serviceText{
  flex: 1 1 auto;
  min-width: 0;
}


.newsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.newsBox{
  border: 2px solid rgba(181,22,27,.18);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #fff, rgba(234,244,239,.35));
}
.newsTitle{
  margin:0 0 6px;
  font-size: 16px;
}

.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--accent-red);
  text-decoration:none;
  font-weight: 800;
  background:#fff;
}
.btn:hover{
  transform: translateY(-1px);
}

/* footer (PC) */
.siteFooter{
  margin-top: 18px;
  padding: 18px 0 28px;
}
.footerInner{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  color: var(--muted);
}
.footerLine{
  width: min(520px, 90%);
  height: 2px;
  background: var(--accent-red);
  border-radius: 999px;
}

/* responsive: smartphone */
@media (max-width: 768px){
  .pcOnly{ display:none; }

  .navList{
    padding: 12px 0;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: stretch;
  }
  .navItem{
    border-radius: 14px;
    padding: 14px 14px;
    text-align:left;
    border: 2px solid rgba(11,47,35,.18);
  }

  .newsGrid{
    grid-template-columns: 1fr;
  }

  .pageTitle{
    font-size: 20px;
  }
}