@charset "UTF-8";
/* =============================================================
   山梨の未来を考える 共通CSS
   デザイン規範（設計§2）:
   - 背景白 / 角丸全面禁止（下記reset保険） / イラストアイコン0
   - 本文18px以上・行間1.8・文字色ほぼ黒(#1A1A1A)
   - アクセント赤 #D7000F は見出し罫線・ボタン・強調のみ
   - タップ領域44px以上 / スマホ最優先1カラム / PC最大幅1000px
   ============================================================= */

/* 保険reset：角丸全面禁止（設計§2-2） */
* { border-radius: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, dt,
table, th, td, form, fieldset, input, textarea, button, select {
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: #FFFFFF;
  color: #1A1A1A;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.8;
}

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

ul, ol { list-style: none; }

a { color: #1A1A1A; text-decoration: underline; text-underline-offset: 3px; transition: color 0.4s, background-color 0.4s, border-color 0.4s, opacity 0.4s; }
a:hover { color: #D7000F; }

.container { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

/* ---------------- ヘッダ・ナビ ---------------- */

.site-header { border-bottom: 4px solid #D7000F; background: #FFFFFF; }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-brand { line-height: 1; align-self: center; margin: 0; }
.site-brand a { display: block; text-decoration: none; }
.site-brand img { width: auto; height: 56px; }
@media (min-width: 800px) { .site-brand img { height: 68px; } }

.menu-toggle {
  display: inline-block;
  min-height: 44px;
  min-width: 96px;
  padding: 8px 20px;
  border: 2px solid #1A1A1A;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.menu-toggle[aria-expanded="true"] { background: #1A1A1A; color: #FFFFFF; }

.site-nav { display: none; width: 100%; }
.site-nav.is-open { display: block; }
.site-nav ul { border-top: 1px solid #CCCCCC; }
.site-nav li { border-bottom: 1px solid #CCCCCC; }
.site-nav a {
  display: block;
  padding: 12px 8px;
  min-height: 44px;
  font-size: 18px;
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  font-weight: 700;
  background: #D7000F;
  color: #FFFFFF;
}
.site-nav a[aria-current="page"]:hover { color: #FFFFFF; }

@media (min-width: 800px) {
  .menu-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav ul { display: flex; gap: 4px; border-top: 0; }
  .site-nav li { border-bottom: 0; }
  .site-nav a { padding: 10px 14px; }
}

/* ---------------- 見出し・本文 ---------------- */

main { display: block; }

.page-title {
  font-size: 28px;
  line-height: 1.5;
  border-left: 8px solid #D7000F;
  padding-left: 14px;
  margin: 32px 0 24px;
}

.section-title {
  font-size: 24px;
  line-height: 1.5;
  border-left: 8px solid #D7000F;
  padding-left: 14px;
  margin: 40px 0 20px;
}

.sub-title {
  font-size: 20px;
  border-bottom: 2px solid #D7000F;
  padding-bottom: 6px;
  margin: 32px 0 16px;
}

p { margin: 0 0 1em; }

.lead { margin-bottom: 1.5em; }

.notice-box {
  border: 2px solid #1A1A1A;
  padding: 16px;
  margin: 24px 0;
}

.error-box {
  border: 2px solid #D7000F;
  color: #1A1A1A;
  padding: 16px;
  margin: 24px 0;
}
.error-box ul { list-style: disc; padding-left: 24px; }

/* ---------------- ボタン ---------------- */

.btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 28px;
  font-size: 18px;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 2px solid #D7000F;
  background: #FFFFFF;
  color: #D7000F;
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.btn:hover { background: #D7000F; color: #FFFFFF; }

.btn-primary { background: #D7000F; color: #FFFFFF; }
.btn-primary:hover { background: #A8000C; border-color: #A8000C; color: #FFFFFF; }

.btn-block { display: block; width: 100%; }

/* ---------------- ヒーロースライダー（設計§3.1） ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  height: 60vw;
  max-height: 520px;
  min-height: 240px;
  background: #333333;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-leaving { z-index: 1; }
.hero-slide.is-active { z-index: 2; }

.hero-slide img, .hero-slide picture { width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; }

/* Ken Burns: 6秒表示＋1.2秒フェードを覆う8秒でゆっくりズーム。
   退場中（.is-leaving）も同じアニメーションを維持し、
   フェード中に動きが止まらない（連続的に切り替わる）ようにする */
.hero-slide.is-active img,
.hero-slide.is-leaving img {
  animation: hero-kenburns 8s linear forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* キャッチコピー帯（修正指示02：もっと目立たせる）赤帯×白抜き大文字 */
.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(215, 0, 15, 0.92); /* 赤帯・角丸なし */
  color: #FFFFFF;
  padding: 18px 20px 20px;
  border-top: 4px solid #FFFFFF;
  text-align: center; /* 修正指示03: センター配置 */
}
.hero-caption .hero-title {
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.hero-caption .hero-sub {
  margin: 4px 0 0;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active img, .hero-slide.is-leaving img { animation: none; }
}

/* ---------------- 漫画グリッド（設計§3.3：4:3固定枠） ---------------- */

.manga-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 24px 0;
}
@media (min-width: 560px) { .manga-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .manga-grid { grid-template-columns: repeat(3, 1fr); } }

.manga-card { border: 1px solid #CCCCCC; }
.manga-card a { display: block; text-decoration: none; transition: box-shadow 0.4s; }
.manga-card a:hover { box-shadow: 0 0 0 3px #D7000F; }

.manga-thumb {
  aspect-ratio: 500 / 729;
  overflow: hidden;
  background: #EEEEEE;
}
.manga-thumb img { width: 100%; height: 100%; object-fit: contain; }

.manga-meta { padding: 12px 14px 14px; }
.manga-code { font-size: 16px; color: #555555; margin: 0; }
.manga-title { font-size: 18px; font-weight: 700; margin: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- 運営者情報 ---------------- */

/* テキストリンクはアンダーバー無し・赤文字（修正指示05） */
.about-page a { color: #D7000F; text-decoration: none; }
.about-page a:hover { text-decoration: underline; }

/* ---------------- ページネーション ---------------- */

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.pagination a, .pagination .current {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  text-align: center;
  border: 2px solid #1A1A1A;
  text-decoration: none;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.pagination .current { background: #D7000F; border-color: #D7000F; color: #FFFFFF; font-weight: 700; }

/* ---------------- フォーム ---------------- */

.form-table { width: 100%; margin: 24px 0; }
.form-row { margin-bottom: 24px; }
.form-row label { display: block; font-weight: 700; margin-bottom: 6px; }
.required-mark { color: #D7000F; font-weight: 700; }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], textarea, select {
  width: 100%;
  font-size: 18px;
  font-family: inherit;
  line-height: 1.6;
  padding: 10px 12px;
  min-height: 44px;
  border: 2px solid #767676;
  background: #FFFFFF;
  color: #1A1A1A;
}
textarea { min-height: 200px; resize: vertical; }

/* 修正指示03: マウスクリックでは赤枠を出さない（キーボード操作時のみ表示） */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #D7000F;
  outline-offset: 1px;
}

/* honeypot（人間には見せない） */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- 数字で見る山梨県（修正指示02） ---------------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}
@media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.stat-card {
  border: 1px solid #CCCCCC;
  border-top: 6px solid #D7000F;
  background: #FFFFFF;
  padding: 18px 12px 14px;
  text-align: center;
}
.stat-label { font-size: 18px; font-weight: 700; margin: 0 0 6px; line-height: 1.4; }
.stat-value {
  margin: 0;
  color: #D7000F;
  font-weight: 700;
  line-height: 1.2;
  font-size: 18px; /* 「全国」等の添え字サイズ */
}
.stat-number {
  font-size: clamp(32px, 4.5vw, 44px);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 18px; margin-left: 2px; }
.stat-unit sup { font-size: 12px; }
.stat-note { font-size: 15px; color: #555555; margin: 6px 0 0; line-height: 1.5; }
.stats-source { font-size: 15px; color: #555555; }

/* 2値カード（男女の割合・健康寿命）：数字をやや小さくして1枚に収める */
.stat-value-dual .stat-number { font-size: clamp(24px, 3vw, 32px); }
.stat-sub { font-size: 16px; margin-right: 2px; }
.stat-sub-second { margin-left: 10px; }

/* ---------------- 市町村ごとのすがた（修正指示03） ---------------- */

.muni-table-wrap { overflow-x: auto; margin: 24px 0; }
.muni-table { width: 100%; border-collapse: collapse; }
.muni-table th, .muni-table td {
  border: 1px solid #CCCCCC;
  padding: 10px 14px;
  font-size: 18px;
  line-height: 1.5;
}
.muni-table thead th {
  background: #D7000F;
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
}
.muni-table tbody th { text-align: left; font-weight: 700; background: #F7F7F7; width: 40%; }
.muni-table tbody td { text-align: right; font-variant-numeric: tabular-nums; }
.muni-table tbody tr:nth-child(even) th { background: #EFEFEF; }
.muni-table tbody tr:nth-child(even) td { background: #FAFAFA; }
.muni-unit { font-size: 15px; margin-left: 2px; color: #555555; }

/* ---------------- SNSブロック（フッター内・赤背景用） ---------------- */

.sns-heading {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  border-left: 6px solid #FFFFFF;
  padding-left: 10px;
  margin: 0 0 12px;
}
.sns-list { display: flex; flex-wrap: wrap; gap: 12px; }
/* 修正指示03: アイコンのみ表示（テキストラベル廃止・正方形チップ） */
.sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  border: 2px solid #FFFFFF;
  text-decoration: none;
  background: #FFFFFF; /* 白チップにして公式ロゴの視認性を確保 */
  transition: opacity 0.4s;
}
.sns-btn:hover { opacity: 0.75; }
.sns-btn img { width: 28px; height: 28px; }
/* 修正指示04補足: URLコピーボタン（button要素）とコピー完了の吹き出し */
button.sns-btn { padding: 0; font: inherit; cursor: pointer; }
.sns-copy { position: relative; }
.sns-copy-feedback {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #FFFFFF;
  color: #222222;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}
.sns-copy-feedback.is-visible { opacity: 1; visibility: visible; }

/* ---------------- フッタ（修正指示02：赤背景×白文字） ---------------- */

.site-footer {
  margin-top: 56px;
  background: #D7000F;
  color: #FFFFFF;
  padding: 40px 0 32px;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 800px) {
  .footer-main { grid-template-columns: auto 1fr; gap: 48px; align-items: start; }
}
.footer-brand img { width: auto; height: 88px; }
.footer-menus { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.footer-heading {
  font-size: 18px;
  font-weight: 700;
  border-left: 6px solid #FFFFFF;
  padding-left: 10px;
  margin: 0 0 12px;
}
.footer-nav ul { margin: 0; }
.footer-nav li { margin: 0 0 4px; }
.footer-nav a {
  display: inline-block;
  padding: 8px 0;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: none; /* アンダーバー不要 */
}
.footer-nav a:hover { color: #FFFFFF; opacity: 0.75; }
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.footer-note { font-size: 16px; color: #FFFFFF; margin: 0 0 4px; }
.footer-copy { font-size: 16px; color: #FFFFFF; margin: 0; }

/* ---------------- 管理画面 ---------------- */

.admin-header {
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 12px 0;
}
.admin-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.admin-brand { font-weight: 700; font-size: 20px; color: #FFFFFF; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; }
.admin-nav a {
  color: #FFFFFF;
  display: inline-block;
  padding: 8px 12px;
  min-height: 44px;
}
.admin-logout-form { display: inline; }
.admin-logout-form button {
  background: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 16px;
  font-family: inherit;
  padding: 8px 14px;
  min-height: 44px;
  cursor: pointer;
}

.admin-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.admin-table th, .admin-table td {
  border: 1px solid #CCCCCC;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}
.admin-table th { background: #F2F2F2; }
.admin-table .thumb { width: 120px; }
.admin-table .thumb img { width: 120px; aspect-ratio: 1 / 1.414; object-fit: contain; background: #EEEEEE; }

.inline-form { display: inline-block; margin: 2px; }
.btn-small {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 2px solid #1A1A1A;
  background: #FFFFFF;
  cursor: pointer;
}
.btn-small:hover { border-color: #D7000F; color: #D7000F; }
.btn-danger { border-color: #D7000F; color: #D7000F; }
.btn-danger:hover { background: #D7000F; color: #FFFFFF; }

.status-new { color: #D7000F; font-weight: 700; }
.status-done { color: #555555; }

.badge-published { font-weight: 700; }
.badge-draft { color: #555555; }

.login-box { max-width: 480px; margin: 48px auto; padding: 0 16px; }